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 友だち追加 ボタンを設置する方には、まずはアプリで小さく試すことをおすすめします。コード編集は自由度が高い反面、保守コストやリスクが大きく、効果が出るかどうか分からない段階で投資するには負担が大きいためです。
アプリなら数百円程度の月額費用と短時間の設定だけで導入でき、効果を見ながら運用できます。本格的にカスタマイズしたくなったタイミングで、改めてコード実装を検討すれば十分です。次の章から、おすすめアプリを使った具体的な導入手順を紹介します。
おすすめ Shopify アプリ「シンプルサンクスページLINE友だち追加」紹介
「シンプルサンクスページLINE友だち追加」は、Shopify の サンクスページ に LINE 公式アカウントの 友だち追加 ボタンをノーコードで設置できる日本製アプリです。以下の Shopify 公式のアプリストアからインストールできます。
アプリの基本情報
- アプリ名: シンプルサンクスページLINE友だち追加
- 料金: Basic Plan 月額 $1.99（年払いは $19.99/年で実質2ヶ月分無料）、7 日間の無料体験あり
- 言語: 日本語対応
- カテゴリー: バッジとアイコン / チェックアウト
- 特徴: 購入完了後のサンクスページに LINE 公式アカウントの友だち追加ボタンを設置できる。LINE 公式の 8 種類の画像から選択可能。見出しテキスト・画像サイズ・表示位置をノーコードでカスタマイズでき、ガイド付きで簡単に導入できる。
できること
このアプリでできることを、機能ごとに見ていきましょう。
サンクスページにLINE友だち追加ボタンを設置
購入完了後のサンクスページに、LINE 公式アカウントへの 友だち追加 ボタンを設置できます。チェックアウトエディタからブロックを追加するだけで、すべての注文完了ページに自動で表示されます。
LINE公式の8種類の画像から選べる
ボタンに使用する画像は、LINE 公式が用意している 8 種類のバリエーションから選択できます。横長タイプ（日本語・英語・韓国語・中国語）、正方形（通常・グレー）、丸型（通常・グレー）があり、ストアのデザインに合わせて最適なものを選べます。
ガイド付きで簡単に初期設定できる
初めての方でも迷わないように、初期設定のガイド画面が用意されています。手順に沿って進めるだけで、LINE 友だち追加ボタンの設置が完了します。
アプリのインストール手順
ここからは、実際に「シンプルサンクスページLINE友だち追加」をインストールする手順を、画像付きで解説します。
ステップ1：管理画面の「設定」を開く
Shopify の管理画面にログインし、左下の「設定」をクリックします。
ステップ2：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」を貼り付けてください。
見出しの設定
見出しテキスト（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
サンクスページをすっきり見せたいときは、丸型・正方形の画像を小さめに配置すると、デザインの邪魔をしません。
関連施策との組み合わせ
サンクスページは LINE 友だち追加 だけでなく、さまざまな施策を組み合わせられる場所です。LINE 友だち追加を軸にしつつ、他の施策と組み合わせることで、サンクスページの価値をさらに高められます。
SNSアイコンの表示と組み合わせる
LINE だけでなく、Instagram や X（旧 Twitter）などの SNS アカウントへの導線も用意しておくと、お客様のよく使うプラットフォームでつながれます。サンクスページに SNS アイコンを表示するアプリと併用すれば、フォロワーと友だちの両方を効率よく増やせます。ただし導線を増やしすぎると分散するため、メインを LINE 友だち追加に据えるのがおすすめです。
レビュー依頼と組み合わせる
購入直後の満足度が高いタイミングは、レビュー依頼にも最適です。「商品が届いたらレビューを書いてくださいね」という案内とあわせて LINE 友だち追加を促すと、レビュー収集と友だち獲得を同時に進められます。
アップセル・クロスセルと組み合わせる
サンクスページにアップセルやクロスセルのオファーを表示し、その下に LINE 友だち追加ボタンを置く構成も効果的です。追加購入を促しつつ、購入につながらなかったお客様も友だち追加で関係を継続できます。ただし情報量が多くなりすぎないよう、優先順位をつけて配置しましょう。
クーポン配布と組み合わせる
LINE 友だち追加の特典として、次回使えるクーポンを配布する施策は鉄板です。サンクスページで「友だち追加でクーポンプレゼント」と訴求し、LINE 公式アカウント側で自動的にクーポンを配信すれば、リピート率の向上に直結します。
テーマのコード編集で実装する場合のサンプルコード
アプリを使わず、自分でコードを書いて実装したい方向けに、実装の流れとサンプルコードを紹介します。なお、サンクスページ（チェックアウト後）は 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 のガイドラインに従って利用してください。
- これらの理由から、特別な事情がない限りはアプリの導入をおすすめします。
運用のコツ
サンクスページに LINE 友だち追加 ボタンを設置したあとは、運用しながら改善していくことで成果が高まります。
- 見出しの文言を定期的に見直す: 「友だち追加で限定クーポン」など、特典を明示すると追加率が上がります。文言を変えて反応の違いを比べてみましょう。
- 特典を用意する: 友だち追加のメリットがないと、お客様は行動しません。クーポンや限定情報など、追加する理由を用意しましょう。
- LINE 公式アカウント側の自動応答を整える: 友だち追加直後に自動でメッセージやクーポンを送ると、満足度が高まりブロック率を下げられます。
- 追加率を計測する: 友だち追加数の推移を追い、施策の効果を確認しましょう。
- シンプルさを保つ: サンクスページに情報を詰め込みすぎず、LINE 友だち追加を主役にすることで、行動につながりやすくなります。
よくある質問
Q1. サンクスページとはどのページのことですか？
A. サンクスページは、お客様が決済を完了した直後に表示される「注文完了ページ（Thank you ページ）」のことです。「ご注文ありがとうございました」と表示されるページで、購入後の最初の接点になります。
Q2. LINE 公式アカウントを持っていなくても使えますか？
A. ボタンの遷移先として LINE 友だち追加用 URL が必要なため、事前に LINE 公式アカウントを開設し、友だち追加用 URL を取得しておく必要があります。アカウントの開設自体は無料で行えます。
Q3. プログラミングの知識がなくても設置できますか？
A. 「シンプルサンクスページLINE友だち追加」を使えば、コーディング不要で設置できます。チェックアウトエディタからブロックを追加し、URL や見出しを入力するだけです。
Q4. ボタンのデザインは変更できますか？
A. LINE 公式の 8 種類の画像（横長・正方形・丸型など）から選べます。さらに画像の横幅や表示位置、見出しの文言・位置も調整できます。
Q5. すべての注文完了ページに表示されますか？
A. はい。一度ブロックを追加して保存すれば、以降のすべての注文完了ページに自動で表示されます。注文ごとに設定する必要はありません。
Q6. 無料で試せますか？
A. 「シンプルサンクスページLINE友だち追加」には 7 日間の無料体験があります。まずは試してみて、効果を確かめてから継続利用を判断できます。
まとめ
この記事では、Shopify の サンクスページ に LINE の 友だち追加 ボタンを設置する方法を解説しました。要点を整理します。
- サンクスページ（注文完了ページ）への LINE 友だち追加ボタンの設置は、購入完了直後という最も熱量が高いタイミングでお客様とつながれる効果的な施策
- 実現方法は「テーマのコード編集」と「アプリ導入」の 2 つ。保守やリスクを考えると、最初はアプリで小さく試すのがおすすめ
- 「シンプルサンクスページLINE友だち追加」なら、ノーコードで短時間に設置でき、8 種類の画像や見出しを自由にカスタマイズできる
- 見出しの文言や特典を工夫し、SNS・レビュー・アップセルなどの関連施策と組み合わせることで、サンクスページの価値をさらに高められる
購入後のお客様とのつながりを強化したい方は、ぜひ一度試してみてください。
参考記事
今回は、以下の記事を参考にしています。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
