Shopify でクーポンバナーを自動適用する方法を徹底解説

はじめに
記事の構成
Shopify でクーポンバナーの自動適用はできる？
クーポンバナーを自動適用するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル自動適用クーポン｜お手軽クーポンバナー」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
- 文言のテンプレ例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify ストアでクーポンを配布しているのに、思ったほど使ってもらえない。そんな悩みを抱えているストアオーナーは多いのではないでしょうか。

実は、クーポンが使われない最大の原因は「コードの手入力が面倒」ということにあります。メールやSNSでクーポンコードを受け取ったお客様が、いざ購入しようとしたときにコードをコピーして、チェックアウト画面で入力欄を探して、ペーストして...という手順を踏むのは想像以上にストレスです。特にスマートフォンでは文字入力自体が煩わしく、「あとでいいや」とカートを離脱してしまうケースが少なくありません。

この課題を解決するのが「クーポンバナーの自動適用」です。ストア上に表示されたバナー画像をお客様がクリックするだけで、クーポンコードが自動的にカートに適用される仕組みです。

この記事では、Shopify ストアにクーポンバナーの自動適用を導入する方法を、アプリ導入とコード実装の2つのアプローチから徹底解説します。メリット・デメリットの整理、おすすめアプリの紹介、実際のコード例、さらには関連施策との組み合わせ方まで、実践的な内容をお届けします。

参考記事:

記事の構成

この記事では、以下の内容を順番に解説していきます。

Shopify でクーポンバナーの自動適用はできるのか（結論）
クーポンバナー自動適用のメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル自動適用クーポン｜お手軽クーポンバナー」の紹介
アプリのインストール手順と設定方法
すぐ使えるおすすめ設定例
関連施策との組み合わせ方
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify でクーポンバナーの自動適用はできる？

結論から言うと、できます。 Shopify には /discount/{クーポンコード} という標準エンドポイントが用意されており、このURLにアクセスするだけでクーポンコードがカートに自動適用されます。

この仕組みを活用して、バナー画像のクリック時に JavaScript で /discount/{コード} にリクエストを送ることで、ワンクリックでのクーポン適用が実現できます。

導入方法は大きく分けて2つあります。

テーマのコード編集で自作する方法 - Liquid テンプレートに HTML・CSS・JavaScript を直接記述する方法です。自由度は高いですが、コーディングの知識が必要です。
アプリを導入する方法 - Shopify App Store で公開されているアプリを使う方法です。ノーコードで導入でき、カスタマイズも管理画面から行えます。

この記事では両方の方法を解説しますので、ご自身のスキルや状況に合った方法を選んでください。

クーポンバナーを自動適用するメリット・デメリット

メリット

お客様のクーポン利用ハードルを大幅に下げられる

クーポンコードの手入力が不要になるため、お客様はバナーをクリックするだけで割引を受けられます。特にスマートフォンでの操作では文字入力の煩わしさがなくなるため、クーポンの利用率向上が期待できます。

カート離脱の防止につながる

「クーポンコードが見つからない」「コードを正しく入力できない」といった理由でチェックアウトを離脱するお客様を減らせます。せっかく購入意欲のあるお客様を逃さない仕組みです。

バナー画像で視覚的に訴求できる

テキストだけのクーポンコード表示と比べて、バナー画像は圧倒的に目立ちます。セールのお得感やキャンペーンの雰囲気を画像で表現できるので、お客様の目に留まりやすく、クリックされやすくなります。

複数キャンペーンの同時展開が簡単にできる

「新規会員10%OFF」「季節限定セール」「まとめ買い割引」など、複数のクーポンバナーを同時に表示できます。お客様が自分に合ったクーポンを選べるようになり、購買意欲の後押しになります。

ノーコードで導入・管理できる

アプリを使えば、テーマエディタからの操作だけで設置・カスタマイズ・バナー差し替えが完結します。コーディングの知識がなくても、季節ごとのバナー更新やキャンペーンの切り替えを自分で行えます。

デメリット

クーポンの乱用リスクがある

バナーが誰でもクリックできる状態になるため、意図しない範囲のお客様にもクーポンが適用される可能性があります。期間限定や対象者限定のクーポンの場合は、Shopify のクーポン設定側で利用条件をしっかり設定しておく必要があります。

バナー画像の制作コストがかかる

クリックしたくなるような魅力的なバナー画像を用意する必要があります。PC用とモバイル用で別々の画像を用意するとなると、デザインの手間がかかります。ただし、Canva などの無料ツールを使えば、テンプレートから簡単に作成できます。

テーマによっては表示が崩れる場合がある

特にコード編集で自作した場合、テーマのアップデートで表示が崩れることがあります。アプリを使う場合はこのリスクが低くなりますが、テーマとの相性を事前に確認しておくと安心です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

テーマの Liquid ファイルに直接 HTML・CSS・JavaScript を記述して実装する方法です。

向いているケース:

コーディングの知識があるストアオーナーや開発者がいる場合
完全に独自のデザインやアニメーションを実装したい場合
月額費用をかけたくない場合

注意点:

テーマのアップデート時にコードが消える可能性がある
不具合が起きた際は自分で対処する必要がある
複数バナーの管理や設定変更のたびにコードを編集する必要がある

アプリを導入する方法

Shopify App Store で公開されているクーポンバナーアプリをインストールして利用する方法です。

向いているケース:

コーディングの知識がない、または時間をかけたくない場合
テーマエディタから簡単に設定を変更したい場合
テーマのアップデートに影響されたくない場合

注意点:

月額費用がかかる（無料トライアル期間があるアプリが多い）
アプリ独自の制約がある場合がある

結論：最初はアプリで小さく試すのがおすすめ

まだクーポンバナーの自動適用を試したことがないなら、まずはアプリで導入してみることをおすすめします。多くのアプリには無料トライアル期間があるので、実際にストアでの効果を確認してから判断できます。

コーディングに自信がある方でも、アプリの設定画面を触ってみることで「どんな設定項目が必要か」「どんなカスタマイズがあると便利か」がわかります。その知見をもとに自作するのも良い進め方です。

項目	内容
アプリ名	シンプル自動適用クーポン｜お手軽クーポンバナー
料金	Basic Plan 月額 $3.99、7日間の無料体験、年払いで実質2ヶ月分お得
対応言語	20言語以上（日本語・英語を含む）
テーマ追加	ノーコード対応（1クリックでテーマに追加）

アプリのインストール手順

アプリのインストールから有効化までの手順を、画像付きで解説します。

ステップ1: ストアの「設定」をクリックします。。

インストール画面1

ステップ2: 「アプリ」をクリックし、画面右上の「Shopify App Store」からShopify App store に移動します。。

インストール画面2

ステップ3: 検索窓で、「シンプル自動適用クーポン｜お手軽クーポンバナー」を検索します。。

インストール画面3

ステップ4: 「インストール」をクリックします。

インストール画面4

インストール画面5

ステップ6: インストール完了です。アプリの管理画面が表示されます。

インストール画面6

アプリをテーマに追加（有効化）

アプリのインストールが完了したら、次はテーマにアプリブロックを追加します。

方法1: アプリ管理画面から追加（推奨）

アプリ管理画面の「テーマに追加」セクションで、追加先のテーマを選択し「テーマに追加」ボタンをクリックします。

テーマに追加1

テーマに追加2

テーマエディタが開いたら、アプリブロックが追加されていることを確認して「保存」をクリックします。

テーマに追加3

テーマに追加4

方法2: テーマエディタから手動で追加

テーマエディタを開き、「ブロックを追加」からアプリブロックを選択して追加することもできます。この方法を使えば、トップページ以外のページにもバナーを配置できます。

「オンラインストア」をクリックし、テーマエディタに移動します。
手動追加2

「セクションを追加」をクリックし、「シンプル自動適用クーポン｜お手軽クーポンバナー」を選択します。
手動追加1

アプリが挿入されたのを確認し、「保存」ボタンをクリックします。
手動追加3

手動追加4

アプリの設定項目を理解する

テーマエディタでアプリブロックを選択すると、さまざまな設定項目が表示されます。主な設定項目を解説します。

バナー設定

バナーは最大3つまで設定できます。各バナーに対して以下の項目を個別に設定します。

設定項目	説明
クーポンコード	Shopify の管理画面で作成したクーポンコードを入力します
バナー画像（PC）	PC表示用のバナー画像を選択します
バナー画像（モバイル）	モバイル表示用の画像を個別に設定できます（未設定の場合はPC画像を使用）
画像の代替テキスト	アクセシビリティのための代替テキストです
最大幅（PC / モバイル）	バナーの最大幅をピクセル単位で指定します
配置	左寄せ・中央・右寄せから選択します
成功メッセージ	クーポン適用成功時に表示するメッセージです
失敗メッセージ	クーポン適用失敗時に表示するメッセージです

画像設定

カスタマイズ設定1

設定項目	説明
画像のアスペクト比	「元の比率」「ポートレート（3:4）」「正方形（1:1）」「ワイド（4:3）」「ウルトラワイド（16:9）」「バナー（3:1）」から選択
ホバー時の挙動	マウスオーバー時の効果を「透過」「拡大」「なし」から選択
枠線の丸み	バナーの角の丸みをピクセル単位で調整

レイアウト設定

カスタマイズ設定2

設定項目	説明
PC列数	PC表示時の列数を1〜3から選択
モバイル列数	モバイル表示時の列数を1〜3から選択
バナー間の余白	バナー同士の間隔をピクセル単位で調整
アニメーション	「なし」「フェードイン」「バウンス」「パルス」「グロー」から選択
上部余白（PC / モバイル）	コンテナ上部の余白を調整
下部余白（PC / モバイル）	コンテナ下部の余白を調整

メッセージ設定

設定項目	説明
文字の大きさ	メッセージの文字サイズを10〜18pxで調整
成功時の色	クーポン適用成功メッセージの文字色
失敗時の色	クーポン適用失敗メッセージの文字色
テキスト配置	メッセージの配置を左寄せ・中央・右寄せから選択

また、「追加の CSS」設定も用意されているので、さらに細かいスタイル調整が必要な場合はCSSを直接記述できます。

すぐ使えるおすすめ設定例

アプリをインストールしたら、以下のパターンを参考に設定してみてください。

パターン1: シンプルな1枚バナー（初心者向け）

トップページにクーポンバナーを1枚だけ大きく表示するパターンです。

バナー1のクーポンコードを設定
PC最大幅: 800px / モバイル最大幅: 400px
配置: 中央
画像アスペクト比: バナー（3:1）
ホバー: 透過
アニメーション: フェードイン
成功メッセージ: 「クーポンが適用されました！カートをご確認ください。」
失敗メッセージ: 「クーポンの適用に失敗しました。有効期限をご確認ください。」

パターン2: 3枚横並びバナー（キャンペーン時）

複数のキャンペーンを同時に訴求する場合に最適なパターンです。

バナー1〜3にそれぞれ異なるクーポンコードと画像を設定
PC列数: 3 / モバイル列数: 1
PC最大幅: 各400px / モバイル最大幅: 各360px
画像アスペクト比: 正方形（1:1）
バナー間の余白: 16px
アニメーション: パルス

パターン3: 2列レイアウト（メインとサブ）

メインのクーポンを大きく、サブのクーポンを小さく表示するパターンです。

バナー1: メインのクーポン（PC最大幅: 600px）
バナー2: サブのクーポン（PC最大幅: 400px）
PC列数: 2 / モバイル列数: 1
アニメーション: グロー

文言のテンプレ例

成功メッセージと失敗メッセージの文言は、以下を参考にしてみてください。

成功メッセージの例:

「クーポンが適用されました！カートをご確認ください。」
「割引が適用されました！お買い物をお楽しみください。」
「10%OFFクーポン適用済みです！」
「おめでとうございます！クーポンが使えるようになりました。」

失敗メッセージの例:

「クーポンの適用に失敗しました。有効期限をご確認ください。」
「このクーポンは現在ご利用いただけません。」
「申し訳ありません。クーポンの適用中にエラーが発生しました。」
「クーポンの利用条件を満たしていない可能性があります。詳しくはお問い合わせください。」

テーマのコード編集で実装する場合のサンプルコード

ここからは、アプリを使わずにテーマのコードを編集して、クーポンバナーの自動適用を自作する方法を解説します。

実装の流れ

Shopify の /discount/{クーポンコード} エンドポイントを利用して、バナークリック時に fetch リクエストを送信します。レスポンスのステータスに応じて、成功・失敗のメッセージを表示します。

以下のコードは、テーマのカスタム Liquid ブロックに追加するか、セクションファイルとして作成して利用できます。

HTML を追加

<div class="promo-coupon-wrap" id="promo-coupon-area">
  <div class="promo-coupon-grid">

    <!-- バナー1 -->
    <div class="promo-coupon-card"
         data-discount="WELCOME10"
         data-msg-ok="クーポンを適用しました！"
         data-msg-ng="適用できませんでした。条件をご確認ください。">
      <button type="button" class="promo-coupon-trigger">
        <picture>
          <source media="(max-width: 767px)"
                  srcset="https://your-store.com/mobile-banner.jpg" />
          <img src="https://your-store.com/pc-banner.jpg"
               alt="WELCOME10 - 新規会員10%OFFクーポン"
               class="promo-coupon-visual" />
        </picture>
      </button>
      <p class="promo-coupon-notice" role="status"></p>
    </div>

  </div>
</div>

CSS を追加

/* コンテナ */
.promo-coupon-wrap {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}

/* グリッド */
.promo-coupon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .promo-coupon-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* バナーボタン */
.promo-coupon-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.promo-coupon-trigger:hover {
  transform: scale(1.03);
}

.promo-coupon-trigger:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
}

/* バナー画像 */
.promo-coupon-visual {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* メッセージ */
.promo-coupon-notice {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
  min-height: 1.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.promo-coupon-notice--visible {
  opacity: 1;
}

.promo-coupon-notice--ok {
  color: #16a34a;
  font-weight: 600;
}

.promo-coupon-notice--ng {
  color: #dc2626;
}

JavaScript を追加

(function () {
  var area = document.getElementById('promo-coupon-area');
  if (!area) return;

  var cards = area.querySelectorAll('.promo-coupon-card');

  cards.forEach(function (card) {
    var discountCode = card.getAttribute('data-discount');
    var msgOk = card.getAttribute('data-msg-ok');
    var msgNg = card.getAttribute('data-msg-ng');
    var trigger = card.querySelector('.promo-coupon-trigger');
    var notice = card.querySelector('.promo-coupon-notice');

    if (!trigger || !notice || !discountCode) return;

    trigger.addEventListener('click', function () {
      // 二重送信を防止
      trigger.disabled = true;
      notice.textContent = '';
      notice.className = 'promo-coupon-notice';

      // Shopify のクーポン適用エンドポイントへリクエスト
      fetch('/discount/' + encodeURIComponent(discountCode))
        .then(function (response) {
          if (response.ok || response.redirected) {
            // 適用成功
            notice.textContent = msgOk;
            notice.className = 'promo-coupon-notice promo-coupon-notice--visible promo-coupon-notice--ok';
          } else {
            // 適用失敗
            notice.textContent = msgNg;
            notice.className = 'promo-coupon-notice promo-coupon-notice--visible promo-coupon-notice--ng';
            trigger.disabled = false;
          }
        })
        .catch(function () {
          notice.textContent = msgNg;
          notice.className = 'promo-coupon-notice promo-coupon-notice--visible promo-coupon-notice--ng';
          trigger.disabled = false;
        });
    });
  });
})();

コード実装の注意点

テーマのコード編集で実装する場合は、以下の点に注意してください。

クーポンコードはハードコーディングになる: コード内にクーポンコードを直接記述するため、クーポンの変更や追加のたびにコードを編集する必要があります。
テーマ更新時の影響: テーマをアップデートすると、追加したコードが消えてしまう可能性があります。カスタム Liquid ブロックを使うか、テーマの子テーマを利用することで影響を軽減できます。
複数バナーの管理が大変: バナーを増やすたびに HTML を追加し、画像パスやクーポンコードを個別に管理する必要があります。
エラーハンドリング: /discount/ エンドポイントはリダイレクトレスポンスを返すため、fetch のデフォルト設定（リダイレクトを追従する）で適用成功と判定できます。ただし、無効なクーポンコードの場合もリダイレクトされることがあるので、完全なエラー検知は難しい点に留意してください。
パフォーマンスへの影響: 画像サイズが大きすぎるとページの読み込み速度に影響します。バナー画像は適切にリサイズ・圧縮してから使用してください。