shopify で運用するサイトにLINEの友だち追加ボタンを設定する方法を解説します。
shopifyに友だち紹介ページを追加する
shopifyの管理画面から「オンラインストア」->「ページ」を選択します。
「ページを追加」ボタンを選択し、新しいページを作成します。
とりあえずタイトルだけ入力して保存ボタンを選択してください。
タイトルを「友だち紹介プログラム」と入力して保存すると下のように「友だち紹介プログラムを作成しました」といってくれます。
追加したページをカスタマイズする
shopifyの管理画面から「オンラインストア」->「テーマ」を選択します。
テーマの横に「カスタマイズ」ボタンがあるので選択します。
カスタマイズ画面の上部中央のプルダウンで編集するページを選択できます。
「ページ」->「デフォルトのページ」を選択すると、先ほど追加した「友だち紹介プログラム」が表示されます。
セクションを追加する
「友だち紹介プログラム」ページに「カスタムLiquid」セクションを追加します。
画面左側のツリーにある「セクションを追加」を選択します。続いて、「カスタムLiquid」を選択してください。
LINEの友だち追加ボタンを設置する
LINE公式アカウントは開設済みの前提で進めます。
LINE公式アカウントの友だち追加ボタンを取得する
LINE公式アカウントで「友だちを増やす」->「友だち追加ガイド」を選択してください。
「ボタンを作成」を選択してください。
ポップアップでコードが表示されるので、HTMLコードをコピーしてください。
shopify画面右側のカスタマイズLiquidの編集領域に先ほどコピーしたHTMLコードを貼り付けてください。
ただ、そのまま貼り付けると左側に寄って表示されてしまいます。
画面中央に表示させたいということで <div>タグで囲んで中央寄せして設置しました。
<div style="text-align:center">
<a href="https://lin.ee/8bKPNVG"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36" border="0"></a>
</div>正しく貼り付けられたら、下のようにLINEの「友だち追加」ボタンが表示されるはずです。
コメント