Shopify のサンクスページに商品を表示してクロスセル・アップセルする方法を徹底解説

目次

• はじめに
• 記事の構成
• Shopify でサンクスページに商品を表示できる？
• サンクスページに商品を表示するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集とアプリ導入の比較
  • テーマのコード編集で実装する方法
  • アプリを導入する方法
  • 結論：最初はアプリで小さく試すのがおすすめ
• おすすめ Shopify アプリ「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」紹介
  • アプリの基本情報
  • できること
• アプリのインストール手順
  • ステップ 1: Shopify 管理画面の「設定」を開く
  • ステップ 2: 「アプリ」から Shopify App Store へ移動
  • ステップ 3: アプリを検索
  • ステップ 4: アプリをインストール
  • ステップ 5: 権限を確認してインストールを完了
• アプリをテーマに追加（有効化）
  • ステップ 1: テーマをプレビュー
  • ステップ 2: 「アプリ」設定を開く
  • ステップ 3: ブロックを追加する
  • ステップ 4: 追加先を選択する
  • ステップ 5: 追加されたことを確認する
  • ステップ 6: ブロックの位置を調整する
  • ステップ 7: 保存する
• アプリの設定項目を理解する
  • クロスセル商品設定
  • アプリの有効化・無効化
  • セクションタイトル
  • 購入済み商品の除外
  • 表示商品数の上限
  • カートへの追加後の動作
  • 表示レイアウト
  • 並び順
  • ボタンテキストのカスタマイズ
• すぐ使えるおすすめ設定例
  • ユースケース 1: 初めてクロスセルを導入するストア
  • ユースケース 2: アパレル・ファッションストア
  • ユースケース 3: 食品・消耗品ストア
  • ユースケース 4: 期間限定キャンペーン
  • 文言のテンプレ例
• 関連施策との組み合わせ
  • サンクスページ クロスセル × メール施策
  • サンクスページ × SNS 誘導
  • アップセル × リピーター施策
  • クロスセル × レビュー施策
• テーマのコード編集で実装する場合のサンプルコード
  • 実装の流れ
  • Checkout UI Extension の作成
  • 設定ファイル（shopify.extension.toml）
  • React コンポーネント（ThankYouCrossSell.tsx）
  • CSS でスタイルを調整する
  • JavaScript で動的な商品取得を行う
  • コード実装の注意点
• 運用のコツ
• よくある質問
• まとめ
• 参考記事

はじめに

Shopify でネットショップを運営していると、「もっと客単価を上げたい」「せっかく購入してくれたお客様にリピートしてもらいたい」と感じる場面は多いのではないでしょうか。

実は、購入直後のサンクスページ（注文完了画面）は、お客様の購買意欲がもっとも高まっているタイミングのひとつです。このページに関連商品やおすすめ商品を表示する「クロスセル」や「アップセル」の施策を取り入れることで、追加購入を自然に促し、売上アップにつなげることができます。

しかし、Shopify のサンクスページ カスタマイズは標準機能だけでは限界があり、「どうやって商品を表示すればいいのか分からない」「コードを書くのは不安」という方も少なくありません。

この記事では、Shopify サンクスページ 商品表示の方法を、アプリ導入とコード実装の両面から徹底的に解説します。初心者でもすぐに始められるアプリの設定手順から、開発者向けのサンプルコードまで、幅広くカバーしています。

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

• Shopify のサンクスページに商品を表示してクロスセルできるアプリ 5 選！購入後のアップセルで売上アップする方法を解説！
• Shopify のサンクスページにクロスセル商品を表示できるアプリ 6 選を紹介！
• 【2026】Shopify のサンクスページにおすすめ商品を表示できるアプリ 17 選！
• シンプル購入後アップセル｜お手軽サンクスページでクロスセル ご利用ガイド

記事の構成

この記事は以下の流れで解説します。

• Shopify のサンクスページに商品を表示できるかどうかの確認
• サンクスページに商品を表示するメリット・デメリット
• テーマのコード編集とアプリ導入、2 つの方法の比較
• おすすめアプリ「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」の紹介
• アプリのインストールからテーマ追加、設定項目の詳細解説
• すぐ使えるおすすめ設定例と文言テンプレート
• 関連施策との組み合わせ方
• テーマのコード編集で実装する場合のサンプルコード
• 運用のコツとよくある質問

Shopify でサンクスページに商品を表示できる？

結論から言うと、Shopify のサンクスページに商品を表示することは可能です。

Shopify サンクスページ 商品表示を実現するには、大きく分けて以下の 2 つの方法があります。

1. テーマのコード編集で実装する方法 — Shopify のチェックアウト拡張機能（Checkout UI Extensions）を使い、自分でコードを書いてサンクスページに商品を表示します。自由度は高いですが、開発の知識が必要です。
2. アプリを導入して実装する方法 — Shopify App Store から専用のアプリをインストールし、管理画面から設定するだけでサンクスページに商品を表示できます。コーディング不要で、すぐに始められます。

どちらの方法にもメリット・デメリットがありますので、この記事ではそれぞれを詳しく比較していきます。

サンクスページに商品を表示するメリット・デメリット

メリット

購入直後の高い購買意欲を活かせる

お客様が注文を完了した直後は、「買い物をした」という満足感と同時に、関連商品への興味が高まるタイミングです。Shopify サンクスページ クロスセルを導入することで、この心理的なタイミングを逃さずに追加購入を促すことができます。

• 購入完了の安心感から、もう 1 点追加する心理的ハードルが下がる
• 「ついで買い」を自然に促進できる
• カート放棄のリスクがない（すでに購入が完了しているため）

客単価の向上に直結する

Shopify サンクスページ アップセルは、1 回の購入あたりの平均注文額を引き上げる効果的な施策です。サンクスページでおすすめ商品を表示することで、追加購入の機会を作り出し、客単価を自然に向上させることができます。

• 新規顧客獲得コストをかけずに売上を増やせる
• 関連商品のセット購入を促進できる
• 季節商品やキャンペーン商品の露出を増やせる

お客様の満足度向上につながる

購入した商品に関連する便利なアイテムや、お得なセット商品を提案することは、お客様にとっても有益な情報提供です。適切なクロスセルは押し売りではなく、「こんな商品もあったんだ」という発見の体験になります。

• 購入商品と相性の良いアクセサリーや消耗品を提案できる
• 送料無料ラインまであと少しの場合の追加購入を促せる
• お客様が見逃していた商品を発見する機会を提供できる

導入コストが低い

Shopify サンクスページ カスタマイズは、他のマーケティング施策と比較して導入コストが低い点も大きなメリットです。広告費をかけることなく、既存の購入フローの中に自然に組み込むことができます。

• 広告出稿のような追加コストが不要
• 一度設定すれば自動で稼働し続ける
• A/B テストで効果検証がしやすい

ストアのブランド力を高められる

サンクスページに商品を表示することで、購入後の体験をより充実させ、ストア全体のブランドイメージを向上させることができます。

• 購入後もストアに滞在してもらう時間が増える
• 「品揃えが豊富なストア」という印象を与えられる
• リピート購入のきっかけを作れる

デメリット

設定を誤ると逆効果になる可能性がある

表示する商品の選定やタイミングを誤ると、お客様に「押し売り」と感じさせてしまうリスクがあります。

• 購入した商品とまったく関係のない商品を表示すると不自然
• 表示商品数が多すぎると、画面が煩雑になり購入体験を損なう
• 高額商品ばかりを表示すると、アップセルが露骨に映る場合がある

効果測定に工夫が必要

サンクスページからの追加購入がどの程度あるかを正確に測定するには、アナリティクスの設定やアプリの機能を活用する必要があります。

• 通常の購入とサンクスページ経由の購入を区別する仕組みが必要
• 短期的には効果が見えにくい場合がある
• 定期的な商品ラインナップの見直しが必要

テーマやアプリとの互換性に注意が必要

使用しているテーマやほかにインストールしているアプリによっては、サンクスページのカスタマイズが競合する場合があります。

• 一部のテーマではサンクスページのカスタマイズに制限がある
• 複数のアプリが同じ領域に表示を行うとレイアウトが崩れることがある

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

• 完全に自由なデザインと機能を実装できる
• ランニングコスト（月額費用）がかからない
• 他のアプリとの競合を気にする必要がない

デメリット

• HTML・CSS・JavaScript（または Checkout UI Extensions）の開発知識が必要
• テーマのアップデート時にコードが上書きされるリスクがある
• バグが発生した場合、自分で修正する必要がある
• 実装に時間がかかる

アプリを導入する方法

メリット

• コーディング不要で、管理画面から簡単に設定できる
• アプリ開発者によるサポートやアップデートを受けられる
• 短時間で導入できるため、すぐに効果を検証できる
• テーマのアップデートに影響されにくい

デメリット

• 月額料金が発生する（ただし売上増で十分回収可能）
• アプリが提供する機能の範囲内でのカスタマイズに限られる
• アプリの提供が終了した場合、別の方法を検討する必要がある

結論：最初はアプリで小さく試すのがおすすめ

Shopify サンクスページ 商品表示を始めるなら、まずはアプリを導入して小さく試すことを強くおすすめします。

理由はシンプルです。アプリなら数分で設定が完了し、すぐに効果を検証できるからです。無料トライアル期間が設けられているアプリも多く、リスクなくクロスセル施策を始められます。

効果が確認できて、より高度なカスタマイズが必要になった段階で、コード実装に移行するという段階的なアプローチが、もっとも効率的です。

おすすめ Shopify アプリ「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」紹介

Shopify のサンクスページにクロスセル商品を表示するアプリとして、「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」をご紹介します。

アプリの基本情報

• アプリ名: シンプル購入後アップセル｜お手軽サンクスページでクロスセル
• 料金: Basic Plan $9.99/月
• 無料期間: 1 週間の無料トライアルあり
• 年払い: 年払いで実質 2 ヶ月無料
• アプリストア: Shopify App Store
• ご利用ガイド: ご利用ガイドページ

できること

購入後のサンクスページにクロスセル商品を表示できる

お客様が購入手続きを完了した直後のサンクスページに、おすすめ商品を表示できます。購入意欲が高いタイミングで関連商品を提案することで、追加購入のきっかけを自然に作ることができます。

サンクスページで表示する商品は自由に設定できる

管理画面の「クロスセル商品設定」から、サンクスページに表示したい商品を自由に選択できます。季節やキャンペーンに合わせておすすめ商品を入れ替えることも簡単です。

レイアウトや並び順、表示数をカスタマイズできる

リスト表示・グリッド表示の 2 種類のレイアウトに対応しています。並び順は「任意の並び順」と「毎回ランダム表示」から選べ、表示する商品数の上限も設定できます。ストアの雰囲気や商品数に合わせて柔軟にカスタマイズできます。

サンクスページで直接カートに追加・今すぐ購入できる

おすすめ商品は、サンクスページから直接「カートに追加」または「今すぐ購入」ボタンで購入に進むことができます。バリアントや数量の選択にも対応しており、お客様がスムーズに追加購入できる導線を提供します。

初期設定ガイド付きで簡単導入

アプリ内に初期設定ガイドが用意されています。ステップバイステップの手順に従うだけで、コーディング不要でサンクスページへのクロスセル表示を簡単に始められます。

アプリのインストール手順

「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」のインストールは、以下の 5 ステップで完了します。

ステップ 1: Shopify 管理画面の「設定」を開く

Shopify 管理画面にログインし、左下の「設定」ボタンをクリックします。

ステップ 2: 「アプリ」から Shopify App Store へ移動

設定画面から「アプリと販売チャネル」を選択し、「Shopify App Store」のリンクをクリックします。

ステップ 3: アプリを検索

Shopify App Store の検索バーに「シンプル購入後アップセル」と入力して検索します。

ステップ 4: アプリをインストール

アプリの詳細ページで「インストール」ボタンをクリックします。

ステップ 5: 権限を確認してインストールを完了

アプリが必要とする権限を確認し、「インストール」ボタンをクリックしてインストールを完了します。

アプリをテーマに追加（有効化）

アプリをインストールしたら、次にテーマのカスタマイズ画面でアプリブロックを追加します。この初期設定を行うことで、サンクスページにクロスセル商品が表示されるようになります。

ステップ 1: テーマをプレビュー

アプリのダッシュボードから「初期設定ガイドへ」をクリックし、「テーマをプレビュー」ボタンをクリックします。

ステップ 2: 「アプリ」設定を開く

テーマカスタマイズ画面が開いたら、左側のサイドバーにある「アプリ」アイコンをクリックします。

ステップ 3: ブロックを追加する

「UR: Smart Post Purchase Upsell」の右側にある「+アイコン」をクリックしてブロックを追加します。

ステップ 4: 追加先を選択する

追加先の選択肢から「サンキュー」をクリックします。これにより、サンクスページにアプリブロックが追加されます。

ステップ 5: 追加されたことを確認する

左側のサイドバーから「セクション」アイコンをクリックして、ブロックが正しく追加されていることを確認します。

ステップ 6: ブロックの位置を調整する

ドラッグ＆ドロップでブロックの位置を調整します。サンクスページ内のどこにクロスセル商品を表示するかを決めましょう。

ステップ 7: 保存する

設定が完了したら、右上の「保存」ボタンをクリックして変更を保存します。

アプリの設定項目を理解する

「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」には、さまざまな設定項目が用意されています。ここでは各設定項目を詳しく解説します。

クロスセル商品設定

クロスセル商品設定では、サンクスページに表示する商品を選択・管理できます。

ダッシュボードからクロスセル商品設定ページを開く

アプリのダッシュボードから「クロスセル商品設定」ページに移動します。ここで表示したい商品の追加・削除・並べ替えが行えます。

商品を選択する

「商品を追加」ボタンをクリックすると、Shopify の商品選択画面（リソースピッカー）が表示されます。表示したい商品を検索して選択しましょう。

設定を保存する

商品の選択が完了したら、「保存する」ボタンをクリックして設定を保存します。

アプリの有効化・無効化

アプリのオン・オフを切り替えることができます。有効にするとサンクスページにクロスセル商品が表示され、無効にすると表示が停止されます。

キャンペーン期間だけ表示をオンにしたい場合や、メンテナンス時に一時的にオフにしたい場合に便利です。

セクションタイトル

サンクスページに表示されるクロスセル商品セクションの見出しテキストを自由に変更できます。デフォルトでは「You might also like」となっていますが、日本語ストアであれば「おすすめ商品」「こちらもいかがですか？」「あなたへのおすすめ」などに変更するとよいでしょう。

購入済み商品の除外

チェックを入れると、今回の注文で購入した商品をクロスセルリストから自動的に非表示にします。お客様がすでに購入した商品を再度表示しても意味がないため、この設定を有効にすることをおすすめします。

表示商品数の上限

サンクスページに表示する商品数の上限を設定できます。0 に設定すると上限なしで、登録したすべての商品が表示されます。

表示する商品が多すぎるとページが長くなりすぎるため、3〜6 商品程度を目安に設定するのがおすすめです。

カートへの追加後の動作

お客様がクロスセル商品の「カートに追加」ボタンをクリックした後の遷移先を設定できます。

• カートページへ遷移する: 商品がカートに追加され、カートページに移動します。お客様がカート内容を確認してから購入したい場合に適しています。
• チェックアウトへ遷移する: 商品がカートに追加され、そのままチェックアウト画面に移動します。追加購入のスピードを重視する場合に適しています。

表示レイアウト

サンクスページでの商品の表示方法を選択できます。

• リスト表示: 商品を縦に 1 列で表示します。商品画像と商品情報が横に並び、詳細が見やすいレイアウトです。商品の説明文を重視したい場合におすすめです。
• グリッド表示: 商品を横に並べて表示します。商品画像を大きく見せたい場合に適しており、ビジュアル重視の商品に向いています。

並び順

クロスセル商品の表示順を設定できます。

• 任意の並び順: 「クロスセル商品設定」ページで設定した順番通りに表示します。売りたい商品を上位に配置したい場合に便利です。
• 毎回ランダム表示: ページを読み込むたびにランダムな順番で表示します。リピーターのお客様に毎回新鮮な印象を与えたい場合に効果的です。

ボタンテキストのカスタマイズ

サンクスページに表示される各ボタンのテキストを自由にカスタマイズできます。

• カートに追加ボタン: デフォルトは「Add to cart」。日本語ストアでは「カートに追加」「カートに入れる」などに変更できます。
• 今すぐ購入ボタン: デフォルトは「Buy it now」。「今すぐ購入」「すぐに購入する」などに変更できます。
• 売り切れボタン: デフォルトは「Sold out」。「売り切れ」「在庫切れ」などに変更できます。

すぐ使えるおすすめ設定例

ユースケース 1: 初めてクロスセルを導入するストア

初めて Shopify サンクスページ クロスセルを試す場合は、シンプルな設定から始めましょう。

• クロスセル商品: 売れ筋商品を 5〜8 商品選択
• セクションタイトル: 「おすすめ商品」
• 購入済み商品の除外: 有効
• 表示商品数の上限: 4
• カートへの追加後の動作: カートページへ遷移する
• 表示レイアウト: グリッド表示
• 並び順: 任意の並び順
• ボタンテキスト: 「カートに追加」「今すぐ購入」「売り切れ」

ユースケース 2: アパレル・ファッションストア

コーディネート提案やセット購入を促すケースです。

• クロスセル商品: アクセサリー、靴下、バッグなどのコーディネートアイテム
• セクションタイトル: 「コーディネートにプラス」
• 購入済み商品の除外: 有効
• 表示商品数の上限: 3
• カートへの追加後の動作: チェックアウトへ遷移する
• 表示レイアウト: グリッド表示
• 並び順: 任意の並び順（おすすめ順に配置）
• ボタンテキスト: 「カートに追加する」「今すぐ購入する」「SOLD OUT」

ユースケース 3: 食品・消耗品ストア

まとめ買いやリピート購入を促すケースです。

• クロスセル商品: 定番商品、セット商品、お試しサイズ
• セクションタイトル: 「こちらもいかがですか？」
• 購入済み商品の除外: 有効
• 表示商品数の上限: 6
• カートへの追加後の動作: カートページへ遷移する
• 表示レイアウト: リスト表示
• 並び順: 毎回ランダム表示
• ボタンテキスト: 「カートに入れる」「今すぐ注文」「品切れ中」

ユースケース 4: 期間限定キャンペーン

セールやキャンペーン期間中にサンクスページの訴求を強化するケースです。

• クロスセル商品: キャンペーン対象商品のみを登録
• セクションタイトル: 「期間限定セール開催中！」
• 購入済み商品の除外: 有効
• 表示商品数の上限: 4
• カートへの追加後の動作: チェックアウトへ遷移する
• 表示レイアウト: グリッド表示
• 並び順: 任意の並び順（目玉商品を上位に）
• ボタンテキスト: 「セール品をカートに追加」「今すぐ購入」「完売」

文言のテンプレ例

セクションタイトルに使える文言のテンプレートをご紹介します。ストアの雰囲気に合わせて選んでください。

スタンダード系

• 「おすすめ商品」
• 「こちらもいかがですか？」
• 「あなたへのおすすめ」
• 「人気の商品」

親しみやすい系

• 「一緒にいかがですか？」
• 「こんな商品もありますよ」
• 「お買い忘れはありませんか？」
• 「ついでにチェック」

お得感を演出する系

• 「送料無料まであと少し！」
• 「セット買いがお得です」
• 「今だけの特別価格」
• 「まとめ買い割引対象商品」

ブランド感を出す系

• 「スタッフのイチオシ」
• 「今季のおすすめアイテム」
• 「コーディネートにプラスワン」
• 「リピーター続出の人気商品」

関連施策との組み合わせ

Shopify サンクスページ アップセルの効果をさらに高めるために、他のマーケティング施策と組み合わせる方法をご紹介します。

サンクスページ クロスセル × メール施策

サンクスページでクロスセル商品を表示するだけでなく、購入後のフォローアップメールと組み合わせることで、追加購入の機会を 2 段階で創出できます。

• サンクスページで「おすすめ商品」を表示し、興味を喚起する
• 購入後 3 日後に「先日ご購入いただいた商品と相性の良いアイテム」をメールで案内する
• メール内にサンクスページで表示したのと同じ商品のリンクを掲載することで、一貫性のある提案ができる

サンクスページ × SNS 誘導

サンクスページにクロスセル商品を表示するとともに、ストアの SNS アカウントへの誘導も行うことで、リピート購入につながるファン化を促進できます。

• サンクスページで「フォローして最新情報をチェック」などの SNS ボタンを設置する
• SNS ではクロスセル商品と同じ商品を紹介する投稿を行い、再訪を促す
• Instagram や LINE のフォロワー限定クーポンと組み合わせることで、次回購入を後押しする

アップセル × リピーター施策

Shopify サンクスページ カスタマイズとリピーター施策を組み合わせることで、LTV（顧客生涯価値）の向上を狙えます。

• サンクスページのクロスセル商品に「定期購入」「サブスクリプション」商品を含める
• 「次回使える 10%OFF クーポン」のバナーとクロスセル商品を組み合わせて表示する
• 会員登録やポイントプログラムへの誘導とクロスセルを並べることで、長期的な顧客関係を構築する

クロスセル × レビュー施策

購入直後のお客様にレビューを依頼しつつ、クロスセル商品も提案する組み合わせです。

• サンクスページの上部にクロスセル商品を表示し、下部にレビュー依頼のメッセージを配置する
• レビュー投稿でポイント付与する仕組みと組み合わせ、リピート購入の動機づけを行う
• 高評価レビューがついた商品をクロスセル商品として優先的に表示する

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずにテーマのコード編集で Shopify サンクスページ 商品表示を実装したい場合のサンプルコードを紹介します。ここでは Shopify のチェックアウト拡張機能（Checkout UI Extensions）を使ったアプローチを解説します。

実装の流れ

1. Shopify CLI でチェックアウト拡張機能のプロジェクトを作成する
2. サンクスページ（Thank you ページ）にカスタム UI を追加する
3. Storefront API を使って商品データを取得する
4. 商品カードを表示する React コンポーネントを実装する

Checkout UI Extension の作成

まず、Shopify CLI を使ってチェックアウト拡張機能を作成します。

# Shopify CLIでチェックアウト拡張機能を生成
npx shopify app generate extension --type checkout_ui
# 拡張機能名: thank-you-crosssell

設定ファイル（shopify.extension.toml）

# extensions/thank-you-crosssell/shopify.extension.toml

api_version = "2025-04"

[[extensions]]
type = "ui_extension"
name = "Thank You Cross-sell"
handle = "thank-you-crosssell"

  # サンクスページにのみ表示
  [[extensions.targeting]]
  module = "./src/ThankYouCrossSell.tsx"
  target = "purchase.thank-you.block.render"

React コンポーネント（ThankYouCrossSell.tsx）

// extensions/thank-you-crosssell/src/ThankYouCrossSell.tsx
import {
  reactExtension,
  BlockStack,
  Heading,
  InlineLayout,
  Image,
  Text,
  Button,
  useApi,
  useOrder,
} from '@shopify/ui-extensions-react/checkout';
import { useEffect, useState } from 'react';

// おすすめ商品の型定義
type RecommendedProduct = {
  id: string;
  title: string;
  imageUrl: string;
  price: string;
  variantId: string;
};

// サンクスページにクロスセル商品を表示するコンポーネント
export default reactExtension('purchase.thank-you.block.render', () => <ThankYouCrossSell />);

function ThankYouCrossSell() {
  const { query } = useApi();
  const order = useOrder();
  const [products, setProducts] = useState<RecommendedProduct[]>([]);

  // 購入済み商品のIDを取得
  const purchasedProductIds = order?.lineItems?.map((item) => item.merchandise?.product?.id) ?? [];

  useEffect(() => {
    // Storefront APIでおすすめ商品を取得
    async function fetchProducts() {
      try {
        const result = await query<{
          products: {
            nodes: Array<{
              id: string;
              title: string;
              featuredImage: { url: string } | null;
              variants: {
                nodes: Array<{
                  id: string;
                  price: { amount: string; currencyCode: string };
                }>;
              };
            }>;
          };
        }>(
          `query {
            products(first: 8) {
              nodes {
                id
                title
                featuredImage {
                  url
                }
                variants(first: 1) {
                  nodes {
                    id
                    price {
                      amount
                      currencyCode
                    }
                  }
                }
              }
            }
          }`,
        );

        if (result.data) {
          // 購入済み商品を除外
          const filtered = result.data.products.nodes
            .filter((p) => !purchasedProductIds.includes(p.id))
            .slice(0, 4)
            .map((p) => ({
              id: p.id,
              title: p.title,
              imageUrl: p.featuredImage?.url ?? '',
              price: `${p.variants.nodes[0]?.price.amount} ${p.variants.nodes[0]?.price.currencyCode}`,
              variantId: p.variants.nodes[0]?.id ?? '',
            }));

          setProducts(filtered);
        }
      } catch (error) {
        console.error('商品データの取得に失敗しました:', error);
      }
    }

    fetchProducts();
  }, [query, purchasedProductIds]);

  // 表示する商品がない場合は何も表示しない
  if (products.length === 0) return null;

  return (
    <BlockStack spacing="loose">
      <Heading level={2}>おすすめ商品</Heading>
      {products.map((product) => (
        <InlineLayout
          key={product.id}
          columns={['20%', 'fill', 'auto']}
          spacing="base"
          blockAlignment="center"
        >
          {product.imageUrl && (
            <Image source={product.imageUrl} aspectRatio={1} cornerRadius="base" />
          )}
          <BlockStack spacing="extraTight">
            <Text size="medium" emphasis="bold">
              {product.title}
            </Text>
            <Text size="small" appearance="subdued">
              {product.price}
            </Text>
          </BlockStack>
          <Button
            kind="secondary"
            onPress={() => {
              // カートに追加する処理
              window.open(`/cart/add?id=${product.variantId}&quantity=1`, '_self');
            }}
          >
            カートに追加
          </Button>
        </InlineLayout>
      ))}
    </BlockStack>
  );
}

CSS でスタイルを調整する

Checkout UI Extensions は独自のコンポーネントシステムを使用するため、従来の CSS ではなく、コンポーネントの props でスタイルを制御します。しかし、App Proxy 経由で Liquid テンプレートに直接表示する場合は、以下のような CSS を使用できます。

/* サンクスページのクロスセルセクション */
.crosssell-section {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background-color: #fafafa;
}

.crosssell-section__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.crosssell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.crosssell-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: box-shadow 0.2s ease;
}

.crosssell-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.crosssell-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.crosssell-card__info {
  padding: 12px;
}

.crosssell-card__name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #333;
}

.crosssell-card__price {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.crosssell-card__button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
}

.crosssell-card__button:hover {
  background-color: #555;
}

.crosssell-card__button--soldout {
  background-color: #ccc;
  cursor: not-allowed;
}

JavaScript で動的な商品取得を行う

Storefront API を使って動的に商品を取得し、サンクスページに表示する JavaScript の例です。

// サンクスページ用クロスセルスクリプト
(function () {
  'use strict';

  // 設定
  const CONFIG = {
    maxProducts: 4,
    sectionTitle: 'おすすめ商品',
    addToCartText: 'カートに追加',
    soldOutText: '売り切れ',
    storefrontAccessToken: 'YOUR_STOREFRONT_ACCESS_TOKEN',
    shopDomain: 'your-store.myshopify.com',
  };

  // Storefront API で商品を取得
  async function fetchRecommendedProducts() {
    const query = `
      query {
        products(first: ${CONFIG.maxProducts * 2}, sortKey: BEST_SELLING) {
          nodes {
            id
            title
            handle
            availableForSale
            featuredImage {
              url
              altText
            }
            priceRange {
              minVariantPrice {
                amount
                currencyCode
              }
            }
            variants(first: 1) {
              nodes {
                id
                availableForSale
              }
            }
          }
        }
      }
    `;

    try {
      const response = await fetch(`https://${CONFIG.shopDomain}/api/2025-04/graphql.json`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Shopify-Storefront-Access-Token': CONFIG.storefrontAccessToken,
        },
        body: JSON.stringify({ query }),
      });

      const data = await response.json();
      return data.data.products.nodes;
    } catch (error) {
      console.error('商品データの取得に失敗しました:', error);
      return [];
    }
  }

  // 通貨フォーマット
  function formatPrice(amount, currencyCode) {
    return new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: currencyCode,
    }).format(amount);
  }

  // 商品カードの HTML を生成
  function createProductCard(product) {
    const price = formatPrice(
      product.priceRange.minVariantPrice.amount,
      product.priceRange.minVariantPrice.currencyCode,
    );
    const isAvailable = product.availableForSale;
    const variantId =
      product.variants.nodes[0]?.id?.replace('gid://shopify/ProductVariant/', '') ?? '';

    return `
      <div class="crosssell-card">
        ${
          product.featuredImage
            ? `<img
              class="crosssell-card__image"
              src="${product.featuredImage.url}"
              alt="${product.featuredImage.altText || product.title}"
            />`
            : ''
        }
        <div class="crosssell-card__info">
          <p class="crosssell-card__name">${product.title}</p>
          <p class="crosssell-card__price">${price}</p>
          ${
            isAvailable
              ? `<button
                  class="crosssell-card__button"
                  data-variant-id="${variantId}"
                  onclick="addToCart('${variantId}')"
                >
                  ${CONFIG.addToCartText}
                </button>`
              : `<button
                  class="crosssell-card__button crosssell-card__button--soldout"
                  disabled
                >
                  ${CONFIG.soldOutText}
                </button>`
          }
        </div>
      </div>
    `;
  }

  // カートに追加
  window.addToCart = async function (variantId) {
    try {
      await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: [{ id: parseInt(variantId), quantity: 1 }],
        }),
      });
      window.location.href = '/cart';
    } catch (error) {
      console.error('カートへの追加に失敗しました:', error);
    }
  };

  // メイン処理：商品を取得して表示
  async function init() {
    const products = await fetchRecommendedProducts();
    if (products.length === 0) return;

    const displayProducts = products.slice(0, CONFIG.maxProducts);
    const html = `
      <div class="crosssell-section">
        <h2 class="crosssell-section__title">${CONFIG.sectionTitle}</h2>
        <div class="crosssell-grid">
          ${displayProducts.map(createProductCard).join('')}
        </div>
      </div>
    `;

    // サンクスページのコンテンツエリアに挿入
    const targetElement = document.querySelector('[data-step="thank_you"]');
    if (targetElement) {
      targetElement.insertAdjacentHTML('beforeend', html);
    }
  }

  // DOM 読み込み後に実行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

コード実装の注意点

テーマのコード編集で Shopify サンクスページ 商品表示を実装する際は、以下の点に注意してください。

• Checkout UI Extensions を使用する: Shopify のチェックアウトページは、セキュリティ上の理由からカスタマイズ方法が限定されています。最新のアプローチとして Checkout UI Extensions を推奨します。
• Storefront API のアクセストークン管理: Storefront API のアクセストークンはフロントエンドに公開されるため、読み取り専用のトークンを使用し、権限を最小限に設定してください。
• パフォーマンスへの配慮: サンクスページの読み込み速度に影響しないよう、API リクエストは非同期で行い、表示する商品数は適切に制限してください。
• エラーハンドリング: API リクエストが失敗した場合でも、サンクスページの表示に影響しないよう、適切なエラーハンドリングを実装してください。
• テストの徹底: 本番環境に適用する前に、開発ストアで十分にテストを行ってください。特に、商品の在庫状況やバリアント選択の動作を確認しましょう。
• Shopify のガイドラインに従う: チェックアウトページのカスタマイズには Shopify のガイドラインがあります。審査に通るよう、ガイドラインを遵守してください。

運用のコツ

Shopify サンクスページ クロスセルの効果を最大化するための運用のコツをまとめました。

定期的に商品ラインナップを入れ替える

同じ商品を長期間表示し続けると、リピーターのお客様にとって新鮮味がなくなります。月に 1 回程度は表示する商品を見直し、新商品や季節商品を取り入れましょう。

データを見ながら改善する

サンクスページからの追加購入がどの程度あるかを定期的にチェックし、効果の低い商品は入れ替えましょう。売れ筋商品や関連性の高い商品を優先的に表示することで、コンバージョン率を向上させることができます。

セクションタイトルを工夫する

「おすすめ商品」だけでなく、季節やキャンペーンに合わせてタイトルを変更しましょう。「夏のおすすめアイテム」「期間限定 20%OFF」など、具体的なタイトルのほうがクリック率が上がります。

表示商品数を最適化する

表示する商品が多すぎると選択肢の多さにお客様が迷い、結果として何も追加しないケースが増えます。3〜4 商品程度が最も追加購入率が高い傾向にあります。

購入済み商品の除外は必ず有効にする

すでに購入した商品が再度表示されると、お客様にとって違和感があり、クロスセルの信頼性が下がります。購入済み商品の除外機能は必ず有効にしておきましょう。

よくある質問

Q: サンクスページに表示できる商品数に制限はありますか？

A: 「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」では、クロスセル商品として登録できる商品数に上限はありません。ただし、表示商品数の上限を設定画面で指定できるため、サンクスページに実際に表示される商品数はコントロールできます。読みやすさを考慮して 3〜6 商品程度に設定することをおすすめします。

Q: 購入した商品に応じて表示を変えることはできますか？

A: 現在のバージョンでは、購入した商品に応じて動的に表示商品を変更する機能はありません。ただし、「購入済み商品の除外」機能を有効にすることで、今回購入した商品がクロスセルリストから自動的に除外されます。

Q: 無料トライアル期間中に解約した場合、料金は発生しますか？

A: いいえ、1 週間の無料トライアル期間中に解約すれば料金は一切発生しません。まずは無料で試してみて、効果を確認してから継続するかどうかを判断できます。

Q: サンクスページ以外のページにもクロスセル商品を表示できますか？

A: 「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」は、購入後のサンクスページ（注文完了画面）専用のアプリです。商品ページやカートページでのクロスセルを行いたい場合は、別途専用のアプリをご検討ください。

Q: テーマを変更した場合、設定はやり直しになりますか？

A: テーマを変更した場合、テーマカスタマイズ画面でのアプリブロックの追加（初期設定ガイドの手順）をやり直す必要があります。ただし、アプリの管理画面で設定したクロスセル商品の選択や各種設定はそのまま引き継がれます。

Q: 他のアプリと競合することはありますか？

A: ほとんどの場合、他のアプリと競合することなく動作します。ただし、同じサンクスページに複数のアプリがブロックを追加している場合、表示位置が近接してレイアウトが窮屈になることがあります。その場合は、テーマカスタマイズ画面でブロックの位置を調整してください。

まとめ

この記事では、Shopify サンクスページ 商品表示の方法について、アプリ導入とコード実装の両面から徹底的に解説しました。最後に要点をまとめます。

• サンクスページは売上アップのチャンス — 購入直後の高い購買意欲を活かして、クロスセル・アップセルを行うことで客単価を向上させられる
• 実装方法は 2 つ — テーマのコード編集（Checkout UI Extensions）とアプリ導入の 2 つの方法がある
• まずはアプリで小さく始めるのがおすすめ — 「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」なら、コーディング不要で数分で設定完了
• 1 週間の無料トライアルあり — リスクなくクロスセル施策を始められる
• 設定のポイント — 表示商品数は 3〜6 個、購入済み商品の除外は有効にし、セクションタイトルは日本語で分かりやすく設定する
• 定期的な運用改善が重要 — 商品ラインナップの入れ替え、タイトルの工夫、データに基づく改善を継続することで効果を最大化できる
• 他の施策との組み合わせが効果的 — メールマーケティング、SNS 施策、リピーター施策と組み合わせることで、より高い効果を発揮する

Shopify サンクスページ カスタマイズによるクロスセル・アップセルは、低コストで始められ、高い効果が期待できるマーケティング施策です。ぜひこの機会に導入を検討してみてください。

参考記事

• Shopify のサンクスページに商品を表示してクロスセルできるアプリ 5 選！購入後のアップセルで売上アップする方法を解説！
• Shopify のサンクスページにクロスセル商品を表示できるアプリ 6 選を紹介！
• 【2026】Shopify のサンクスページにおすすめ商品を表示できるアプリ 17 選！
• シンプル購入後アップセル｜お手軽サンクスページでクロスセル ご利用ガイド