ShopifyのサンクスページにLINE友だち追加ボタンを設置する方法！メリット・実装手順を徹底解説

はじめに
記事の構成
ShopifyのサンクスページにLINE友だち追加ボタンを表示できる？
サンクスページにLINE友だち追加を表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルサンクスページLINE友だち追加」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをサンクスページに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でストアを運営していると、「せっかく購入してくれたお客様と、購入後もつながり続けたい」という課題に必ず突き当たります。一度きりの購入で関係が終わってしまうと、リピート購入や継続的な売上にはつながりません。そこで近年注目されているのが、購入完了直後の「サンクスページ（注文完了ページ）」を活用した顧客との接点づくりです。

なかでも効果が高いのが、サンクスページに LINE 友だち追加 ボタンを設置する施策です。LINE は日本国内で圧倒的なアクティブユーザー数を誇り、メールマガジンよりも開封率が高い傾向にあります。商品を購入してくれた直後、つまりお客様の満足度とブランドへの好感度が最も高まっているタイミングで「友だち追加」を促すことで、効率よく LINE 公式アカウントの友だちを増やすことができます。

この記事では、Shopify の サンクスページ に LINE の 友だち追加 ボタンを設置する方法を、メリット・デメリットの整理から、おすすめアプリ「シンプルサンクスページLINE友だち追加」を使った具体的な導入手順、さらにテーマのコード編集による実装方法まで、初めての方にも分かるように徹底的に解説します。

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

記事の構成

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

Shopify のサンクスページに LINE 友だち追加ボタンを表示できるのか（結論と2つの実現方法）
サンクスページに LINE 友だち追加を表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルサンクスページLINE友だち追加」の紹介
アプリのインストール手順
アプリをサンクスページに追加（有効化）する手順
アプリの設定項目の解説とおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ・よくある質問・まとめ

順番に読み進めていただければ、ご自身のストアに LINE 友だち追加ボタンを設置できるようになります。

ShopifyのサンクスページにLINE友だち追加ボタンを表示できる？

結論からお伝えすると、Shopify の サンクスページ に LINE の 友だち追加 ボタンを表示することは可能です。

サンクスページは、お客様が決済を完了した直後に表示される「注文完了ページ」のことです。Shopify ではこのページを「Thank you ページ」とも呼び、チェックアウト後の体験をカスタマイズできる領域として用意されています。ここに 友だち追加 ボタンを置くことで、購入完了の瞬間にスムーズに LINE 公式アカウントへ誘導できます。

実現する方法は、大きく分けて次の 2 つです。

テーマのコード編集（チェックアウト拡張）で実装する方法: 開発者がコードを書いて、チェックアウト UI 拡張やスクリプトを使って実装する方法です。自由度は高いものの、専門知識が必要です。
アプリを導入して実装する方法: Shopify アプリストアで配布されているアプリをインストールし、ノーコードで設定する方法です。コーディング不要で、誰でも短時間で設置できます。

なお、Shopify のプランによってサンクスページのカスタマイズ可否や方法が異なる点には注意が必要です。Shopify Plus では「Checkout Editor」でより自由なカスタマイズが可能ですが、それ以外のプランでもチェックアウト UI 拡張に対応したアプリを使えば、サンクスページに LINE 友だち追加 ボタンを設置できます。

この記事では、まずノーコードで簡単に導入できるアプリの方法を中心に解説し、後半でコード編集による実装方法も紹介します。

サンクスページにLINE友だち追加を表示するメリット・デメリット

サンクスページに LINE の 友だち追加 ボタンを設置することには、多くのメリットがあります。一方で、把握しておくべきデメリットもあります。それぞれ整理しておきましょう。

メリット

1. 購入完了直後の最も熱量が高いタイミングで友だち追加を促せる

お客様が商品を購入した直後は、ブランドへの満足度や期待感が最も高まっている瞬間です。このタイミングで 友だち追加 を促すことで、自然な流れで LINE 公式アカウントの友だちを増やせます。

「注文ありがとうございます」という感謝の流れで友だち追加に誘導できる
お客様も購入したばかりで安心しているため、心理的なハードルが低い

2. LINE は開封率が高く、リピート施策に直結する

メールマガジンと比較すると、LINE のメッセージは開封率が高い傾向にあります。友だちになってもらえれば、新商品の案内やクーポン配布、再入荷通知などをダイレクトに届けられます。

セールやキャンペーン情報を確実に届けられる
リピート購入・LTV（顧客生涯価値）の向上につながる

3. ノーコードで設置でき、運用負担が小さい

アプリを使えば、専門知識がなくても短時間で設置でき、設置後の運用負担もほとんどありません。一度設置すれば、すべての注文完了ページに自動で表示されます。

4. 友だち追加の導線を一本化できる

ストアのフッターや商品ページにも LINE の導線を置けますが、サンクスページは「購入完了」という明確なゴールの直後にあるため、最も成果につながりやすい場所です。

デメリット

1. 友だち追加は任意なので必ず登録されるわけではない

ボタンを設置しても、お客様が必ず友だち追加してくれるわけではありません。見出しの文言や特典の有無で追加率は大きく変わります。

2. LINE 公式アカウントの準備が別途必要

サンクスページにボタンを置くだけでは完結しません。事前に LINE 公式アカウントを開設し、友だち追加用の URL を取得しておく必要があります。

3. 過度な誘導は離脱を招く可能性がある

サンクスページに情報を詰め込みすぎると、かえってお客様の体験を損ねます。LINE 友だち追加に絞り、シンプルに見せることが大切です。

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

サンクスページに LINE 友だち追加 ボタンを設置する 2 つの方法を比較してみましょう。

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

チェックアウト UI 拡張やテーマのコードを直接編集して実装する方法です。

メリット

デザインや動作を細かく自由にカスタマイズできる
アプリの月額費用がかからない

デメリット

HTML / CSS / JavaScript やチェックアウト拡張の知識が必要
Shopify のアップデートで動かなくなるリスクがあり、保守の手間がかかる
実装ミスがチェックアウト全体に影響する可能性がある

アプリを導入する方法

Shopify アプリストアのアプリをインストールしてノーコードで設定する方法です。

メリット

コーディング不要で、誰でも短時間で設置できる
管理画面から見出しや画像をいつでも変更できる
アプリ提供者がメンテナンスするため、保守の心配が少ない

デメリット

月額費用がかかる場合がある
アプリが対応している範囲でのカスタマイズに限られる

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

これから サンクスページ に LINE 友だち追加 ボタンを設置する方には、まずはアプリで小さく試すことをおすすめします。コード編集は自由度が高い反面、保守コストやリスクが大きく、効果が出るかどうか分からない段階で投資するには負担が大きいためです。

アプリなら数百円程度の月額費用と短時間の設定だけで導入でき、効果を見ながら運用できます。本格的にカスタマイズしたくなったタイミングで、改めてコード実装を検討すれば十分です。次の章から、おすすめアプリを使った具体的な導入手順を紹介します。

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

ここからは、実際に「シンプルサンクスページLINE友だち追加」をインストールする手順を、画像付きで解説します。

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

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

Shopify管理画面の設定をクリック

ステップ2：Shopify App Store へ移動する

「アプリと販売チャネル」から Shopify App Store へ移動します。

Shopify App Storeへ移動

ステップ3：アプリを検索してクリックする

検索窓に「シンプルサンクスページLINE友だち追加」と入力し、表示されたアプリをクリックします。

アプリを検索してクリック

ステップ4：インストールボタンをクリックする

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

インストールボタンをクリック

ステップ5：権限を確認してインストールする

アプリが必要とする権限を確認し、インストールを進めます。

権限確認画面

ステップ6：アプリ管理画面が開く

インストールが完了すると、アプリの管理画面が表示されます。これでインストールは完了です。

アプリ管理画面

アプリをサンクスページに追加（有効化）

インストールが完了したら、次はサンクスページにアプリのブロックを追加して有効化します。

ステップ1：「サンクスページをプレビュー」を開く

チェックアウトエディタから「サンクスページをプレビュー」を開きます。実際の注文完了ページのレイアウトを見ながら編集できます。

サンクスページをプレビュー

ステップ2：アプリアイコンをクリックする

左側のメニューからアプリアイコンをクリックします。

アプリアイコンをクリック

ステップ3：「＋アイコン」でブロックを追加する

表示したい位置の「＋アイコン」をクリックして、LINE 友だち追加ブロックを追加します。

＋アイコンをクリック

ステップ4：「保存」をクリックする

設定が完了したら、忘れずに「保存」をクリックします。これでサンクスページに LINE 友だち追加 ボタンが表示されるようになります。

保存をクリック

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

ブロックを追加したら、各設定項目を調整して、自分のストアに合った表示にしましょう。設定項目は大きく「LINE」「見出し」「画像」の 3 つに分かれています。

LINE友だち追加URLの設定

最も重要なのが、LINE 友だち追加 URL（line_add_friend_url）の設定です。これは必須項目で、LINE 公式アカウントの友だち追加用 URL を入力します。お客様がボタンをタップすると、ここで指定した URL に遷移します。LINE 公式アカウントの管理画面で取得できる「友だち追加用 URL」を貼り付けてください。

LINE設定欄

見出しの設定

見出しテキスト（heading_text）では、ボタンの上に表示する文言を自由に設定できます。「LINE で最新情報をお届けします」「友だち追加で限定クーポンをプレゼント」など、お客様が追加したくなる文言を入れましょう。見出し位置（heading_alignment）では、左寄せ（left）・中央寄せ（center）・右寄せ（right）から選べます。

見出し設定欄

画像の設定（8種類のバリエーション）

画像バリエーション（image_variant）では、LINE 公式の 8 種類の画像から選択できます。

ja-wide-default（日本語横長）: 日本語ストアの定番。「友だち追加」の文字入りで分かりやすい
en-wide-default（英語横長）: 英語ストア向け
kr-wide-default（韓国語横長）: 韓国語ストア向け
ch-wide-default（中国語横長）: 中国語ストア向け
square-default（正方形）: コンパクトに置きたいときに
square-grey（正方形グレー）: 落ち着いたトーンのデザインに
round-default（丸型）: アイコン的に置きたいときに
round-grey（丸型グレー）: グレー基調のデザインに

さらに画像横幅（image_width）は 20〜300px の範囲で調整でき、画像位置（image_alignment）は左寄せ・中央寄せ・右寄せから選べます。

画像設定欄

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

設定に迷ったときのために、すぐ使えるおすすめの設定例を紹介します。

日本語ストアの定番設定

画像バリエーション: ja-wide-default（日本語横長）
見出しテキスト: 「LINE 友だち追加で最新情報をお届けします」
見出し位置: center（中央寄せ）
画像位置: center（中央寄せ）
画像横幅: 200px

最もオーソドックスな設定です。日本語横長の画像は「友だち追加」の文字が入っているため、お客様が一目で何をするボタンか理解できます。

特典で追加率を高めたい場合

画像バリエーション: ja-wide-default（日本語横長）
見出しテキスト: 「友だち追加で次回使える 10%OFF クーポンをプレゼント」
見出し位置: center（中央寄せ）
画像横幅: 220px

クーポンや特典を見出しで明示すると、追加率が大きく向上します。

シンプルにまとめたい場合

画像バリエーション: round-default（丸型）または square-default（正方形）
見出しテキスト: 「LINE で友だち追加」
画像横幅: 100px

サンクスページをすっきり見せたいときは、丸型・正方形の画像を小さめに配置すると、デザインの邪魔をしません。

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

アプリを使わず、自分でコードを書いて実装したい方向けに、実装の流れとサンプルコードを紹介します。なお、サンクスページ（チェックアウト後）は Shopify の仕様上、通常のテーマファイル編集だけでは触れない領域があり、本来はチェックアウト UI 拡張を使うのが正攻法です。ここでは考え方を理解していただくためのサンプルとして掲載します。

実装の流れ

LINE 公式アカウントの友だち追加用 URL を取得する
サンクスページに表示する HTML（ボタン）を用意する
CSS で見た目を整える
必要に応じて JavaScript でクリック計測などを追加する
表示崩れがないか、実際の注文完了ページで確認する

HTML を追加

<div class="thanks-line-area">
  <p class="thanks-line-heading">LINE 友だち追加で最新情報をお届けします</p>
  <a class="thanks-line-button" href="https://lin.ee/xxxxxxx" target="_blank" rel="noopener">
    <img
      src="https://example.com/line-add-friend.png"
      alt="LINE友だち追加"
      width="200"
    />
  </a>
</div>

href には、取得した LINE 友だち追加用 URL を入れます。img の src には LINE 公式が配布している友だち追加ボタン画像の URL を指定します。

CSS を追加

.thanks-line-area {
  margin: 24px 0;
  text-align: center;
}

.thanks-line-heading {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
}

.thanks-line-button img {
  max-width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}

.thanks-line-button img:hover {
  opacity: 0.85;
}

JavaScript を追加

クリック数を計測したい場合は、次のように簡単なイベントを追加できます。

document.addEventListener('DOMContentLoaded', function () {
  var button = document.querySelector('.thanks-line-button');
  if (!button) return;

  button.addEventListener('click', function () {
    if (window.gtag) {
      window.gtag('event', 'line_add_friend_click', {
        event_category: 'thanks_page',
        event_label: 'line',
      });
    }
  });
});

コード実装の注意点

サンクスページ（チェックアウト後）は Shopify の保護領域であり、プランや実装方法によっては自由に編集できません。無理に編集するとチェックアウト全体に影響する恐れがあります。
Shopify のアップデートにより、独自実装が動かなくなる可能性があります。定期的な動作確認が必要です。
LINE 公式のボタン画像を使う場合は、LINE のガイドラインに従って利用してください。
これらの理由から、特別な事情がない限りはアプリの導入をおすすめします。