2026/05/15

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

@ 信条刃

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

今回の記事は、Shopify App Store で提供されている、サンクスページ（注文完了画面）にクロスセル商品を表示できるアプリについての記事です。

購入後のサンクスページは、お客様の購入意欲が最も高いタイミングです。このページにおすすめ商品を表示することで、追加購入を自然に促すことができます。本記事では、Shopify のサンクスページにクロスセル商品を表示できるおすすめアプリ6選と、コーディングによる実装方法をご紹介します。

サンクスページのクロスセルとは

サンクスページのクロスセルとは、お客様が商品を購入した直後に表示される注文完了画面（サンクスページ）に、関連商品やおすすめ商品を表示して追加購入を促す手法のことです。

一般的に「クロスセル」とは、購入した商品と関連性の高い別の商品を提案する販売戦略を指します。たとえば、スマートフォンを購入したお客様にケースや保護フィルムを提案するようなイメージです。一方、「アップセル」はより上位の商品やプランを提案する手法で、サンクスページではこの両方を活用できます。

サンクスページは、お客様がすでに購入を完了しているため、決済情報の入力などの心理的ハードルがなく、追加購入につながりやすいという大きなメリットがあります。

サンクスページのクロスセルについて調べるにあたり、以下の記事を参考にしています。

サンクスページにクロスセル商品を導入する利点

購入意欲が最も高いタイミングでアプローチできる
お客様が購入を完了した直後は、ストアに対する信頼感と購買意欲が最も高い状態です。このタイミングでおすすめ商品を提案することで、高いコンバージョン率を期待できます。
平均注文単価（AOV）を向上させられる
追加購入を促すことで、1回あたりの注文金額を引き上げることができます。広告費を追加でかけることなく売上を伸ばせるため、費用対効果が非常に高い施策です。
顧客体験を向上させられる
関連性の高い商品を適切なタイミングで提案することは、お客様にとっても便利な体験となります。購入した商品と相性の良いアイテムを見つけるきっかけになるため、顧客満足度の向上にもつながります。
購入のハードルが低い
サンクスページでは、お客様はすでに決済情報を入力しています。そのため、通常の商品ページからの購入と比べて、追加購入のハードルが大幅に低くなります。ワンクリックでカートに追加できるアプリを使えば、さらにスムーズな購入体験を提供できます。
在庫回転率を改善できる
サンクスページでの商品表示を活用すれば、売れ残りがちな商品や新商品の露出を増やすことができます。セールや季節商品のプロモーションにも効果的です。
リピーターの育成につながる
購入後にさらに魅力的な商品を提案することで、お客様の「またこのストアで買いたい」という気持ちを高められます。サンクスページでの良い体験は、将来的なリピート購入にもつながります。

サンクスページクロスセルアプリの選び方

サンクスページにクロスセル商品を表示するアプリを選ぶ際は、以下のポイントを確認しましょう。

設定の簡単さ: コーディング不要で、管理画面から直感的に設定できるかどうかは重要なポイントです。ノーコードで導入できるアプリを選ぶことで、すぐにクロスセルを始められます。
表示商品のカスタマイズ性: 表示する商品を自由に選択できるか、レイアウトや表示数を変更できるかを確認しましょう。ストアの雰囲気に合わせて柔軟にカスタマイズできるアプリが理想的です。
料金体系: 月額固定か、注文数に応じた従量課金か、アップセル収益に対する手数料があるかなど、料金体系はアプリによって異なります。自分のストアの規模に合った料金プランを選びましょう。
日本語対応: 日本語のストアを運営している場合、アプリの管理画面やサポートが日本語に対応しているかどうかも選定基準の一つです。
購入済み商品の除外: すでに購入した商品がサンクスページに表示されると、お客様にとって不自然な体験になります。購入済み商品を自動で除外する機能があるアプリを選ぶと良いでしょう。
ワンクリック購入対応: サンクスページから直接カートに追加したり、すぐに購入画面に遷移できる機能があると、追加購入のコンバージョン率がさらに高まります。

これらのポイントを総合的に判断して、自分のストアに最適なアプリを選びましょう。

コードで実装する方法

アプリを使わずに、コーディングでサンクスページにクロスセル商品を表示する方法もあります。ここでは、Shopify のチェックアウト拡張機能（Checkout UI Extensions）を使った実装例をご紹介します。

チェックアウト拡張機能（Checkout UI Extensions）による実装

Shopify のチェックアウト拡張機能を使うと、サンクスページ（Thank you ページ）にカスタムUIを追加できます。以下は、React ベースのチェックアウト拡張機能でクロスセル商品を表示するコード例です。

まず、shopify.extension.toml でサンクスページへの拡張を設定します。

# shopify.extension.toml
api_version = "2025-04"

[[extensions]]
name = "Cross Sell on Thank You Page"
handle = "cross-sell-thank-you"
type = "ui_extension"

  [[extensions.targeting]]
  module = "./src/ThankYouCrossSell.jsx"
  target = "purchase.thank-you.block.render"

次に、サンクスページに表示するクロスセルコンポーネントを作成します。

// src/ThankYouCrossSell.jsx
import {
  reactExtension,
  useApi,
  BlockStack,
  InlineStack,
  Image,
  Text,
  Heading,
  Button,
  Divider,
} from '@shopify/ui-extensions-react/checkout';

// サンクスページにレンダリングするエクステンション
export default reactExtension('purchase.thank-you.block.render', () => <CrossSellProducts />);

function CrossSellProducts() {
  const { lines } = useApi();

  // おすすめ商品のデータ（実際にはAPIから取得する想定）
  const recommendedProducts = [
    {
      id: '1',
      title: 'おすすめ商品A',
      price: '¥1,980',
      imageUrl: 'https://example.com/product-a.jpg',
      handle: 'product-a',
    },
    {
      id: '2',
      title: 'おすすめ商品B',
      price: '¥2,480',
      imageUrl: 'https://example.com/product-b.jpg',
      handle: 'product-b',
    },
    {
      id: '3',
      title: 'おすすめ商品C',
      price: '¥3,280',
      imageUrl: 'https://example.com/product-c.jpg',
      handle: 'product-c',
    },
  ];

  return (
    <BlockStack spacing="loose">
      <Heading level={2}>こちらの商品もおすすめです</Heading>
      {recommendedProducts.map((product) => (
        <BlockStack key={product.id} spacing="tight">
          <InlineStack spacing="base" blockAlignment="center">
            <Image
              source={product.imageUrl}
              accessibilityDescription={product.title}
              aspectRatio={1}
              cornerRadius="base"
              fit="cover"
            />
            <BlockStack spacing="extraTight">
              <Text size="medium" emphasis="bold">
                {product.title}
              </Text>
              <Text size="small">{product.price}</Text>
            </BlockStack>
            <Button
              kind="secondary"
              onPress={() => {
                // 商品ページへ遷移
                window.open(`/products/${product.handle}`, '_blank');
              }}
            >
              詳しく見る
            </Button>
          </InlineStack>
          <Divider />
        </BlockStack>
      ))}
    </BlockStack>
  );
}

Liquid を使ったカスタマイズ（追加のサンクスページスクリプト）

Shopify の「追加のスクリプト」機能（Shopify Plus のみ）を使って、サンクスページにクロスセル商品を表示する方法もあります。以下は、JavaScript と HTML を使った簡易的な実装例です。

<!-- 追加のスクリプト（チェックアウト設定）に貼り付ける -->
<script>
  // サンクスページでのみ実行
  if (window.location.pathname.includes('/thank_you')) {
    // クロスセル商品のデータを取得
    fetch('/recommendations/products.json?limit=4')
      .then((response) => response.json())
      .then((data) => {
        const products = data.products;
        if (products && products.length > 0) {
          renderCrossSellProducts(products);
        }
      })
      .catch((error) => console.error('クロスセル商品の取得に失敗しました:', error));
  }

  function renderCrossSellProducts(products) {
    const container = document.createElement('div');
    container.id = 'cross-sell-section';
    container.style.cssText =
      'max-width: 600px; margin: 24px auto; padding: 20px; border: 1px solid #e5e5e5; border-radius: 8px;';

    let html = '<h3 style="margin-bottom: 16px; font-size: 18px;">こちらの商品もおすすめです</h3>';
    html += '<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">';

    products.forEach((product) => {
      const imageUrl = product.images[0]
        ? product.images[0].src
        : 'https://via.placeholder.com/200';
      const price = (product.price / 100).toLocaleString('ja-JP');

      html += `
        <div style="text-align: center;">
          <a href="/products/${product.handle}" style="text-decoration: none; color: inherit;">
            <img src="${imageUrl}" alt="${product.title}"
              style="width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px;" />
            <p style="margin: 8px 0 4px; font-weight: bold; font-size: 14px;">${product.title}</p>
            <p style="color: #666; font-size: 14px;">¥${price}</p>
          </a>
        </div>
      `;
    });

    html += '</div>';
    container.innerHTML = html;

    // サンクスページのコンテンツエリアに追加
    const contentArea = document.querySelector('.content-box') || document.querySelector('main');
    if (contentArea) {
      contentArea.appendChild(container);
    }
  }
</script>

なお、コーディングによる実装はメンテナンスの手間やShopifyのアップデートによる影響を受けやすいため、特別な理由がない限りアプリを利用することをおすすめします。アプリを使えば、ノーコードで簡単に導入でき、継続的なサポートも受けられます。

価格比較

各アプリの料金を比較します。

シンプル購入後アップセル｜お手軽サンクスページでクロスセル
- Basic Plan: $9.99/月（1週間の無料期間あり、年払いで実質2ヶ月無料）
- シンプルな固定料金制で、注文数に関わらず一定料金
Upsell & Cross Sell — Selleasy
- 無料〜$29/月（注文数に応じた従量課金）
- 月50注文までは無料で利用可能
EcomRise Post Purchase Upsell
- 無料
- 完全無料で利用可能
Vanga AI Post Purchase Upsell
- $9〜$99/月 + アップセル収益の2.5〜5%
- 月額料金に加えて、アップセル収益に対する手数料が発生
Essential Upsell & Cross Sell
- 無料〜$39.99/月（追加収益に応じた従量課金）
- 追加収益$100までは無料で利用可能
Post Purchase Upsell—ReSell
- 無料〜$49.99/月（注文数に応じた従量課金）
- Pay as you goプランでは追加収益の5%の手数料が発生

料金面では EcomRise Post Purchase Upsell が完全無料で最もコストを抑えられます。ただし、日本語対応や使いやすさを重視する場合は、「シンプル購入後アップセル」の月額 $9.99 のシンプルな料金体系が分かりやすくおすすめです。

Shopify アプリの日本語サポート

シンプル購入後アップセル｜お手軽サンクスページでクロスセル: 日本語完全対応（管理画面・サポートともに日本語対応）
Upsell & Cross Sell — Selleasy: 日本語非対応（英語、ドイツ語、フランス語、スペイン語などに対応）
EcomRise Post Purchase Upsell: 日本語非対応（英語のみ）
Vanga AI Post Purchase Upsell: 日本語非対応（英語のみ）
Essential Upsell & Cross Sell: 日本語非対応（英語のみ）
Post Purchase Upsell—ReSell: 日本語非対応（英語、フランス語、スペイン語、イタリア語、ドイツ語に対応）

日本語のストアを運営している場合、アプリの管理画面やサポートが日本語に対応しているかどうかは重要なポイントです。今回ご紹介した6つのアプリの中で、日本語に完全対応しているのは「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」のみです。英語が苦手な方や、日本語でのサポートを希望する方にはこちらのアプリがおすすめです。

使いやすさ

サンクスページにクロスセル商品を表示するアプリとして最もおすすめなのは、「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」です。

このアプリの最大の魅力は、名前の通りシンプルで使いやすいことです。初期設定ガイドが用意されているため、アプリをインストールしてから数分でサンクスページにクロスセル商品を表示し始められます。表示する商品の選択、レイアウトの変更、並び順の設定、ボタンテキストのカスタマイズまで、すべて管理画面から直感的に操作できます。

また、日本語に完全対応しているため、日本のストアオーナーにとって安心して利用できる点も大きなメリットです。月額 $9.99 というシンプルな料金体系で、注文数やアップセル収益に応じた追加料金も発生しません。

購入済み商品の自動除外機能や、「カートに追加」「今すぐ購入」ボタンによるワンクリック購入にも対応しており、お客様にとってもスムーズな購入体験を提供できます。

サンクスページでのクロスセルを手軽に始めたい方には、まずこのアプリから試してみることをおすすめします。

終わりに

今回は、Shopify のサンクスページにクロスセル商品を表示できるアプリ6選をご紹介しました。

サンクスページでのクロスセルは、お客様の購入意欲が最も高いタイミングを活かして追加購入を促せる、非常に効果的なマーケティング施策です。アプリを活用すれば、コーディング不要で簡単に導入できるため、まだ実施していない方はぜひ検討してみてください。

迷った場合は、日本語に完全対応しており、シンプルな操作性と分かりやすい料金体系が魅力の「シンプル購入後アップセル｜お手軽サンクスページでクロスセル」がおすすめです。1週間の無料期間があるので、まずはお気軽にお試しください。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

サンクスページのクロスセルとは

サンクスページにクロスセル商品を導入する利点

サンクスページクロスセルアプリの選び方

おすすめのサンクスページクロスセル Shopify アプリ

シンプル購入後アップセル｜お手軽サンクスページでクロスセル ☆ 迷ったらこれ

特徴・機能

価格設定

Upsell & Cross Sell — Selleasy

特徴・機能

価格設定

EcomRise Post Purchase Upsell

特徴・機能

価格設定

Vanga AI Post Purchase Upsell

特徴・機能

価格設定

Essential Upsell & Cross Sell

特徴・機能

価格設定

Post Purchase Upsell—ReSell

特徴・機能

価格設定

コードで実装する方法

チェックアウト拡張機能（Checkout UI Extensions）による実装

Liquid を使ったカスタマイズ（追加のサンクスページスクリプト）

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopify に Google Maps を埋め込めるアプリ6選を紹介！

Shopify の購入後サンクスページにクーポンを表示できるアプリ7選を紹介

Shopify にお問い合わせフォームを設置できるアプリ12選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

Shopify にサイズ表やテーブルを設置できるアプリ6選を紹介！

Shopify にタブ切り替えを設置できるアプリ6選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

サンクスページのクロスセルとは

サンクスページにクロスセル商品を導入する利点

サンクスページ クロスセルアプリの選び方

おすすめのサンクスページ クロスセル Shopify アプリ

シンプル購入後アップセル｜お手軽サンクスページでクロスセル ☆ 迷ったらこれ

特徴・機能

価格設定

Upsell & Cross Sell — Selleasy

特徴・機能

価格設定

EcomRise Post Purchase Upsell

特徴・機能

価格設定

Vanga AI Post Purchase Upsell

特徴・機能

価格設定

Essential Upsell & Cross Sell

特徴・機能

価格設定

Post Purchase Upsell—ReSell

特徴・機能

価格設定

コードで実装する方法

チェックアウト拡張機能（Checkout UI Extensions）による実装

Liquid を使ったカスタマイズ（追加のサンクスページスクリプト）

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopify に Google Maps を埋め込めるアプリ6選を紹介！

Shopify の購入後サンクスページにクーポンを表示できるアプリ7選を紹介

Shopify にお問い合わせフォームを設置できるアプリ12選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

Shopify にサイズ表やテーブルを設置できるアプリ6選を紹介！

Shopify にタブ切り替えを設置できるアプリ6選を紹介！

サンクスページクロスセルアプリの選び方

おすすめのサンクスページクロスセル Shopify アプリ