今日からできる：カート画面クロスセルの実践手順

このプレイブックでやること（結論）

カート画面のクロスセルは、やり方を間違えるとカゴ落ちを増やしますが、設計すれば「買い物体験が丁寧なお店」に変わります。

• カート画面のどこにクロスセルを置くか：ボタン上か下か、サイドバーか
• どのタイミングで出すか：初回訪問時・数量変更後・一定金額以上など
• どの価格帯を出すか：元のカート金額に対してどのくらいの価格までに絞るか
• 押し売りにならない文言：NG例とOK例の型

ここでは、上記を「今日30分あれば試せる」レベルまで手順化します。最後に RecoBoost での具体的な設定の一歩も紹介します。

前提：カートクロスセルで守る3つのルール

• カートの主役は「決済ボタン」である：クロスセルは脇役なので、カートに進む / 購入する ボタンより目立たせない
• 原則は「買い忘れ防止」で見せる：利益よりも「お客様にとってあった方がいい物」の文脈で選ぶ
• 平均注文単価に合わせて欲張りすぎない：カート金額の20〜40%増し程度を1つ足すイメージに留める

この前提を踏まえたうえで、配置・タイミング・価格帯・文言を決めていきます。

手順：カート画面にクロスセルを出す5ステップ

• 1. Shopify管理画面で現在のカートUIを確認する
  - Shopify管理画面 → オンラインストア → テーマ を開き、公開テーマの カスタマイズ をクリックします。
  - プレビュー画面で カートページ を表示し、
  - 決済ボタンの位置
  - 注文サマリー（小計・送料など）の位置
  - 余白スペース（PC・スマホ両方）
  をスクリーンショットかメモで押さえます。
• 2. クロスセルを置く候補位置を決める
  候補は主に3つです：
  - 決済ボタンのすぐ下：もっとも一般的。ボタンの邪魔をしにくく、視線も集まりやすい
  - カート一覧の下・合計金額の上：アイテム確認後に「ついで買い」を提案できる
  - サイドカート（ドロワー）内の下部：サイドカートを使っているテーマ向け。フッター手前に1〜2件だけ表示
  
  初回テストでは、決済ボタンのすぐ下 をおすすめします。視認されやすく、押し売り感も出にくい位置です。
• 3. 表示タイミングの条件を決める
  クロスセルは「いつも出す」ではなく、条件を決めた方がカゴ落ちを防ぎやすくなります。
  おすすめは次の組み合わせです：
  - カート金額が一定以上のときだけ表示
  - 例：平均注文額が6,000円なら、カート小計が3,000円以上 で表示
  - 単品低価格のときは「買い切り感」が強く、追加提案がノイズになりやすいため
  - 同じセッションで初回だけポップアップ風に強調
  - 2回目以降は静かにリスト表示にする
  - 在庫が一定数以上の商品のみ を出す
  - 売り切れやすい商品は候補から外し、体験を安定させる
  
  アプリ側で条件設定ができる場合は、まず カート金額の下限 から導入し、その後 A/B テストで微調整します。
• 4. 価格帯フィルタの考え方を決める
  押し売りにならないクロスセルにするために、「いくらまでの商品を出すか」を先にルール化します。
  目安は：
  - カート合計の30〜60％以内の価格 の商品に絞る
  - カート5,000円 → 1,500〜3,000円程度
  - カート10,000円 → 3,000〜6,000円程度
  - 単価の高い商材（家電・高級品など）の場合は 10〜30％ に抑える
  
  さらに：
  - 元の商品カテゴリと関係が深いもの を優先
  - スキンケア → 同ブランドのクレンジングやミスト
  - 洋服 → 同系色の小物やケア用品（ハンガー・ブラシなど）
  - 送料無料ラインがある場合
  - 例：送料無料が5,000円〜なら、「あと○○円で送料無料です」と組み合わせて、その範囲内の商品だけを出す
  
  アプリのフィルタ機能では、価格レンジ と コレクション（カテゴリ） を両方指定するのが実務的です。
• 5. 押し売りにならない文言を設定する
  カートクロスセルのタイトル・補足文を次の型で決めます。
  
  【避けたいNGパターン】
  - 「今買わないと損です！」「こちらも絶対おすすめ」「せっかくなのでまとめ買いしませんか？」
  - 強い断定・命令・恐怖訴求はカゴ落ち要因になります。
  
  【使いやすいOKパターン】
  - 「一緒によく選ばれている商品」
  - 「買い忘れが多いアイテム」
  - 「○○と相性の良いおすすめ」
  - 「お手入れに便利なアイテム」
  
  【補足テキストのテンプレ】
  - 「必要な方だけ、カートに追加してください。」
  - 「あと少しで送料無料の方に選ばれています。」
  - 「初めての方に人気の組み合わせです。」
  
  まずはタイトルを 「一緒によく選ばれている商品」、補足を 「必要な方だけ、カートに追加してください。」 にして、クリック率とカゴ落ち率を1〜2週間観察するのがおすすめです。

配置のコツ：PCとスマホで分けて考える

• PC：横幅を使って最大3商品まで
  - カート商品一覧の下・決済ボタンの上か下 に1行3列で出す
  - 各カードは サムネイル小さめ＋商品名1行＋価格＋カートに追加ボタン に絞り、説明文は入れない
  - 色や装飾はメインボタンより控えめ（グレー系）にすることで、主軸を決済に置く
• スマホ：縦スクロールに溶け込ませる
  - 決済ボタン直下に1〜2件だけ 表示し、「もっと見る」があっても3件まで
  - 各カードは サムネイル＋商品名＋価格＋ミニボタン に限定し、テキスト量を削る
  - 折りたたみ（アコーディオン）形式にして「おすすめを見る」をタップした人だけ展開する方法も有効
• 共通：ボタンラベルとデザインの一貫性
  - カート追加ボタンは 「カートに追加」 で統一（「今すぐ購入」は使わない）
  - 通常の商品一覧ページのボタンと、色・文言を揃える
  - 割引やバッジ（SALE、人気など）は最小限に抑え、「静かな提案」にする

よくある失敗と、その避け方

• 失敗1：ポップアップで毎回クロスセルを出してしまう
  - カート遷移のたびに全画面ポップアップを出すと、スマホで特に離脱が増えます。
  - 対策：ポップアップは 初回セッションのみ、または 退出意図（戻る操作など）のときだけ に限定し、通常はカート内の静的ブロックで見せる。
• 失敗2：高額アップセルを出しすぎてカートがリセットされる
  - 例：5,000円のカートに、2万円の上位モデルを強くすすめると、「やっぱりやめよう」が増えます。
  - 対策：クロスセルでは 「追加」前提の商品だけ にし、上位モデルへの乗り換えは商品ページかポップアップで扱う。価格帯はカート合計の30〜60％以内を目安に。
• 失敗3：在庫切れ・バリエーション切れ商品が混ざる
  - サイズ欠け、色欠けが多い商品を出すと、カートから商品ページに飛ばされて離脱しやすくなります。
  - 対策：アプリ側のフィルタで 在庫数○個以上 の商品だけを対象にする。バリエーションごとの在庫を参照できない場合は、欠けの多い商品をタグなどで除外する。
• 失敗4：メイン導線よりクロスセルが目立つデザイン
  - クロスセルのカードが大きく、色も強いと「まだ買わせようとしている」印象になります。
  - 対策：
  - サムネイルサイズとボタン色を、メインの 購入ボタン より控えめにする
  - 枠線や背景色は薄めのグレーで、「お知らせ」のようなトーンに抑える。

RecoBoostでの次の一歩

RecoBoost をお使いの場合、上記の方針をそのまま設定に落とし込めます。

• Shopify管理画面 → アプリ → RecoBoost → レイアウト設定 を開き、表示位置で カート画面・決済ボタン直下 を選びます。
• RecoBoost → レコメンド設定 を開き、ロジックで AI類似商品 や 一緒に買われる商品 を選んだうえで、価格フィルタ で「カート合計の30〜60％」相当のレンジを指定します。
• RecoBoost → 文言設定 で、タイトルに 「一緒によく選ばれている商品」、説明に 「必要な方だけ、カートに追加してください。」 を設定します。
• 1〜2週間ごとに RecoBoost → レポート で「カートクロスセル経由の追加売上」「カゴ落ち率の変化」を見ながら、
  - 表示位置（ボタン上／下）
  - 価格レンジ
  - 文言
  を1つずつテストしていくのがおすすめです。