【2025年】Shopify で商品ごとにクロスセルポップアップを表示する方法は？おすすめアプリも紹介！

はじめに
Shopify で商品ごとにクロスセルポップアップを表示することはできる？
Shopify で商品ごとにクロスセルポップアップを表示するメリット・デメリット
- メリット
- デメリット
実装方法は大きく 2 つ！テーマのコード編集 or アプリ導入
- テーマのコード編集
- アプリ導入
おすすめアプリ「シンプル商品ごとのポップアップクロスセルアプリ」
- 「シンプル商品ごとのポップアップクロスセルアプリ」の主な特徴
「シンプル商品ごとのポップアップクロスセルアプリ」の導入手順
テーマコードを編集してクロスセルポップアップを実装するサンプル
まとめ
参考記事

はじめに

Shopify ストア運営において、単価アップや売上拡大を目指したいのであれば「クロスセル」の仕組みづくりが重要です。中でも「商品をカートに追加したときに、別の商品をおすすめするポップアップ」を商品ごとに出し分けることは、購入意欲の高い段階のユーザーにアプローチできるため効果的な施策といえます。

本記事では、Shopify で商品ごとのクロスセルポップアップを表示する方法にフォーカスしながら、そのメリット・デメリット、テーマのコード編集を含む実装方法や、おすすめのアプリについて詳しく解説していきます。特に「シンプル商品ごとのポップアップクロスセルアプリ」は、ノーコードで商品ごとのクロスセルポップアップを導入したい方にとって非常に便利なアプリです。

Shopify でどうやって商品ごとのポップアップを実装すればいいのか？
テーマコードとアプリ、それぞれのメリット・デメリットは？
手軽に運用するにはどのような手順が最適か？

こうした疑問を解消しながら、実際にアプリを導入する手順やコード編集のサンプルまでまとめてご紹介します。
ぜひ最後まで読み進めていただき、ご自身のストアに合った方法を見つけてみてください。

今回は、以下の記事を参考にしています。

Shopify で商品ごとにクロスセルポップアップを表示することはできる？

結論から言うと、Shopify では商品ごとにクロスセルポップアップを表示することが可能です。
ただし、大きく分けると 「テーマのコード編集」 と 「アプリの利用」 の 2 パターンがあり、それぞれ特性や難易度が異なります。

テーマのコード編集
自社でエンジニアがいたり、コーディングに慣れている場合は、Liquid や JavaScript で実装してポップアップを制御できます。細かい挙動やデザインをカスタマイズできるメリットがある一方で、保守やバージョンアップの際にメンテナンスの負荷がかかりやすいのがデメリットです。
アプリの利用
Shopify アプリストアに公開されている「商品ごとにクロスセルを表示する」用途のアプリを導入し、ノーコードで実装する方法です。初心者やコードに触れたくない方にとって非常に便利で、特に海外製アプリや日本製アプリなどさまざまな選択肢があります。本記事でご紹介する「シンプル商品ごとのポップアップクロスセルアプリ」もその一つです。

このように大きく 2 通りの方法があるため、自身のストアの規模や運営体制に合ったアプローチを選びましょう。

Shopify で商品ごとにクロスセルポップアップを表示するメリット・デメリット

メリット

メリットのイメージ

1. 商品ごとに最適なアップセルが可能
「A 商品を買った人には B 商品をセットで勧めたい」「X を購入した人には関連する Y をチェックしてほしい」など、商品単位で提案内容を変えられるため、よりパーソナライズされた接客が可能になります。カート追加のタイミングは購入意欲がすでに高まっているため、あと一品購入を後押ししやすいです。

2. 平均注文額 (AOV) の向上が期待できる
1 回の購入で複数商品を買ってもらえるようになると、顧客単価アップにつながります。ポップアップによるクロスセルは、顧客にとっても “ついで買い” をしやすい環境を整える施策と言えます。

3. 広告費用対効果 (ROAS) の改善
広告やマーケティングコストを掛けて獲得したユーザーに対して、より多くの商品を同時に購入してもらえると、獲得コストの回収効率が高まります。少ない流入でも売上を伸ばしやすくなるのは、大きなメリットです。

4. 在庫回転率の向上
在庫として抱えている商品を、クロスセルポップアップを通じて積極的にプッシュできます。新商品やキャンペーン商品をクローズドなポップアップ経由で売り出すことで、主力商品の陰に隠れがちな商材にもスポットライトを当てやすくなります。

デメリット

デメリットのイメージ

1. ポップアップによるユーザー体験の阻害リスク
カート追加時に強制的にポップアップを表示するため、操作感や UI が煩わしいと感じられる可能性があります。過度にポップアップを乱発すると、かえってユーザーの離脱を招くリスクもあるため、デザインや表示頻度の調整が重要です。

2. 実装や管理の手間
テーマのコード編集による実装だと、商品ごとにロジックを切り分けなければならない場面もあり、メンテナンスコストがかかります。アプリ導入のケースでも、ポップアップを表示したい商品が多い場合は、ひとつひとつ設定・管理する手間が増える可能性があります。

3. スマホ表示でのスペースや画面遷移への配慮
ポップアップは画面上の限られたスペースを使用します。特にスマホ利用率が高い EC では、ユーザーが嫌がるほど大きなポップアップや閉じ方がわかりづらい UI にしてしまうと、UX が低下しやすい点に注意が必要です。

4. 他アプリやテーマとの競合リスク
ポップアップを制御するスクリプトが、他のアプリやテーマのスクリプトと干渉するケースもあります。表示が崩れたり、動作に不具合が生じたりする可能性があるため、導入前には必ず検証が必要です。

実装方法は大きく 2 つ！テーマのコード編集 or アプリ導入

ここからは「どのような手段で商品ごとのクロスセルポップアップを実装するか」という視点で、テーマのコード編集とアプリ導入、それぞれのメリット・デメリットを整理します。

テーマのコード編集

テーマのコード編集画面

メリット

細かい挙動やデザインをゼロから自由に設計できる
不要な機能を排除し、できるだけ軽量に仕上げることが可能
一度構築すれば月額費用が発生しない

デメリット

コードの知識や Shopify Liquid・JavaScript の理解が必要
テーマのアップデート時に修正箇所を再度適用する必要がある
バグや不具合の原因を自力で探さなければならない
大規模ストアや頻繁に商品を追加・変更するストアの場合、商品ごとの出し分けロジックが複雑化しがち

したがって、自社でエンジニアを抱えている、またはコード編集に慣れている方で、メンテナンスコストを厭わないのであればこの方法は有力な選択肢です。反面、初心者や技術者不在の運営チームではハードルが高く、アプリを導入した方がスムーズでしょう。

アプリ導入

Shopify アプリストア

メリット

ノーコード、もしくは最小限の設定作業で導入できる
ストア構築に必要な機能がまとまっていることが多く、UI もわかりやすい
トラブルや不具合が起こった際には、アプリ開発元のサポートを受けられる
定期的なアップデートで新機能が追加されたりバグが修正されたりする

デメリット

月額料金やトランザクション毎の従量課金など、コストがかかる場合が多い
テーマや他アプリとの相性問題がある場合も
アプリ独自のコードが追加されるため、ページ速度への影響を多少受けることがある
アプリがサポートを終了した場合に依存リスクが発生する

アプリ導入は、コードを書かずに実装したいストアや、スピーディーにクロスセル施策を展開したい場合に非常に適した方法です。また、有償であってもアップセル・クロスセルによる売上増分で十分に投資を回収できることも多いため、費用対効果が見込めるなら積極的に利用を検討してみる価値があります。

「シンプル商品ごとのポップアップクロスセルアプリ」の導入手順

以下では、公式のご利用ガイド（https://unreact.jp/shopify-apps/sa-073-popup-per-product/guide）を参考にしながら、実際の導入フローや基本的な使い方を順を追って解説します。

アプリのインストール

Shopify アプリストアで「シンプル商品ごとのポップアップクロスセルアプリ」と検索してください。もしくはこちらのリンクからアプリ詳細ページへアクセスしてください。
アプリの詳細ページから「インストール」ボタンをクリックし、インストールを始めます。
Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
アプリの管理画面が表示されれば、インストールは完了です。

この段階で、7 日間の無料トライアルが始まります。無料期間のうちに一通りの機能を試してみて、自社ストアに合うかどうか判断しましょう。

クロスセルポップアップ商品の追加

アプリ管理画面の「クロスセルポップアップ商品一覧」へ移動し、右上の「クロスセルポップアップ商品を追加」をクリックします。
クロスセルポップアップを設定する対象商品を選択します。
ポップアップに表示するクロスセル商品を選択します。
「保存する」を押すと、設定が反映されます。

これらを複数登録することで、様々な組み合わせで「商品ごとに異なるクロスセルポップアップ」が表示されるようになります。

アプリをテーマに追加

クロスセルポップアップを実際にストア上で表示するには、テーマにアプリブロックを追加する必要があります。以下の手順でアプリブロックを追加してください。

アプリの管理画面の設定画面の「テーマに追加」でテーマにアプリブロックを追加してください。
アプリブロックが有効化されていることを確認して、変更を保存してください。（公開中のテーマの場合、保存すると実際のストアに反映されてしまうので注意してください。）

自動でのアプリブロック追加がうまくいかない場合は、ご利用ガイドを参考に手動でアプリブロックを有効化してください。

アプリのカスタマイズ

追加したアプリブロックで表示されるクロスセルポップアップをカスタマイズすることができます。

基本設定
ポップアップに表示されるタイトルと本文を設定することができます。
ポップアップデザイン設定
ポップアップ内のテキストのサイズや色、ポップアップ自体の背景色などをカスタマイズできます。
閉じるボタンの設定
ポップアップ内に表示される閉じるボタンをカスタマイズできます。ボタンの文言やテキストのサイズ、色などを編集可能です。
おすすめ商品（クロスセル）の表示設定
ポップアップ内に表示されるおすすめ（クロスセル）商品のレイアウトをカスタマイズできます。
再表示制御設定
ポップアップを再表示するかどうかや再表示する場合の期間を設定できます。
追加の CSS
上記の設定では、カスタマイズできない細かいデザインの調整などが可能です。直接 CSS を入力する必要があるので、コード編集の知識がある方向けの設定項目です。

運用上のポイント

ターゲット商品を厳選する
すべての商品にクロスセルポップアップを出すと管理が煩雑になります。まずは主力商品や関連性の高い商品から始め、効果を測りながら徐々に拡大する方法がおすすめです。
ポップアップ文言の AB テスト
タイトルやボタンの文言を少し変えるだけでもクリック率が変わる可能性があります。定期的に文言を変えてテストを行い、より効果の高いパターンを探ってみましょう。
表示頻度のコントロール
あまりに頻繁にポップアップを出しすぎると、ユーザー体験を損なう恐れがあります。数日間は再表示しない設定にしたり、購入済みの商品にはポップアップを表示しないなど、ケースバイケースで最適化を行うことが重要です。
スマートフォン表示に配慮
スマホユーザーは画面が小さいため、大きすぎるポップアップや閉じるボタンが押しにくい配置はストレスの原因になります。レスポンシブデザインが正しく機能しているか、事前にテストしましょう。

テーマコードを編集してクロスセルポップアップを実装するサンプル

テーマのコード編集で実装する場合、以下のような流れで進めることが多いです。ここではあくまで一例ですが、参考コードを示します。

JavaScript で商品をカートに追加したタイミングを検出
- ajax でカート更新を行う際にイベントをフックする
- Shopify のフェッチ API や /cart/add.js などを監視して、成功レスポンスを受け取ったらポップアップを表示
Liquid / HTML でポップアップのテンプレートを用意
- product.liquid や cart.liquid、あるいは snippet として popup-cross-sell.liquid を用意
- 特定の商品ハンドル（handle）や商品 ID に応じたポップアップ内容を出し分ける処理を記述
CSS でポップアップのスタイルを整える
- レスポンシブに対応しつつ、ブランドイメージに合わせたデザインを反映

具体的なコードのイメージは下記のようになります。

<!-- snippet/popup-cross-sell.liquid (例) -->

<div id="cross-sell-popup" style="display: none;">
  <div class="popup-overlay"></div>
  <div class="popup-content">
    <h2>カートに追加されました！</h2>
    <p>ご一緒にいかがでしょうか？</p>
    <!-- 商品IDによって出し分ける例 -->
    {% if product.handle == 'product-handle-1' %}
      <div class="recommend-item">
        <a href="/products/recommended-product-1">
          <img src="推奨商品の画像URL" alt="おすすめ商品1">
          <p>おすすめ商品1</p>
        </a>
      </div>
    {% elsif product.handle == 'product-handle-2' %}
      <div class="recommend-item">
        <a href="/products/recommended-product-2">
          <img src="推奨商品の画像URL" alt="おすすめ商品2">
          <p>おすすめ商品2</p>
        </a>
      </div>
    {% endif %}
    <button class="close-popup">閉じる</button>
  </div>
</div>

<!-- JS (例) -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // カート追加ボタンを監視する
    const addToCartButtons = document.querySelectorAll(
      'form[action="/cart/add"] button[type="submit"]',
    );

    addToCartButtons.forEach(function (button) {
      button.addEventListener('click', function (e) {
        // ajaxサブミットなどでカート更新した後のレスポンスをフックしてポップアップを出す処理を記述
        // ここでは擬似的にタイマーでポップアップを表示する例にしておく
        setTimeout(function () {
          document.getElementById('cross-sell-popup').style.display = 'block';
        }, 1000);
      });
    });

    // 閉じるボタンのハンドラ
    const closeButton = document.querySelector('.close-popup');
    closeButton.addEventListener('click', function () {
      document.getElementById('cross-sell-popup').style.display = 'none';
    });
  });
</script>

/* popup-cross-sell.css (例) */
#cross-sell-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

#cross-sell-popup .popup-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#cross-sell-popup .popup-content {
  position: relative;
  width: 80%;
  max-width: 400px;
  margin: 10% auto;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
}

.close-popup {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 16px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

上記の例では「product.handle が 'product-handle-1' ならこの商品をおすすめする」といった単純な条件分岐を入れていますが、実際の運用ではデータドリブンで商品をマッピングする、あるいはタグを使って関連商品を取得するなど、より複雑な実装にも応用できます。

コード編集による実装は柔軟性が高い反面、メンテナンスが煩雑になるリスクもある点に注意しましょう。

まとめ

Shopify で商品ごとにクロスセルポップアップを表示する施策は、購入意欲が高い瞬間を逃さず、平均注文額 (AOV) を向上させるための有効なアプローチです。購入者の満足度やショッピング体験を損なわないよう、デザインや表示タイミング、頻度を工夫しながら適切に導入してみることをおすすめします。