Zenn
💬

Shopifyでサンクスページを編集する方法を考察

2025/02/26に公開
Shopify
tech

はじめに

今回は、Shopify でサンクスページを編集・カスタマイズする方法について考察していきます。

注文完了後のサンクスページにバナー画像を挿入する実装例や、Shopify アプリを使って簡単にサンクスページを拡張する方法を紹介していきます。

それでは、頑張っていきましょう。

Shopify でサンクスページをカスタマイズする定義

サンクスページ（Thank You Page）は、ユーザーが商品購入を完了した直後に表示されるページです。ECサイトにおいて重要な位置付けであり、購入後のユーザーに商品やショップの情報を追加で伝えることで、次回のリピート購入や関連商品の訴求に利用できます。

そのため、サンクスページのカスタマイズによってブランドの世界観を深めたり、ユーザーにキャンペーン情報を届けたりといった施策を行うことができます。

Shopify でサンクスページをカスタマイズするメリット

まずは、Shopify でサンクスページをカスタマイズするメリットについて解説していきます。

1. リピート購入の促進

サンクスページに関連商品や次回使えるクーポンなどを表示し、リピート購入を促しやすくなります。購入直後はユーザーの購買意欲が高まっていることが多いため、このタイミングで追加情報を提示することが効果的です。

2. ブランドイメージの強化

サンクスページにブランドのロゴや世界観を表すバナーを配置することで、ユーザーに余韻を与えられます。一貫したデザインをサンクスページでも保持することで、「このショップらしさ」を印象づけられます。

3. カスタマーエクスペリエンスの向上

サンクスページで商品活用のヒントや、ショップのストーリーなどを伝えると、ユーザーが商品を受け取る前から期待感を持てるようになります。購入後のフォローが充実していると、ユーザーの満足度も高まりやすいです。

4. アップセル・クロスセルの可能性

サンクスページにおすすめ商品や関連カテゴリを表示することで、追加購入につなげることができます。ユーザーが「次もここで買いたい」と思うような導線を作れる点は大きなメリットです。

5. ユーザーとのコミュニケーションのきっかけ作り

サンクスページにメールマガジンやLINE登録、SNS フォローへのリンクを置いておくことで、リピーターを育成する施策を取りやすくなります。ユーザーが購入後にショップとつながり続ける仕組みを作れます。

Shopify でサンクスページをカスタマイズするデメリット

それでは次に、Shopify でサンクスページをカスタマイズするデメリットについて考察していきましょう。

1. 実装の手間とコスト

Shopify の標準機能ではサンクスページの大幅なカスタマイズが難しい場合があります。特に、拡張機能（Checkout Extensibility）や Shopify Plus の機能が必要になるケースもあり、コードレベルでの実装が必要になる場合は、開発コストがかさむことがあります。

2. テーマとの整合性を保つのが難しい

テーマによってはサンクスページのレイアウトが独自に作り込まれている場合があります。デザインの統一感を保つには、HTML/CSS のカスタマイズで試行錯誤が必要になる可能性があります。

3. アプリ使用時の月額コスト

サンクスページをカスタマイズするアプリを使用する場合、アプリの月額費用が発生します。無料トライアル期間があっても、長期的に運用するにはランニングコストがかかる点を考慮する必要があります。

4. オーバーカスタマイズによるページ表示速度への影響

サンクスページへ多くの機能を盛り込みすぎると、読み込みに時間がかかり、ユーザーがページを離脱してしまう可能性があります。不要な機能を詰め込まず、ユーザーが見やすい・使いやすい形を意識しましょう。

Shopify でサンクスページをカスタマイズする方法

それでは、Shopify でサンクスページをカスタマイズする方法について簡単なサンプルコードを使って解説していきます。

Shopify では、「管理画面 > 設定 > チェックアウト」の「注文ステータスページ (サンクスページ) 追加スクリプト」欄にスクリプトを追加する方法が一般的です。
以下に、バナー画像とリンクを挿入する簡単なサンプルコードを掲載します。

<!-- サンクスページにバナーを挿入するための HTML -->
<div id="custom-thankyou-banner" style="text-align: center; margin: 20px 0;">
  <a href="https://example.com" target="_blank" style="text-decoration: none;">
    <img src="https://your-image-url.com/your-banner-image.jpg" alt="キャンペーンバナー" style="max-width: 100%; height: auto;">
  </a>
</div>

<!-- スタイルの調整はお好みで追記可能です -->
<style>
  #custom-thankyou-banner {
    background-color: #f9f9f9;
    padding: 10px;
  }
</style>

<!-- JavaScript で表示位置を微調整したい場合の例 -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 注文ステータスページ内の任意のクラスをターゲットにして挿入位置を指定
    const targetElm = document.querySelector('.os-order-summary');
    const bannerElm = document.getElementById('custom-thankyou-banner');

    if (targetElm && bannerElm) {
      // .os-order-summary の前にバナーを挿入
      targetElm.insertAdjacentElement('beforebegin', bannerElm);
    }
  });
</script>

上記のコードを**「注文ステータスページ用の追加スクリプト」**として貼り付けると、サンクスページ（Thank You Page）にバナーが挿入されます。背景色やリンク先は適宜修正してください。

※ 注意点として、テーマやShopifyのプランによっては、この方法では十分なカスタマイズができない場合があります。拡張機能や Shopify Plus でのチェックアウトカスタマイズを利用する必要がある場合もあるので、事前にプランや機能を確認してください。

Shopify アプリを用いてサンクスページをカスタマイズする方法

それでは、Shopify アプリを用いてサンクスページをカスタマイズする方法について紹介していきます。今回は、日本製のアプリとしてリリースされている「シンプルサンクスページ編集｜お手軽チェックアウト拡張」の機能を解説します。

以下の、公式のアプリストアからインストールできます。

https://apps.shopify.com/shopify-application-451?locale=ja

アプリ概要

  • アプリ名：シンプルサンクスページ編集｜お手軽チェックアウト拡張
  • 価格：月額 $7.99（7日間の無料体験あり）
  • 開発者：株式会社UnReact
  • 評価：0.0 (0 レビュー)
  • 特徴：サンクスページに画像付きバナーを簡単に挿入し、リンク先を設定できる。ドラッグ＆ドロップやテキスト入力だけで操作可能。日本製で管理画面が日本語対応。
  • 連携対象：チェックアウト
  • カテゴリ：画像ギャラリー

このアプリを利用すると、コーディング不要で次のような編集が可能です。

  • サンクスページに画像を簡単挿入
    管理画面から画像ファイルをアップロードするだけで、すぐにサンクスページ上にバナーを表示できます。
  • ブランド訴求やキャンペーン周知を強化
    新商品の案内バナーや割引クーポンバナーを表示して、購入者に対して直後のリピート購入やSNS 登録を促せます。
  • 日本語対応の管理画面
    すべての操作画面が日本語なので、設定方法に迷わずに導入できます。

アプリを使った導入手順

  1. Shopify App Store から「シンプルサンクスページ編集｜お手軽チェックアウト拡張」をインストールする
  2. アプリ内でサンクスページに表示したい画像バナーとリンク先を設定
  3. バナーの文言やデザインを管理画面で調整（プレビューで確認可能）
  4. 有効化 すると、ユーザーが購入を完了したタイミングでサンクスページにカスタムバナーが表示される

これだけの簡単手順でサンクスページを彩り、魅力的な購買体験の提供が可能になります。

料金プラン

  • Basic Plan：$7.99 / 月
    • インストール日から7日間は無料で利用できる
    • 開発ストアの場合は無期限無料
  • すべて USD での請求。30日ごとの定期請求。

日本語サポート対応なので、不明点があればサポートチームに問い合わせできます。初めてのサンクスページ編集にも安心ですね。

シンプルサンクスページ編集｜お手軽チェックアウト拡張の具体的な機能について

ここからは、シンプルサンクスページ編集｜お手軽チェックアウト拡張の具体的な機能について解説していきます。

シンプルサンクスページ編集｜お手軽チェックアウト拡張は、決済完了後のサンクスページにリンク付きバナー画像を表示できるアプリです。

以下のように、サンクスページにリンク付きバナー画像を表示できます。

サンクスページに表示するバナー画像は、簡単に設定できます。

また、Shopify の管理画面でサンクスページのプレビューを確認できます。

複数の設定を作成でき、一覧で確認・削除ができます。

アプリの初期設定は、簡単3STEPで設定可能です。

以下の公式ストアから、インストールできます。

https://apps.shopify.com/shopify-application-451?locale=ja

最後に

今回は、コーディングによるサンクスページのバナー挿入方法と、Shopify アプリを用いてサンクスページをカスタマイズする方法について解説しました。

サンクスページは、購入を終えたユーザーに直接アプローチできる貴重な場です。ここを有効活用することで、ブランドイメージの向上やリピート購入の促進が期待できます。
自力で実装する場合は、HTML/CSS/JavaScript の調整が必要となりますが、「シンプルサンクスページ編集｜お手軽チェックアウト拡張」のようなアプリを利用すれば、手軽に運用できる点が魅力です。

ぜひ、自分のショップに合ったカスタマイズ方法を試してみてください。

参考記事

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

Discussion