サンクスページに情報を追加する方法

ここではサンクスページにLINEのQRコードとサンクスメッセージを追加する方法と、エラーが起こったときの原因を紹介します。

 

・準備

まず最初に、LINEオフィシャルに登録してアカウントを作りましょう。
アカウント作成後、LINEアカウントの友だち追加用のQRコードとURLを取得しておきます。

決済後にサンクスページが表示されるのですが、

スマホから購入の場合、スマホ上にQRコードが表示されるだけだと、スマホのカメラからQRコードを読み取れず、公式LINEへの動線が不十分。そのため、URLリンクも共に設置するため、URLリンクも取得しておきます。

取得の方法は以下、

LINE公式アカウントに入り、「ホーム」⇒「友だち追加ガイド」から「URLを作成」と「友だち追加QRコードを作成」からそれぞれ取得。
URLはどこかにメモしておきましょう。

 

次にShopify管理画面から、「コンテツ」⇒「ファイル」⇒「ファイルをアップロード」からQRコードの画像をアップロードします。
アップロード後、QRコードの画像右側の「リンク」をクリックし、QRコード画像が置いてある場所のリンクを取得し、こちらもどこかにメモをしておきます。

これで準備は完了です。

・サンクスページにLINEオフィシャルの友だち追加QRコード・URL、メッセージを追加

次に、サンクスページに追加をしていきます。

まずは管理画面左下の「設定」をクリック。

次に「チェックアウト」をクリックし、下の方へ移動。

「追加スクリプト」という欄があるので、以下のコードを記載します。

 

 

コード3行目のaタグ内のhrefに、先程メモをしておいた公式LINEのURLを記載してください。

コード5行目の imgタグ内のsrcに、先程メモをしておいたQRコードのリンクを記載してください。

styleで書かれた部分は、ご自分でお好きなように設定していただいて構いません。

 

ここで、私はエラーが出て、LINEのQRコードとサンクスメッセージが表示されませんでした。

エラーの原因は、brタグの後にしてしまった「enterでの改行」でした。
改行はシングルクォーテーション（''）で閉じた後のカンマ（,）の後しかしてはいけないんですね。
こんなことでつまずいてました。

 

・サンクスページに表示されるか確認

最後は確認をしましょう。

確認をするには、実際にデモで注文を入れてみる、すでにお客さんが購入したことがあるのであればその注文の「注文状況ページを表示する」などで確認可能ですが、ここでは申し越し簡単な方法を紹介します。

まずは、管理画面から新しく注文を作っていきます。

管理画面の「注文監理」から商品と顧客（顧客情報はテスト用に作りましょう）を選び、下の方にある「支払いを回収」⇒「支払い済みとしてマーク」を選択し「保存」しましょう。

次に、

管理画面の「注文監理」から「その他の操作」⇒「注文状況ページを表示する」をクリック。

以下のような画面が現れます。

体裁が気に食わなければ、styleの部分を書き換えて調整しましょう！

 

これで、サンクスページから公式LINEへの動線が確保できました！

 

 

※2023年4月13日現在、サンクスページを細かくいじるには「checkout.liquid」ファイルのコードを書き換える必要がありますが、Shopify Plusプラン（月2,000USD~）に加入する必要があり、ほとんどのECサイトでは対象になりません。ここでは、Shopify管理画面からスクリプトを追加し、画像と文字を追加する方法をご紹介します。

※2024年8月13日に「checkout.liquid」は「Checkout Extensibility」に変更になるそうで、今後は設定が可能になっていくようです。