実践
Shopify カートにアップセルを置く手順（テーマアプリ拡張の基本セット）
Shopify カートにアップセルを表示するための、テーマアプリ拡張を使った実装手順です。アプリ選び → テーマ側のブロック追加 → 表示チェック → 効果測定まで、今日から試せるようにチェックリスト形式でまとめています。
結論：カートのアップセルは「アプリ選定」と「テーマ側の配置」が9割です
Shopify のカートにアップセルを置くとき、今は テーマアプリ拡張 に対応したアプリを使うのがもっともシンプルです。
ポイントはこの2つだけです。
- テーマアプリ拡張に対応したアップセルアプリを選ぶ
- オンラインストア の テーマエディター で、カートにそのアプリブロックを追加する
あとは、表示条件とデザインを最低限整えれば、今日からアップセルを走らせられます。このプレイブックでは、その手順をチェックリスト形式で整理します。
前提確認：あなたのストアで今すぐできるかチェック
- Shopify 管理画面のプランを確認する：設定 → プラン で現在のプランを確認します（テーマアプリ拡張は、通常のオンラインストア機能が使えるプランなら利用可能です）。
- テーマが Online Store 2.0 か確認する：オンラインストア → テーマ → …（アクション） → コードを編集する を開き、レイアウトに theme.liquid があり、テンプレートに json テンプレート（product.json など） があるか確認します。あれば Online Store 2.0 ベースです。
- カートの表示形式を把握する：
- オンラインストア → テーマ → 公開テーマの カスタマイズ を開く
- プレビュー画面で商品をカートに入れてみて、「スライド式ドロワーカート」か「カートページ」かを確認します（どちらにアップセルを出すか、後で指定します）。 - テーマアプリ拡張対応アプリを使う前提にする：これから導入するアップセルアプリ、または利用中のアプリが「Theme App Extension（テーマアプリ拡張）」対応かどうか、アプリの説明やマニュアルで確認します。
手順：テーマアプリ拡張でカートにアップセルを置く
- アップセルアプリをインストールする：Shopify アプリストア で「upsell」「cross sell」などで検索し、説明に「Theme App Extension」や「テーマアプリ拡張に対応」と明記されているアプリを選び、アプリを追加する → 権限を確認し アプリをインストールする をクリックします。
- アプリ内で基本ルールを作る：インストールしたアプリを開き、
- 「カートアップセル」「カートおすすめ」などのメニューから
- 「ルールを追加」「キャンペーン作成」などのボタンで
まずは 1 パターンだけ作成します（例：条件は「カート内に何か入っているとき」、おすすめ商品は人気商品 1〜3 点）。 - テーマエディターを開く：Shopify 管理画面で オンラインストア → テーマ → 公開テーマの カスタマイズ をクリックします。
- カートのテンプレートに移動する：
- ドロワーカートの場合：テーマエディター右上のページ切り替えから カート → ドロワー など、カートに相当するテンプレートを選びます。
- カートページの場合：同じくページ切り替えから カート または cart テンプレートを選びます。 - アプリブロックを追加する：テーマエディター左側のセクション一覧で、カートに関するセクション（例：カート、Cart drawer など）を選び、
- ブロックを追加 をクリック
- 一覧からアップセルアプリ名が付いたブロック（例：RecoBoost - Cart Upsell のような表記）を選びます。 - ブロックの配置位置を調整する：追加したアプリブロックをドラッグして、
- 「カート内の商品一覧のすぐ下」
- または「小計のすぐ上」
になるように並び替えます。どちらも見られやすい位置なので、まずはこのどちらかに置きます。 - ブロック設定で表示条件を確認する：選んだアプリブロックをクリックし、
- 表示するレコメンドの種類（例：関連商品、よく一緒に購入される商品 など）
- 最大表示数（例：3件 など）
- スマホでのレイアウト（横スクロールか、縦並びか）
などの項目を確認・調整します。難しければデフォルトのままで構いません。 - テーマを保存して動作確認する：テーマエディター右上の 保存 をクリックしたあと、
- ストアフロントで実際に商品をカートに追加
- カートを開き、アップセルが表示されるか・デザインが崩れていないかをチェックします。 - テスト注文で最終チェックをする：
- ストアでテスト用に安価な商品を用意
- アップセルが出た商品も一緒にカートに入れ、チェックアウトまで進み
- 注文管理画面（注文管理）で、アップセル商品も正しく反映されているか確認します。
配置と設計のコツ：この3点だけ押さえる
- 位置は「商品一覧の下」か「小計の上」に絞る：上すぎると見落とされ、下すぎるとスクロールされません。まずはどちらか 1 つを選び、2 週間ほど固定してデータを見ます。
- 表示数は 2〜3 個までに抑える：候補が多いほど迷われます。テーマエディターのアプリブロック設定、またはアプリ側の設定で「表示数」を 2〜3 件 にしておくと、カートがすっきりします。
- テキストは「おすすめ理由」が伝わる一言にする：
- 見出し例：「一緒に買われている商品」「カートと相性の良いアイテム」
- ボタン文言例：「カートに追加」「今すぐ追加」
テーマエディター内で見出しテキストを変更できる場合は、上記のような分かりやすい文言にしておきます。
公開前チェックリスト：よくある失敗を防ぐ
- スマホ表示で潰れていないか：テーマエディター右上のデバイス切り替えから モバイル を選び、
- 画像が極端に小さくなっていないか
- ボタンが複数行に折れ曲がっていないか
を確認します。崩れていれば、アプリブロックのレイアウト設定で「縦並び」を試します。 - カートが空のときに不自然になっていないか：カートが空の状態でもアップセルが出る設定だと、「何も入っていないのにおすすめだけ出ている」状態になりがちです。アプリ側で「カートに商品があるときだけ表示」などの条件があれば有効にします。
- 割引やバンドルと競合していないか：自動割引や他のバンドルアプリを使っている場合、
- アップセル商品を追加したときに、合計金額や割引額が期待どおりか
- 同じ商品が二重に割引されていないか
をテスト注文で確認します。 - 在庫切れ商品が出ていないか：アップセル候補に在庫切れ商品が含まれると、ユーザー体験が悪化します。アプリ側の「在庫がある商品のみ表示」といったフィルター設定があれば必ず有効にします。
- 計測タグとの干渉がないか：Google アナリティクスや Meta ピクセルで「カート追加イベント」を見ている場合、
- アップセルで追加した商品も add_to_cart に記録されているか
を確認します。イベント名が変わるアプリもあるため、1 度はレポートをチェックします。
次の一歩：RecoBoost でカートアップセルを自動化する
RecoBoost は、Shopify 向けの AI レコメンドアプリです。テーマアプリ拡張に対応しているため、上記の手順とほぼ同じ流れでカートアップセルを配置できます。
今日できる始め方は次のとおりです。
1. アプリ → Shopify アプリストア から RecoBoost をインストール
2. RecoBoost を開き、レコメンド設定 でロジックに AI類似商品 や よく一緒に購入される商品 を選ぶ
3. オンラインストア → テーマ → カスタマイズ を開き、カートのテンプレートに RecoBoost - Cart Upsell ブロックを追加
4. スマホ表示でレイアウトを確認し、テスト注文で動作をチェック
まずは人気商品のカートアップセルから始めて、慣れてきたら商品別・カテゴリ別にロジックを細かく分けていくと、売上影響を追いやすくなります。