ShopifyでLINE誘導ボタン（アイコン）を簡単に設置できる安価なアプリについて【備忘録】

## はじめに
ShopifyでLINEへの誘導ボタン（友達追加ボタン）を簡単に設置できるアプリがあったので、使い方を試した際の記録を、備忘録として残しておきたいと思います。

<strong>LINE誘導ボタン（友達追加ボタン）</strong>とは、以下の右下にあるようなボタンのことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/626effc1-a081-78c0-ca86-6175b572f8fd.png)

今回見ていくのは以下のアプリになります。

<strong>LINE誘導ボタンらくらく設置｜リテリア LINE誘導</strong>

https://apps.shopify.com/reterior-line-icon-app?locale=ja


## 導入のきっかけ
ECとLINEは非常に相性がよいとされています。国内でのアクティブユーザー数が8,600万人、そのうち85％が毎日利用しているLINEは、利用者の年齢・性別・職業にも偏りがありません。日本の人口の約68％がまんべんなく利用しています。



一般的に、電子メールの開封率は15％～25％が目安とされているのに対し、LINEの開封率は約70％です。自社ECのLINE公式アカウントを友達登録してもらい、魅力的な内容のLINEメッセージを心がければ、そもそも開封率が高いため内容がユーザーの目にとまる可能性も高くなります。

参考：[LINE「LINE Business Guide（Summary）」](https://www.linebiz.com/sites/default/files/media/jp/download/LINE%20Business%20Guide_202101-06_summary_v1.pdf)
参考：[BENCHMARK「業種別・地域別（国別）平均メール開封率レポート【2020年版】」](https://www.benchmarkemail.com/jp/email-marketing-benchmarks/)

こうした点だけでも、ECにおいて顧客のファン化を考える上でLINEを利用しない手はありません。周りからも、「ShopifyのストアにLINEボタンを設置したい」という声を実際、かなり聞きます。

なお、ShopifyではLINEなどのSNSへ誘導するボタンを標準機能で設置することも可能です。しかし、導入後に誰もが自由にカスタマイズできるかというと、難しいケースも多くあります。

そこで今回は、ノーコードで利用でき、導入後も多くの人が簡単に操作できそうな<strong>LINE誘導ボタンらくらく設置｜リテリア LINE誘導</strong>を試しに使ってみました。

https://apps.shopify.com/reterior-line-icon-app?locale=ja

アプリの特長は以下の通りです。

- アプリブロックを追加するだけでノーコードで利用できる
- Shopify Online 2.0対応のため、テーマ内のコードやほかのアプリとの干渉が少ない
- ボタンのアイコン画像や位置、色、余白などのカスタマイズがしやすい

月額料金は<strong>3.99ドル</strong>。比較的導入しやすい金額かなと思います。現時点では、7日間の無料期間もあるようです。また、開発アカウントなら無料で使えます。

## 「LINE誘導ボタンらくらく設置｜リテリア LINE誘導」の使い方
それではさっそく、基本的な使い方を解説していきたいと思います。

### 「LINE誘導ボタンらくらく設置｜リテリア LINE誘導」のインストール方法
Shopifyのストア管理画面で<strong>アプリ管理</strong>を選択し、右上の<strong>ストアをカスタマイズ</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/dacdbc12-2e41-ec6b-2741-ed32898d4068.png)

検索ボックスに<strong>LINE誘導ボタンらくらく設置｜リテリア LINE誘導</strong>と入力し、Enterキーを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/00ad2c10-b9a3-07f6-941d-a15d17209d1a.png)

該当のアプリをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/386daefb-7e1d-4351-cca8-1e391cd984c2.png)

<strong>アプリを追加する</strong>をクリックします。なお、<strong>デモストアを表示する</strong>をクリックすると、デモ画面を閲覧できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/417a386b-4706-986b-9cc5-7f433645a15c.png)

内容を確認したら、右上の<strong>アプリをインストール</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/50a4433a-e410-4bf8-b2bf-d790c196b6a0.png)

インストールが終わると、以下の初期設定画面に遷移します。<strong>テーマに反映</strong>の項目でアプリをインストールするテーマを選び、<strong>有効化</strong>をクリックしましょう。

ここでは「Studio（公開中のテーマ）」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/3c39edbd-a3a0-e940-4760-5e0a829cabf7.png)

以下のように<strong>アプリを有効化しました</strong>のポップアップが出れば、設定までが完了したことになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/aa370d50-1252-d33c-09c8-905b609c04aa.png)

そのまま、有効化ボタンのとなりにある<strong>プレビュー</strong>ボタンをクリックしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/6984c6ad-b26e-f0da-f1a6-ec787cd42a55.png)

<strong>LINEアイコン</strong>がオン（青色）になっていればOKです。ここでは画面左側で、LINEアイコンがオンになっているのが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/572ff2d0-bbd1-6b0e-f8c9-9ba115427911.png)


### ストアにLINEアイコンを設置する方法
ここからは、実際にカスタマイズをして、ShopifyのストアにLINEアイコンを設置してみましょう。

以下のデモ画面のようにLINEアイコンを設置できます（画面右下）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/626effc1-a081-78c0-ca86-6175b572f8fd.png)

まずは、<strong>テーマ設定<strong>の<strong>アプリを埋め込む</strong>をクリックして以下の画面を出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/3726e6d3-8b90-4269-197e-afc9a433d10d.png)

<strong>LINEアイコン</strong>の文字の左にある▸をクリックすると、以下のように<strong>基本設定</strong>の項目が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/fcbd3ba9-0bd2-8647-5a7d-fe976eaef1d9.png)

中ほどまでスクロールすると<strong>LINE画像</strong>を選択するところがあるので、設定したい画像をアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/e95fa8fb-83a3-8c9b-5d3f-1553c8d5a077.png)

ここではLINE公式アイコンを使用しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/75a1b6fe-48fc-57c6-6c01-4aabfaf9e48a.png)

さらに下までスクロールすると、<strong>テキスト</strong>を入力するボックスがあるので、表示したい文言を入力しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/7f10c2df-7d13-9e6e-f716-1499606e99d2.png)

こんな感じに表示されました（画面右下）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/965bd453-cfd9-445c-1a28-b0a3f857bcfc.png)

さらに、<strong>吹き出しの背景色やテキストの色、フォントサイズや吹き出しの位置</strong>などを微調整したところ、以下のようなLINE誘導ボタンが完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/c18e3d70-c02e-cfc7-2a53-c0c09de61717.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/fa415786-ce22-3567-2bce-4094e5d0728f.png)

そのほか、<strong>アイコンと吹き出しの間隔や配置</strong>なども調整できます。個々の理想に近い形でLINE誘導ボタンを作成できそうです。

なお、ストアをスクロールしても、LINE誘導ボタンはもちろん、常に画面上に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/313066a2-b7e4-c23a-2d56-e120e5270177.png)

ここまでできたら、<strong>LINEアカウントのURL</strong>のボックスに、自社のLINE公式アカウントのリンクを貼り付けましょう。これでShopifyのストアからLINEへ誘導できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/8bb3fe90-c36d-cf85-ce15-020300c7fa99.png)

## 最後に
ここまでで、ShopifyでLINE誘導ボタンを簡単に設置できる<strong>LINE誘導ボタンらくらく設置｜リテリア LINE誘導</strong>の使い方の解説は終わりです。

実際に試してみて、直感的に操作できるところと、導入しやすい価格が好印象なアプリでした。

アプリストアは以下の通りです。興味のある方はインストールしてみてください。

<strong>LINE誘導ボタンらくらく設置｜リテリア LINE誘導</strong>

https://apps.shopify.com/reterior-line-icon-app?locale=ja

ここまでお読みいただき、ありがとうございました。