Zenn
🙄

ShopifyでサンクスページにSNSアイコンを表示する方法を解説

2025/03/11に公開
Shopify
shopifyアプリ
tech

はじめに

今回は、Shopify で「サンクスページをカスタマイズしSNSアイコンを表示するアプリ」を活用して、サンクスページに SNS アイコンを表示する方法について考察していきます。

購入完了後のページ（サンクスページ）は、お客様にとって購買体験の最後を飾る重要なポイントです。ここに SNS アイコンを設置しておくと、ストアのフォローを促進し、リピート購買やコミュニティの形成につなげられます。

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

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

サンクスページで SNS アイコンを表示することの定義

サンクスページに SNS アイコンを表示するとは、注文完了ページ（thank_you ページや order_status ページなど）に、Twitter・Instagram・Facebook・TikTok などのアイコンを設置し、リンク先へ誘導する仕組みを作ることを指します。お客様が購入を終えた直後にストアの公式 SNS をフォローしてくれることで、ブランド認知が高まりやすくなります。

サンクスページに SNS アイコンを設置するメリット

まずは、サンクスページに SNS アイコンを設置することのメリットについて解説していきます。

1. ブランディングと認知度の向上

サンクスページから直接 SNS のアカウントに誘導することで、ブランド認知度を高めることができます。SNS 上のコミュニティが育つと、フォロワー同士で商品の話題が広がり、自然な形での口コミが期待できます。

2. リピーターの獲得

お客様が SNS をフォローすると、新商品情報やセール情報などをタイムリーに受け取れます。これにより、リピート購入を促しやすくなり、長期的な顧客関係を築くことができます。

3. 購入後体験の向上

購入完了後のページで、「フォローありがとうございます！」のようなメッセージや SNS アイコンが表示されると、ブランドの世界観を最後まで体験してもらえます。お客様の満足感を高めることで、ポジティブな印象を残すことができます。

4. カスタマージャーニーの効率化

多くの EC サイトでは、購入後のコンバージョンポイントが活用されないまま終わってしまうケースがあります。しかし、サンクスページに SNS アイコンを設置しておくと、商品購入→フォロー→SNS 上のクチコミ→再訪問という流れがスムーズになり、顧客ライフサイクル全体の効率が上がります。

5. アップセルやクロスセルの機会創出

SNS アカウントで新商品や関連商品を紹介すると、お客様との接点を保ちながら追加購入を促せます。こうしたアップセルやクロスセルの導線づくりにおいても、サンクスページの SNS アイコンが役立ちます。

サンクスページに SNS アイコンを表示するデメリット

次に、サンクスページに SNS アイコンを追加することのデメリットについて考察していきます。

1. デザイン調整に手間がかかる

SNS アイコンをどのように配置するか、既存のテーマデザインとどのように整合性を取るかなど、細かなデザイン調整が必要になる場合があります。特に、テーマを大きくカスタマイズしているストアの場合は注意が必要です。

2. ページ表示速度への影響

外部の SNS 用スクリプトや大きいアイコン画像を読み込んでしまうと、サンクスページの表示速度が遅くなる可能性があります。ページ読み込みが遅いとユーザー体験を損ねるため、軽量化やサイズ最適化が求められます。

3. お客様による利用率の違い

SNS をまったく使わないお客様もいます。そのため、全員に対してアイコンが有効に働くわけではありません。加えて、既にフォローしているお客様からすると、アイコンの存在が目新しさを感じない可能性があります。

4. 他の導線と競合する場合がある

サンクスページでクーポンコードの提示や、関連商品のレコメンドなどを行っている場合は、アイコンを配置するスペースやタイミングを工夫しないと、ユーザーがどれを優先すればいいのか迷ってしまうことがあります。

Shopify でサンクスページに SNS アイコンを実装する方法

それではここから、Shopify のコーディングでサンクスページに SNS アイコンを表示する方法を解説していきます。

Shopify のサンクスページは、通常は「checkout」のテンプレートによって制御されています。テーマエディターから直接アクセスしづらい箇所ですが、一例として、以下のような HTML・CSS・JavaScript を利用することで、サンクスページにアイコンを表示させることが可能です。

ご注意: 2023 年以降の Shopify では、チェックアウトページに関するカスタマイズ制限が以前よりも厳しくなっている場合があります。Shopify Plus の場合にはカスタマイズオプションが比較的豊富ですが、通常プランではスクリプト編集やチェックアウトの直接編集ができないことがあります。以下のコードは参考のサンプルです。

<!-- サンクスページに表示するSNSアイコン HTML -->
<div class="thank-you-share">
  <p>ご購入ありがとうございます！SNSでフォローしましょう:</p>
  <ul class="thank-you-share-icons">
    <li>
      <a href="https://facebook.com/yourstore" target="_blank" rel="noopener noreferrer">
        <img src="https://cdn.example.com/facebook-icon.png" alt="Facebook" />
      </a>
    </li>
    <li>
      <a href="https://twitter.com/yourstore" target="_blank" rel="noopener noreferrer">
        <img src="https://cdn.example.com/twitter-icon.png" alt="Twitter" />
      </a>
    </li>
    <li>
      <a href="https://instagram.com/yourstore" target="_blank" rel="noopener noreferrer">
        <img src="https://cdn.example.com/instagram-icon.png" alt="Instagram" />
      </a>
    </li>
  </ul>
</div>

<style>
.thank-you-share {
  padding: 16px;
  margin: 24px 0;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.thank-you-share p {
  font-size: 18px;
  margin-bottom: 12px;
}

.thank-you-share-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 16px;
}

.thank-you-share-icons li {
  display: inline-block;
}

.thank-you-share-icons img {
  width: 36px;
  height: 36px;
  transition: opacity 0.3s ease;
}

.thank-you-share-icons img:hover {
  opacity: 0.7;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // サンクスページにアイコンを挿入するための簡易スクリプト例
  const orderStatusElement = document.querySelector(".os-order-summary"); 
  // ※ 2023年時点の Shopify のサンクスページには .os-order-summary が存在することが多い

  if(orderStatusElement) {
    const thankYouShare = document.querySelector(".thank-you-share");
    // 既にHTMLが読み込まれている場合、このままでも表示されるが、
    // テーマやアプリの構成によっては動的挿入が必要なケースもある
    orderStatusElement.insertAdjacentElement("afterend", thankYouShare);
  }
});
</script>

上記のコードは、サンプルとしてサンクスページ上の要素 (.os-order-summary) のすぐ後ろに SNS アイコンのコンテンツを挿入する例です。実際のテーマや Shopify の仕様変更により、クラス名やセレクタが異なる場合があります。

アプリを用いてサンクスページに SNS アイコンを表示する方法

コーディングに慣れていない方や、柔軟性の高いカスタマイズを手軽に行いたい方は、アプリを利用するのがおすすめです。

ここで紹介するのが、「サンクスページをカスタマイズしSNSアイコンを表示するアプリ」 です。以下、アプリの概要を見てみましょう。

  • 開発者: 株式会社UnReact
  • 価格: 月額 $4.99
  • 評価: 0.0 (0 レビュー)
  • 対応言語: 英語・日本語
  • インストール方法: Shopify アプリストアから直接インストール可能
  • 連携対象システム・アプリ: チェックアウト
  • カテゴリー: バッジとアイコン

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

https://apps.shopify.com/ur-smart-thanks-page-sns-icon?locale=ja

アプリの主な特徴

  1. サンクスページにリンク付き SNS アイコンを簡単に追加
    ノーコードで設定可能なので、非エンジニアの方でも安心して導入できます。

  2. 主要な SNS のアイコンをサポート
    Facebook, Twitter, Instagram, TikTok などのアイコンを簡単に設定できます。

  3. ブランドカラーに合わせたカスタマイズが可能
    アイコンサイズや配置場所、色味などをアプリ画面から調整できます。

  4. 英語・日本語に対応
    日本製アプリのため、日本語でのサポートも万全です。英語圏へのストア展開にも対応しています。

  5. 追加機能でサンクスページそのものをカスタマイズ
    購入者へのメッセージやクーポン表示など、アイコン以外の要素も独自に編集可能です。

このように、アプリを利用すれば、コードを編集せずにサンクスページへ SNS アイコンを追加できます。月額 $4.99 の有料アプリですが、設置や管理にかかる時間や労力を考えると、大きなメリットを得られる可能性があります。

サンクスページをカスタマイズしSNSアイコンを表示するアプリの概要

ここから、サンクスページをカスタマイズしSNSアイコンを表示するアプリの概要について解説していきます。

サンクスページにSNSアイコンを簡単に追加できます。

サンクスページにリンク付き SNS アイコンを表示できます。

主要な SNS アイコンを設定することができます。

ノーコードで簡単に設定できます。

詳しい設定手順を管理画面で確認できます。

以下のShopifyの公式のアプリストからインストールできます。
https://apps.shopify.com/ur-smart-thanks-page-sns-icon?locale=ja

最後に

今回は、Shopify のサンクスページに SNS アイコンを表示する方法について、コーディングによる実装方法とアプリを用いた実装方法の二つを解説しました。購入直後のタイミングを活用して SNS のフォロワー獲得やブランディングを高める施策は、ストア運営において非常に有効です。ぜひ、自分のストアに合った方法を選び、導入を検討してみてください。

お疲れさまでした。

参考記事

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

Discussion