Shopifyのカート画面でクロスセルを効かせる設計入門

Shopifyのカート画面でクロスセルを出しても、ほとんどクリックされないことは珍しくありません。原因の多くは「とりあえず人気商品を並べただけ」で、配置やロジックの設計がされていないことです。カートは購入直前の重要な画面なので、やり方を間違えると客単価アップどころか離脱を増やしてしまいます。この記事では、Shopifyのカート画面でクロスセルを効かせるための基本設計（配置・ロジック・文言）を、現場でそのまま使えるレベルに分解して整理します。結論としては「カートの目的はあくまで決済に進んでもらうこと」と割り切り、そのうえで邪魔にならない範囲で関連度の高い商品を1〜3点だけ提案する設計が効果的です。最後にAIレコメンドアプリであるRecoBoostを使う場合の考え方も簡単に触れます。

Shopifyでカート画面にクロスセルを出す基本パターン

まず、Shopifyのカート画面にクロスセルを表示する典型的なパターンを整理します。大きく分けて「カートページ型」と「ドロワーカート（スライドアウト）型」があり、どちらのUIを使うかでクロスセルの置き方も変わります。テーマによっては両方を併用しているケースもあります。Shopifyテーマでは、セクションやアプリブロックを使ってカートの下部やサイドに商品一覧を差し込む形が一般的です。

よく使われる配置パターンは次の3つです。1つ目は「カート商品リストの直下に4商品グリッドを表示する」パターン。2つ目は「ドロワーカートの右または下部に横スクロールで数商品を並べる」パターン。3つ目は「カート内商品のすぐ下に、セット提案として1〜2商品だけ縦に並べる」パターンです。どれが正解というよりも、画面の高さと注文ボタンの位置とのバランスで決める必要があります。カートの最初のビューで「合計金額」と「チェックアウトボタン」が隠れてしまうようなクロスセル配置は避けるべきです。

クロスセルの表示数も重要です。10商品以上をずらっと並べると、「どれを選べばいいかわからない」という選択肢過多で逆に反応が落ちてしまいます。多くのストアでは、カート画面でのクロスセルは2〜4商品に絞ったほうがクリック率・追加率ともに安定しやすいです。特にモバイル比率が高いストアでは、横スクロール前提で最大3商品程度までに抑える設計を検討してください。

カート クロスセルの配置で守るべき3つのルール

カート画面は「購入確認」と「安心感の提供」が本来の役割です。クロスセルが強すぎると、ユーザーは「押し売りされている」と感じて離脱しやすくなります。そこでまず押さえたいのが、次の3つの配置ルールです。1つ目は「チェックアウトボタンを最優先で見せる」こと。2つ目は「クロスセルは1画面に収まる範囲に抑える」こと。3つ目は「カート内容と同じ方向の視線の流れに置く」ことです。

1画面目のファーストビューにクロスセルを詰め込み、チェックアウトボタンが画面の外に押し出されている事例は少なくありません。この場合、一時的に客単価が伸びても、全体の購入完了率が落ちて売上がトータルでマイナスになることがあります。例えば、客単価が5％上がっても、コンバージョン率が10％下がれば売上は減ります。カートのABテストを行うときは、必ず「客単価」と「購入完了率」の両方をセットで見る必要があります。

視線の流れについては、カートの商品一覧→合計金額→チェックアウトボタンという縦の流れを邪魔しない位置にクロスセルを置くのが基本です。具体的には、合計金額とチェックアウトボタンを1ブロックとしてまとめ、その直下にクロスセルを置くレイアウトが扱いやすいです。ドロワーカートの場合は、チェックアウトボタンのすぐ下に横スクロールのレコメンドを出し、「あと1点いかがですか？」と軽く促す程度に留めると違和感が出にくくなります。

カート レコメンドのロジック設計：何を出すかを決める

配置の次に重要なのが「何を出すか」というレコメンドロジックです。Shopifyは公式として、product recommendations APIやテーマの推奨商品機能（related products）を提供しています。これは、「一緒によく購入されている商品」や「閲覧履歴に基づくおすすめ」などを返す仕組みで、テーマやアプリから利用できます。ただし、そのまま使うと「カート内の商品と関係の薄い人気商品」が出てしまうこともあるため、ロジックをどう組み合わせるかが重要です。

カートクロスセルでよく使われるロジックは、大きく次の3タイプです。1つ目は「カート内商品の関連商品（アクセサリー・消耗品）」を出すパターン。2つ目は「カート合計金額に応じた閾値アップセル」（送料無料まであと◯円など）です。3つ目は「同カテゴリー内の価格帯が近い商品」を出すパターンです。特に1つ目の関連商品は、ユーザーにとっても「そういえば必要だった」と気づきやすく、押しつけ感が出にくい設計です。

失敗しやすいのは「とりあえず売れ筋ランキングを出す」ケースです。カートの中身がスキンケア商品なのに、ランキング上位の家電が出てくると、関連性が低くて無視されます。クリック率が1％を切るようなら、関連度の再検討が必要です。小規模ストアでデータが十分でない場合は、まず「商品Aがカートに入っていたら商品Bを出す」という簡易ルールでも構いません。セット販売でよく購入される組み合わせや、スタッフの肌感覚で「一緒に提案しやすいペア」を3〜10パターンだけ先に決めておくだけでも、ランダム表示より成果が出やすくなります。

クロスセルの文言とUI：買い物を邪魔しない伝え方

同じ商品でも、文言やUIの見せ方によって反応は大きく変わります。カート画面ではユーザーが「購入内容の最終確認モード」に入っているため、強い販促コピーよりも「確認を助けるトーン」が合いやすいです。「おすすめ」「セール」よりも、「一緒に買われることが多い商品」「この商品のケアに必要なアイテム」といった説明的な表現のほうが受け入れられやすくなります。

UI面では、クロスセルのカードに「商品名・価格・サムネイル」に加えて、可能であれば「バリエーション選択」と「カートに追加ボタン」を含めると追加率が上がりやすいです。逆に、商品ページに遷移しないとカートに入れられない設計だと、タップ数が増えすぎて途中離脱の原因になります。ただし、バリエーション数が多い商品をカートで選ばせると迷いを生むので、そうした商品はクロスセル対象から外し、「サイズ1種類・色2〜3種類」のようなシンプルな商品に絞ると扱いやすくなります。

バナーやポップアップでのクロスセルも検討されがちですが、カート画面上で全画面に近いポップアップを出すと、購入完了率が落ちることがあります。特にモバイルでは閉じるボタンが押しづらく、ストレス要因になりがちです。カートでのクロスセルは「常設の小さな枠で淡々と提案する」くらいがちょうどよく、強調したいキャンペーンがある場合でも、カート上部の細いバナーやテキストで補足する程度から試すと安全です。

事例から学ぶ：うまくいくクロスセル・失敗するクロスセル

うまくいくクロスセルの典型例として、コスメストアの「クレンジング＋コットン＋トライアルパック」の組み合わせがあります。ユーザーがクレンジングをカートに入れると、カート画面の下部に「一緒に購入されることが多い商品」としてコットンとトライアルパックが2商品だけ表示されるパターンです。この場合、関連性が高く、単価も比較的手頃なため、カート追加率が10〜20％台に乗ることもあります。セット購入が前提になりやすい商材ほど、こうした「足りない1点」を補完するクロスセルが有効です。

一方で、失敗しやすいパターンとして「セール商品を詰め込んだカート下部の大型レコメンド枠」があります。割引率を前面に出して10商品以上を並べると、ユーザーは「本当に必要なもの以上に買わされそう」と感じ、購入を一度やめて考え直すきっかけになってしまいます。また、在庫処分目的のセール品は既存のカート内容と関連性が低いことも多く、クリック率も低迷しがちです。セール品をクロスセルに混ぜる場合は、カート内商品とカテゴリーや用途が近いものに絞ると、違和感が少なくなります。

もう1つの失敗例は、「送料無料閾値アップセル」が過剰に複雑なケースです。例えば「あと◯円で送料無料」「このカテゴリの商品ならあと1点で◯％OFF」など条件が複数重なると、ユーザーは計算しきれず、結局何をどれだけ買えば得なのかわからなくなります。送料無料閾値を使う場合は、「あと◯円で送料無料」「おすすめの追加1商品」程度に情報を絞り、クロスセル枠でもその条件に合う商品だけを1〜3点表示するほうが、理解されやすく行動にもつながりやすいです。

RecoBoostならこう活かす：AIにロジックを任せて設計に集中する

RecoBoostのようなAIレコメンドアプリを使う場合は、「どのデータを使って何を最優先に出すか」を決めておくと運用が安定します。例えば、カート画面では「一緒に購入されやすい商品」をベースにしつつ、在庫状況や利益率、カート内商品のカテゴリーなどを加味したロジックを設定できます。ストア側は、この記事で説明した「配置」「表示数」「文言」「対象から外す商品（バリエーションが多い商品など）」といった設計に集中し、どの具体的な商品を出すかはRecoBoostに任せるイメージです。これにより、商品ラインナップや売れ筋の変化があっても、毎回手動でクロスセル設定をやり直す負担を減らしつつ、常に関連度の高い提案をカート画面で維持しやすくなります。

カート画面のクロスセルは、客単価アップの強力な手段であると同時に、購入完了率を落とすリスクも持っています。まずは「チェックアウトを邪魔しない配置」「関連度の高い少数商品」「わかりやすい文言」という3点を優先し、小さく始めて数値を見ながら調整していくのがおすすめです。AIレコメンドの力を借りる場合も、この基本設計を守ることで、カートレコメンドが長期的に機能する土台をつくれます。