Zenn
🐈

Shopifyでカート追加時にクロスセルポップアップを表示する方法を考察

に公開
Shopify
shopifyアプリ
tech

はじめに

今回は、Shopify でカート追加時のポップアップクロスセルを実装する方法について考察しました。

HTML・CSS・JavaScript を使ったシンプルなポップアップ実装方法や、Shopify アプリを活用したクロスセル実装方法を解説していきます。
それでは、頑張っていきましょう。

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

Shopify でカート追加時のポップアップクロスセルを実装する定義

カート追加時のポップアップクロスセルとは、お客様が商品をカートに追加した瞬間に「おすすめ商品」や「関連商品」をポップアップで表示し、追加購入を促す施策のことです。EC サイトではよく見かける手法ですが、Shopify ストアではテーマや外部アプリを使うことで簡単に実装できます。

特に、既存顧客の客単価を上げる（アップセル・クロスセル）ための施策として、ポップアップクロスセルは非常に有効です。ユーザーがすでにカートに商品を入れているタイミングで追加提案を行うため、購入意欲が高まっている瞬間を逃さずアプローチできるのが大きなメリットです。

Shopify でカート追加時のポップアップクロスセルを実装するメリット

まずは、Shopify でカート追加時のポップアップクロスセルを実装するメリットについて解説していきます。

1. 客単価（AOV）の向上

顧客がすでに購入を検討しているタイミングで、追加のおすすめ商品を提示できるため、客単価を上げる効果が期待できます。ポップアップで「関連商品」「セット販売商品」などを提案すれば、複数商品を一度に購入してもらいやすくなります。

2. 離脱率の低下

カート画面や購入手続きの段階で提案を行うため、ページ移動時の離脱率を下げることが可能です。わざわざ別ページに遷移させず、その場で「欲しいかも？」と思わせる提案ができるため、スムーズに追加購入が行われるケースが増えます。

3. 在庫の有効活用

余剰在庫や特定のコレクションを集中的に売りたい場合にも、ポップアップクロスセルは有効です。特定商品をピンポイントで紹介しやすく、訴求内容を随時変更することで、在庫回転率の向上が見込めます。

4. 購入体験の向上

ストアのデザインやブランディングに合わせてポップアップをカスタマイズすれば、自然な形でおすすめ商品を提示できます。購入体験を損なわない程度のタイミングとデザインを選ぶことで、ストレスを感じさせずにクロスセルを実現できます。

5. 分析と改善が容易

ポップアップ経由で購入された商品や表示回数、CVR（コンバージョン率）を計測すれば、今後のアップセル施策の改善に役立ちます。A/B テストなどを行うと、どのようなデザインや商品が反応率を高めるかが分かりやすくなります。

Shopify でカート追加時のポップアップクロスセルを実装するデメリット

次に、Shopify でカート追加時のポップアップクロスセルを実装するデメリットについて考察していきましょう。

1. 過度なポップアップ表示によるユーザビリティ低下

ポップアップが頻繁に表示されると、ユーザーは煩わしさを感じる可能性があります。意図せずポップアップが複数回出たり、デザインが煩雑だったりすると、購入意欲を削いでしまう恐れがあります。

2. テーマやアプリの競合リスク

Shopify テーマによっては、既存のスクリプトやアプリと競合して動作しない場合があります。特に、カート周りのカスタマイズが多いテーマでは注意が必要です。動作確認やバグ修正の手間がかかることがあります。

3. コーディングが必要な場合の負担

ノーコードアプリを使わずに自前でポップアップを実装する場合、HTML/CSS/JavaScript などのコーディングが必要になります。エンジニアやフロントエンドの知識が必要なので、非エンジニアには難易度が高い場合があります。

4. 運用コストが発生する

有料アプリを活用する場合は、アプリ利用料やサブスクリプション料金が発生します。また、ポップアップの内容やデザインを頻繁に更新する場合は、そのたびに調整作業が必要です。運用コストと効果のバランスを検討する必要があります。

Shopify でカート追加時のポップアップクロスセルを実装する方法

ここでは、コーディングを用いてポップアップクロスセルを実装する方法について考察していきます。以下に、HTML・CSS・JavaScript のサンプルコードを示します。

まずは、ポップアップ用の HTML 例です。

<!-- カート追加時に表示するポップアップ -->
<div id="crossSellPopup" class="cross-sell-popup">
  <div class="cross-sell-popup-content">
    <span class="cross-sell-popup-close">&times;</span>
    <h2>こちらの商品もいかがですか？</h2>
    <div class="cross-sell-items">
      <!-- おすすめ商品を表示するエリア -->
      <div class="cross-sell-item">
        <a href="/products/example-product">
          <img src="https://example.com/product.jpg" alt="おすすめ商品" />
          <p>おすすめ商品タイトル</p>
        </a>
      </div>
      <!-- 必要に応じて複数アイテムを追加 -->
    </div>
  </div>
</div>

次に、CSS でポップアップのスタイルを設定します。

.cross-sell-popup {
  display: none; 
  position: fixed; 
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; 
  background-color: rgba(0, 0, 0, 0.5);
}

.cross-sell-popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  max-width: 500px;
  position: relative;
  border-radius: 4px;
}

.cross-sell-popup-close {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 24px;
  cursor: pointer;
}

.cross-sell-items {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.cross-sell-item {
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
  flex: 1;
}

続いて、JavaScript で「カートに追加」ボタンの動作をフックし、ポップアップを表示するサンプルを示します。
（以下のコード例では、Shopify の AJAX API を利用した簡易例と想定しています。）

document.addEventListener('DOMContentLoaded', () => {
  const addToCartButtons = document.querySelectorAll('form[action="/cart/add"] button[type="submit"]');
  const crossSellPopup = document.getElementById('crossSellPopup');
  const popupCloseButton = document.querySelector('.cross-sell-popup-close');

  // 「カートに追加」ボタン押下時にポップアップを表示
  addToCartButtons.forEach((btn) => {
    btn.addEventListener('click', (e) => {
      // Ajax でカートに追加する処理が完了した後にポップアップを表示する想定
      // ここでは簡易的に setTimeout で擬似的に処理
      setTimeout(() => {
        crossSellPopup.style.display = 'block';
      }, 1000);
    });
  });

  // ポップアップを閉じる
  popupCloseButton.addEventListener('click', () => {
    crossSellPopup.style.display = 'none';
  });

  // ポップアップ背景クリックでも閉じる
  window.addEventListener('click', (e) => {
    if (e.target === crossSellPopup) {
      crossSellPopup.style.display = 'none';
    }
  });
});

上記のように、/cart/add への送信イベントをフックしてポップアップを表示させることで、カート追加時にクロスセルの提案を行うことができます。より高度な実装では、商品情報や在庫数、レコメンドエンジンからのデータなどを組み合わせて動的に表示することも可能です。

Shopify アプリを用いてカート追加時のポップアップクロスセルを実装する方法

次に、Shopify アプリを用いてノーコードでカート追加時のポップアップクロスセルを実装する方法を紹介します。今回取り上げるのは 「シンプルカート追加時ポップアップクロスセルアプリ」 です。

  • 開発者：株式会社UnReact
  • 価格：月額 $6.99（7 日間の無料トライアルあり）
  • 評価：0.0 (0 レビュー)

以下のShopify公式のアプリストアからインストールできます。

https://apps.shopify.com/sa-072-cart-add-popup?locale=ja

アプリの特徴

  1. ノーコードで簡単設定
    コーディング不要で、カート追加時のポップアップを表示する設定が可能です。アプリの管理画面からタイトルやメッセージ、表示する商品の選択などを直感的に行えます。

  2. ストアのデザインに合わせたカスタマイズ
    ポップアップの色や文言、ボタンデザインなど、ストアのブランディングに合わせて調整ができます。テーマとの整合性も取りやすいです。

  3. おすすめ商品の自由な選択
    特定の商品だけをピンポイントで提案したい場合に役立ちます。在庫調整やキャンペーンなどに合わせて手動選択できるため、柔軟な運用が可能です。

  4. 追加購入を促すことで売上アップ
    お客様の購入フローを妨げることなく、自然なタイミングでおすすめ商品を提示します。シンプルな構成ながら、効果的に客単価アップを狙うことができます。

導入方法の概要

  1. Shopify アプリストアで「シンプルカート追加時ポップアップクロスセルアプリ」をインストールします。
  2. アプリ管理画面でポップアップのタイトルやメッセージを設定します。
  3. 表示したい商品を手動で選ぶか、タグ・コレクションなどで指定し、表示条件をセットします。
  4. デザインや文言を調整し、公開ボタンを押して完了です。

ストアに合わせた柔軟な設定ができるので、コーディングが苦手な方でも扱いやすいのがポイントです。無料トライアルがあるため、まずはお試しで導入してみると良いでしょう。

シンプルカート追加時ポップアップクロスセルアプリ

ここからは、シンプルカート追加時ポップアップクロスセルアプリの機能の概要について解説します。

カート追加時に表示されるクロスセルポップアップを簡単に表示できます。

クロスセルポップアップをカート追加時に表示できます。

クロスセルとして表示する商品は自由に選べます。

ノーコードで様々な要素をカスタマイズできます。

1 クリックでテーマに追加できます。

以下のShopify公式のアプリストアからインストールできます。
https://apps.shopify.com/sa-072-cart-add-popup?locale=ja

最後に

今回は、Shopify でカート追加時のポップアップクロスセルを実装する方法について、コーディング例とアプリ利用の二つのアプローチを紹介しました。自前で実装すればデザインや表示ロジックを自由に組める反面、メンテナンスの手間や技術的なハードルがあります。一方でアプリを使えばノーコードで手軽に導入でき、手厚いサポートも期待できます。

自分のストアの状況や予算、開発リソースなどを考慮して、最適な方法を選んでいただければ幸いです。

参考記事

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

Discussion