はじめに

今回の記事は、Shopifyストアにクーポンコードをコピーするためのページを導入する際の調査内容を記録したものになります。

Shopifyにオシャンティなクーポンページコピーページを作成する方法をご紹介いたしますので、ぜひ最後まで読んでいただけますと幸いです！

クーポンコードの使用方法

クーポンコードは、Shopifyストアの管理画面から発行することが可能です。
クーポンコード自体は文字列で発行されます。
マーチャントは何らかの手段（メールで配布したり、ストア上のどこかのページに表示して配布するなど）でこのクーポンコードを顧客に提供します。
顧客は提供されたクーポンコードを、商品購入時にチェックアウトページのクーポンコード入力欄にペーストして使用します。

ストア上でクーポンコードを配布する場合、文字列をどこかのページに載せることになりますが、顧客の目線からすると見つけにくいという問題があります。
また、いちいち文字列を選択してコピーするという手間があるため、改善したいと考えました。

クーポンコードコピー機能

文字列ではなく、クーポンっぽい画像などを用意してそちらをクリックすることでクーポンコードがコピーされるような機能を実装したいと考えました。
この方法なら、以下の画像のようにクーポンコードの情報を載せることもでき、顧客からも直感的にクーポンコードのコピーができると考えました。

複数のクーポンを提供する場合にも、画像が使用できればデザイン製を損ねることなくストア上に表示できるというメリットもありそうです（以下の画像のように一覧表示した時してもデザインを損ねることがなさそう）。

上記の要件を手軽に機能を実装するため、Shopify App Storeにアプリがないか調査しました。
調査を進めたところ、『クーポンコード 1 クリックコピー｜リテリア Coupon』というアプリを見つけました。

クーポンコード 1 クリックコピー｜リテリア Couponの説明

こちらのアプリについてですが、以下の画像がわかりやすいです。

このようにクーポンコードと画像を紐付けて一覧にして表示できるセクションを提供してくれるアプリになります。
顧客は画像をクリックすることで、クーポンコードをコピーすることが可能です。
まさに求めていた機能です...！

テーマカスタマイズ画面から、クーポンコードに対応する画像や文言をノーコードで設定できました。
画像を挿入できる機能も嬉しいですが、画像下に表示する文言を設定できるのもかなりありがたいです。
画像で直感的な情報を提供し、文言でクーポンの詳細な情報を提供するみたいな使い方ができます。
また、クーポンコードコピー前の画像とコピー後の画像も設定できるため、顧客はコピーしたということがわかります。

コピーしたクーポンコードは、最終的にチェックアウトページのクーポンコード入力欄にペーストする形になります。

終わりに

最後まで読んでいただきありがとうございます。

興味のある方は、以下のURLをアプリのインストールを行うことができます。