Closed12

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

kageyamakageyama

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

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

以上が一連の流れになる

kageyamakageyama

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

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

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

kageyamakageyama

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

kageyamakageyama

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

kageyamakageyama

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

kageyamakageyama

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

kageyamakageyama

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

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

kageyamakageyama

実際に導入してみた。

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

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

kageyamakageyama

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

kageyamakageyama

結論

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

このスクラップは2022/06/04にクローズされました