Shopify にてクーポンコードのコピーページを作成してみた

Shopify デフォルトのクーポンの仕様

1. ストアの管理画面にて、クーポンを作成
2. クーポンを作成するとクーポンコードなるものが作成される
3. マーチャントは何らかの方法でこのクーポンコードを顧客に共有する
4. 顧客はこのクーポンコードをコピーする
5. 顧客は何か商品を購入して、チェックアウトページにてクーポンコードを入力
6. クーポンの条件を満たしていれば、注文にクーポンが適用される

以上が一連の流れになる

3の『何らかの方法』には以下が挙げれられる

• 顧客にクーポンコードを掲載したメールを送信する
• ストア上にクーポンコードを掲載しておく

クーポンコードをメールで共有しても顧客に確認いただけない可能性がある。
そのため、上記で紹介した両方の方法を採用することにした。

ストア上にクーポンコードを掲載する方法だが、ストア上でクーポンコードを見つけにくいという問題がある。
何とか、クーポンコードを見つけやすくすることはできないだろうか

クーポンだと一眼でわかるようなUIを実装したい。

アプリストアで、『クーポン』とか検索してみる

以下のアプリを発見。
クーポンっぽい画像をクリックするとクーポンコードがコピーできるUIを提供してくれているようだ

アプリリストを読んでいく

https://apps.shopify.com/1-coupon?locale=ja

テーマのカスタマイズ画面からノーコードで色々と設定できるようだ。
以下のカスタマイズが可能なようだ。

• クーポン数
• クーポンコード
• 列数
• クリック前の画像
• クリック後の画像

実際に導入してみた。

画像をクーポン画像をクリックするとクーポンがコピーされた。

画面上部から、『クーポンコードをコピーしました。』と表示された。
かなりわかりやすいUIだと思う

また、画像の下に『100円 OFF』とか『何円以上で何%オフ』みたいな文言を設定できるのもありがたい

結論

Shopify ストアにクーポンを導入するならこのアプリを導入することを検討することをお勧めする。