【shopify】LINE公式アカウントの友だち追加ボタンを設置する方法!

記事内に広告が含まれています。

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の「友だち追加」ボタンが表示されるはずです。

コメント

タイトルとURLをコピーしました