Shopify管理画面から発行された割引クーポンをユーザーが使用するためには、チェックアウト画面でそのクーポンコードを入力する必要がありますが、スマホ画面ではその場所がわかりづらく、お客様から「どこにクーポンを入力すればいいかが分からない」というお問合せをいただくEC担当の方も多いです。
また、ある条件を満たしたユーザーにのみクーポンをあてる、という施策を打つ際は、できればその条件を満たした時点でクーポンコードを入力しなくても自動的にクーポンが反映されているのがベストですが、それも現状のShopifyのデフォルト機能だと難しいです。
この記事では、それらの問題を解決するために、クーポンコードの入力箇所をわかりやすい場所に移動させたり、顧客がコードを入力しなくても、クーポンを自動反映させる開発を紹介します。
カートページにクーポンコードを入力してもらう
今回は、Shopifyで人気の無料テーマ「dawn」を前提として進めます。
（必ず、ファイルを変更する前にメモ帳などのバックアップをとってください）
dawn以外のテーマでも、考え方は同じなので、適宜ご自身の環境に読み替えていただければと思います。
上記動画のように、管理画面「オンラインストア」→「テーマ」→「コードを編集」からコード編集画面に進んだ上で、下記コードを main-cart-footer.liquid の中身とそっくりそのまま入れ替えてください。
See the Pen Untitled by 福水正太 (@shotafukumizu) on CodePen.
成功すると、Shopify管理画面「テーマ」→「カスタマイズ」→カート画面に進むと、コードを入力できるブロックが追加できるようになっています。
ここに、下記のコードを入力してください。
See the Pen Untitled by 福水正太 (@shotafukumizu) on CodePen.
カートページにクーポンコードを入力できるデザインが表示されました。
あなたのストアで有効になっているクーポンを使って、反映されるかどうか確認してみてください。
これで、顧客自身がカートページでクーポンコードを入力できるようになりました。ここからは、顧客ごとに自動適用させたいクーポンがある場合の処理について紹介します。
顧客の状態ごとに、クーポンコードを自動適用させる
今までの流れで作成したHTML入力欄の中身を、下記コードに書き換えてみてください。
See the Pen Untitled by 福水正太 (@shotafukumizu) on CodePen.
このコードは、「もしユーザーがログインしていたら、1000off というクーポンを適用する」という意味のものです。
※自動適用なので、入力欄自体は非表示にしています
ログインしているかどうか以外にも、ユーザーが持っているタグや過去の注文履歴などで条件分岐させることもできるので、ご自身の環境に合わせて読み替えた上で実装してみてください。
補足：カートページが更新された場合に備えて、フォーム情報をローカルに保存する
ユーザーが割引コードを追加した後でカートを更新することを決定した場合、ページの再読み込み時にコードは失われます。このため、ページの再読み込み時にクーポンデータを保存し再適用するためのlocalStorage変数を作成しました。
警告: この実装は必須ではなく、問題を引き起こす可能性があります。顧客がチェックアウト時に新しい割引を入力すると、その値はlocalStorageに保存されません。ユーザーがカートに戻ると、古い割引を入力し、それをチェックアウト時に適用します。
See the Pen Untitled by 福水正太 (@shotafukumizu) on CodePen.
まとめ
Shopifyで発行したクーポンコードをカート画面で入力する方法と、顧客が入力しなくても注文に自動で反映させる方法を紹介しました。各ストアの状況や方針に合わせて、最適な方法を選んで利用してください。
この記事が、あなたのEC運営のお役に立てれば幸いです。
※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。
この記事の監修者
＼ShopifyでEC構築を検討中の方へ／
現在、Shopify公式は無料のお試しキャンペーンを実施しています。
百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。
下記の案内ページからキャンペーンの詳細をご確認ください。
)
)
)
)
)
)
)
)
