【Shopifyアプリ調査】LINE誘導ボタンらくらく設置｜リテリア LINE誘導を導入してみた！

## はじめに
こんにちは!
最近ショッピファイの構築していく際に色々なアプリを試していて、気になったアプリがあったので皆さんに共有していきたいと思います！
まず、タイトルなのですが、「LINE誘導ボタンらくらく設置｜リテリア LINE誘導」といって、アプリ内の好きなところにLINE誘導ボタン（友達追加ボタン）を埋めることができるアプリです！
アプリストアのリンクを掲載しておきますので、この記事を見て興味を持たれた方は調べてみてください！

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

## この記事の内容
* LINE誘導ボタンとは
* LINE誘導ボタンらくらく設置｜リテリア LINE誘導アプリの導入方法
* リテリアLINE誘導ボタンアプリを実装してみた
* 終わりに

## LINE誘導ボタンとは
LINE誘導ボタンらくらく設置アプリはshopifyストア内の好きなところにLINEアイコンを設置することができます。
これによって、ユーザーからの友達追加を促すことができます。
「ShopifyでLINE誘導ボタンを埋め込みたい...」
「ShopifyオンラインストアからLINEへの流入率を高めたい...」
「ShopifyオンラインストアとLINEを連携して、マーケティングを強化したい...」
などと悩んでいる方は以下より導入方法を解説していますので、最後まで読んでいただくと嬉しいです！

:::note info
今回はLINEアイコンでの実装ですが、実際には他のアプリのアイコンで導入したい方はそちらのアイコンを使用しても問題ないようです。
:::

実際に導入し実装した後はこのようなUIになっています。
![Screen Shot 2022-06-01 at 19.04.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/ca017e93-ccaf-8995-245d-51039516d68c.png)
※参照[デモストア](https://retetrior-line-icon-app.myshopify.com/)

## LINE誘導ボタンらくらく設置｜リテリア LINE誘導アプリの導入方法
それでは導入方法を解説していきます。
まずShopifyアプリストアで、「LINE誘導ボタンらくらく設置｜リテリア LINE誘導」と検索します。
そして赤く囲っているアプリをクリックします。
![Screen Shot 2022-06-01 at 19.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/f7b6d18e-4314-456e-fa9a-67bcc6b111dd.png)

アプリを追加するをクリックします。
![Screen Shot 2022-06-01 at 19.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/11cd9b26-848b-9776-7960-1621cfd311ae.png)

アプリをインストールするをクリックします。
![Screen Shot 2022-06-01 at 19.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/56b307e0-61e9-92a3-b581-f5febea89a85.png)

アプリをインストールするShopifyストアを選択します。
そして有効化をクリックして導入は完了です。
![Screen Shot 2022-06-01 at 19.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/1ae393c5-1d3b-ff95-28a6-bf589c5183d0.png)

では、実際に導入できているかを確認してみましょう。

ストアをカスタマイズしている画面の左下にテーマ設定があるのでこちらをクリックします。
![Screen Shot 2022-06-01 at 19.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/f7bc1db7-5d96-4427-b082-c3374a7ae43b.png)

すると右側にアプリを埋め込むというところがあるので、こちらをクリックします。
![Screen Shot 2022-06-01 at 19.24.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/8ce1c5e3-e41e-c294-d3a9-281d18b33a3a.png)

この場所が選択されていれば導入は成功しているということになります。
![Screen Shot 2022-06-01 at 19.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/6b92764d-46db-1515-e8af-720cc9e7467d.png)




## リテリアLINE誘導ボタンアプリを実装してみた
それではリテリアLINE誘導ボタンアプリの実装を解説していきます！
このshopifyアプリでは次のようなテーマ編集の設定ができます。
* LINEアイコンの位置調整
* LINEアイコンの画像
* LINEアイコンのサイズ
* 吹き出しのテキスト・背景色・padding・テキストサイズ
* LINEアイコンと吹き出しの間隔

順を追って解説していきます！
### LINEアイコンの画像
まずはLINEアイコンの画像を設置していきましょう！
画像はここで設定できます。
![Screen Shot 2022-06-02 at 17.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/b2a867b0-95d6-231e-9273-e80b78cb79c8.png)

LINEアイコンを設置した後はこのような画像になります。

![Screen Shot 2022-06-02 at 17.32.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/805d729e-de35-26bf-fe1f-fabcda03da7a.png)

### LINEアイコンの位置調整
LINEアイコンの位置を調整するにはここのスキーマを調整します。
デフォルトでは右下に設置されています。
画面の右端からの距離を調節したい場合はここを動かして調整します。
![Screen Shot 2022-06-03 at 16.19.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/68b7b906-8fa5-7186-7bd4-1518053bb256.png)

もし、画面の左下にLINEアイコンを設置したい場合はこちらのチェックボックスにチェックを入れます。
また画面の左端からの距離を調節したい場合はここを動かして調整します。
![Screen Shot 2022-06-03 at 16.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/51136bbe-b6c5-1768-2bc6-8e2b034d0054.png)


### アイコンのサイズ
このスキーマでアイコンのサイズを調整できます。
テキストが複数行に渡った場合などに調整すると良いでしょう。
![Screen Shot 2022-06-03 at 16.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/fe5f5286-a3e6-4d59-e5bc-1fd9b81f3376.png)



### 吹き出しのテキスト・背景色・テキスト色・パディング（上下左右）・テキストサイズ
文言周りの調整はここのスキーマで行うことができます。
例として、リテリアの[Shopifyデモストア](https://retetrior-line-icon-app.myshopify.com/)の文言や背景色、テキスト色などを参考にして実装してみるとこのようになります。
文言→リテリアLINEアイコン誘導の詳しい情報が欲しいあなたはこちらをクリック
テキスト色→#FFFFFF
背景色→#00B900
文言は1行での入力を基本としているため、改行したい場合は改行する場所にbrタグを入れてください。
![Screen Shot 2022-06-02 at 18.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/095faf20-8f5b-eddd-0530-2b0b2353e860.png)



### LINEアイコンの画像と吹き出しの距離
LINEアイコンとテキストとの距離を調整したい場合はここを動かして調整します。
![Screen Shot 2022-06-03 at 16.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/9945b5b5-3107-1fce-4d2c-1da944183b4b.png)




## 終わりに
ここまで読んでいただき誠にありがとうございます！
『LINE誘導ボタンらくらく設置｜リテリア LINE誘導』どうでしたでしょうか？
気になる方のために、リンクを載せておきますので、ご確認ください！
７日間の無料トライアル期間があるので、ストアに一度入れてみるのもいいと思います！

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