ShopifyでLINE公式アカウントの友だち追加ボタンを設置する方法を2パターンご紹介します。
1つ目の方法は、弊社が提供するShopifyアプリPafit Social Media Iconsを利用する方法です。
2つ目の方法は、Shopifyストアのテーマのコードを編集する方法です。
Shopifyアプリを利用する方法
弊社が提供するShopifyアプリPafit Social Media Iconsでは、LINE公式アカウントのアイコンを画面右下に固定表示することができます。
そのため、LINE公式アカウントでチャットサポートを行うためにLINEアイコンをチャットボットのリンク風に配置することができます。
また、TwitterやInstagramなどのSNSアイコンを表示することもでき、SNSのフォロワーを増やしたい際にもおすすめです。
ノーコードで簡単に切り替えられるため、様々なSNSリンクを設置したい方におすすめです。
詳しくは以下の記事をご覧ください。
Shopifyストアのテーマのコードを編集する方法
Shopifyアプリを利用せずにLINE公式アカウントの友だち追加ボタンのみを追加したい場合、以下の手順で設定を行います。
※テーマのカスタマイズからコードを編集するため、設定ミスなどにご注意下さい。
友だち追加ボタンのコードをコピー
LINE Official Account Managerを開きます。
また、「ホーム」のサイドバーの下にある「友だち追加ガイド」をクリックします。
また、「ボタンを作成」をクリックします。
「コピー」をクリックします。
これで友だち追加ボタンのコードをコピーすることができました。
Shopifyのテーマを編集
次にShopifyのテーマにLINEの友だち追加ボタンを埋め込みます。
Shopifyの管理画面から「テーマのカスタマイズ」を開きます。
任意の場所に「セクションを追加」から「カスタマイズされたLiquid」を追加します。
先程コピーしたコードを貼り付けつつ、以下のHTML要素で囲います。
<div style="text-align: center">
先程コピーしたコード
</div>
コードの完成形の例
※以下のコードはサンプルリンクになっているため、ご自身の公式アカウントのリンクをお使い下さい。
<div style="text-align: center">
<a href="https://lin.ee/LINE公式アカウントの短縮URL">
<img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="36" border="0">
</a>
</div>以下のように友だち追加ボタンが中央に表示されていることを確認し、「保存」をクリックします。
以上で設定完了となります。
LINEアイコンを画面右下に固定したい場合などはPafit Social Media Iconsをぜひご活用下さい。
Pafit Social Media Iconsについて
Pafit株式会社ではShopifyストアにLINE公式アカウントなどのチャットサービス、SNSへのリンクを設置するためのアプリを提供しています。
フリートライアルを提供していますので、ぜひお試し下さい。
Pafit Social Media Iconsのメリット
- SNSのチャットでカスタマーサポートを実現
- ストア訪問者様が使い慣れたSNSでお問い合わせ可能
- SNSアイコンとリンクをノーコードで設置可能
