更新日:2024年07月27日Shopify管理画面から発行された割引クーポンをユーザーが使用するためには、チェックアウト画面でそのクーポンコードを入力する必要がありますが、スマホ画面ではその場所がわかりづらく、お客様から「どこにクーポンを入力すればいいかが分からない」というお問合せをいただくEC担当の方も多いです。ある条件を満たしたユーザーにのみクーポンをあてる、という施策を打つ際は、できればその条件を満たした時点でクーポンコードを入力しなくても自動的にクーポンが反映されているのがベストですが、それも現状のShopifyのデフォルト機能だと難しいです。この記事では、それらの問題を解決するために、クーポンコードの入力箇所をわかりやすい場所に移動させたり、顧客がコードを入力しなくても、クーポンを自動反映させる開発を紹介します。カートページにクーポンコードを入力してもらう今回は、Shopifyで人気の無料テーマ「dawn」を前提として進めます。(必ず、ファイルを変更する前にメモ帳などのバックアップをとってください)dawn以外のテーマでも、考え方は同じなので、適宜ご自身の環境に読み替えていただければと思います。中身とそっくりそのまま入れ替えてください。CodePen.成功すると、Shopify管理画面「テーマ」→「カスタマイズ」→カート画面に進むと、コードを入力できるブロックが追加できるようになっています。ここに、下記のコードを入力してください。CodePen.カートページにクーポンコードを入力できるデザインが表示されました。あなたのストアで有効になっているクーポンを使って、反映されるかどうか確認してみてください。これで、顧客自身がカートページでクーポンコードを入力できるようになりました。ここからは、顧客ごとに自動適用させたいクーポンがある場合の処理について紹介します。顧客の状態ごとに、クーポンコードを自動適用させる今までの流れで作成したHTML入力欄の中身を、下記コードに書き換えてみてください。いうクーポンを適用する」という意味のものです。※自動適用なので、入力欄自体は非表示にしていますログインしているかどうか以外にも、ユーザーが持っているタグや過去の注文履歴などで条件分岐させることもできるので、ご自身の環境に合わせて読み替えた上で実装してみてください。補足:カートページが更新された場合に備えて、フォーム情報をローカルに保存するユーザーが割引コードを追加した後でカートを更新することを決定した場合、ページの再読み込み時にコードは失われます。このため、ページの再読み込み時にクーポンデータを保存し再適用するためのlocalStorage変数を作成しました。この実装は必須ではなく、問題を引き起こす可能性があります。顧客がチェックアウト時に新しい割引を入力すると、その値はlocalStorageに保存されません。ユーザーがカートに戻ると、古い割引を入力し、それをチェックアウト時に適用します。CodePen.まとめShopifyで発行したクーポンコードをカート画面で入力する方法と、顧客が入力しなくても注文に自動で反映させる方法を紹介しました。各ストアの状況や方針に合わせて、最適な方法を選んで利用してください。この記事が、あなたのEC運営のお役に立てれば幸いです。※この記事は2024年07月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。ファイブビット」を設立←国内5番目の個人Shopifyエキスパートに認定。100以上のShopifyストア構築実績。1992年5月生まれ。