ShopifyアプリでLINEアイコンをストアに簡単に設置するアプリの解説してみた

# はじめに
お客様のShopify構築を行った際に、そこそこ使える日本製のShopifyアプリを見つけたので、備忘録として簡単な使い方を記載しておきます。

**LINE誘導ボタンらくらく設置｜リテリア LINE誘導**

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

こちらの記事は、以下の記事を参考に作成しています。

[【Shopifyアプリ調査】LINE誘導ボタンらくらく設置｜リテリア LINE誘導を導入してみた！](https://qiita.com/kawa_shirow/items/976ca7d3339e6393d7f0)

[ShopifyでLINE誘導ボタン（アイコン）を簡単に設置できる安価なアプリについて【備忘録】](https://qiita.com/shitron/items/53db8e74cb588bb9c613)

それでは、ShopifyアプリでLINEアイコンをストアに簡単に設置するアプリの解説を行っていきたいと思います。

## 導入の経緯
ある案件で、お客様から「Shopifyストアの右下にラインアイコンを表示して欲しい」というご要望を頂きました。というか、この要望は割りと頂きます。

ストアの右下に、こういうアイコンを設定して欲しい、という要望です。

![](https://storage.googleapis.com/zenn-user-upload/fdb6da76b1d7-20220516.png)

普段はコーディングで対応しているのですが、安価で良さげなアプリがあったので、アプリを導入して対応しました。カスタマイズ性も高く、お客さんの細かい要望にも対応することができています。

それが、以下の**LINE誘導ボタンらくらく設置｜リテリア LINE誘導**というアプリです。こちらのアプリを導入すると、右下にLINE誘導アイコンを簡単に設置することができるようになります。

アプリの月額は3.99ドルです。導入するかどうか微妙なラインですが、それほど高額では無いのでお客さんに提案しました。お客さん自身で自由にカスタマイズできる、というのは魅力的ですよね。

それでは実際に、アプリの解説を行っていきたいと思います。

# LINE誘導ボタンらくらく設置｜リテリア LINE誘導の使い方について
それでは実際に、使い方を確認していきましょう。

## LINE誘導ボタンらくらく設置｜リテリア LINE誘導のインストール
まずは、アプリのインストールを行っていきます。

ストアの管理画面の管理から、ストアをカスタマイズに移動して、検索窓に「LINE誘導ボタンらくらく設置｜リテリア LINE誘導」と入力しましょう。そうすると、以下の画面を見つけることができるので、**アプリを追加する**より、アプリのインストールを行って下さい。

![](https://storage.googleapis.com/zenn-user-upload/f03308480597-20220516.png)

もし見つけることができなかった場合には、以下のURLからインストールを行って下さい。

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

それでは次に、アプリの機能をざっくりと解説していきます。

## アプリの機能をざっくり解説
それでは、アプリの機能をざっくりと解説していきます。

基本的にこちらのアプリは、以下の画像が示しているように**LINE誘導ボタンをお客さんがクリクして、LINE公式アカウントに遷移させる**というだけです。

LINE公式アカウントは別途作成しておく必要があります。

![](https://storage.googleapis.com/zenn-user-upload/d8da69ca2e7b-20220516.png)

あらゆるページにLINE誘導アイコンが埋め込み可能なので、お好きなページに配置することができます。

![](https://storage.googleapis.com/zenn-user-upload/2245459fabc7-20220516.png)

また、上記のようにカスタマイズ性も高く、アイコンやテキストの大きさ、吹き出しの大きさや色なども細かくカスタマイズすることができます。

PCとモバイルで、以下のようなデザインになっています。

![](https://storage.googleapis.com/zenn-user-upload/9edfadf48037-20220516.png)

それでは実際に、アプリのインストール方法などを見ていきましょう。

## アプリの設定
こちらのアプリの管理画面は、以下のようになっています。

![](https://storage.googleapis.com/zenn-user-upload/d626101deb8b-20220516.png)

それでは、アプリの設定を行っていきましょう。

まず、**テーマに反映**という項目の設定を行い、任意のテーマにこちらのアプリブロックを追加します。

![](https://storage.googleapis.com/zenn-user-upload/3108e7c768af-20220516.png)

反映させるテーマを設定したら、**有効化**をクリックすることで、LINE誘導アイコンがテーマ内に反映されます。有効化が完了すると、**アプリを有効化しました**という表示が出力されます。

その後は、以下の**プレビュー**ボタンをクリックして、ストアのカスタマイズ画面に移動しましょう。

## 見た目のカスタマイズ
ストアのカスタマイズ画面に移動した後は、見た目のカスタマイズを行います。

![](https://storage.googleapis.com/zenn-user-upload/c46a4c206870-20220516.png)

↑の画像の右側の項目をカスタマイズできます。

具体的には、**アイコンの位置**や、**アイコンと画面の端との距離**、**アイコンと吹き出しとの間の距離**などをカスタマイズすることができます。

LINEアイコンは著作権がきっかりしたものがネットに上がっているので、そちらを好きに使用して頂く感じです。**アイコンサイズ**や**吹き出しの背景色**、**吹き出しの文字色**等も設定できるため、かなり理想に近いLINE誘導アイコンを作成することができます。

## 終わりに
ここまでで、ShopifyでLINEアイコンが表示できるアプリである、**LINE誘導ボタンらくらく設置｜リテリア LINE誘導**の解説は終わりです。

アプリストアは以下になります。

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

ここまで読んで頂き、ありがとうございました。

以下のアプリの紹介を行っております。参考にして頂ければ幸いです。


また、別のアプリの調査記事も載せているので、よろしければご覧下さい。

[【Shopifyアプリ】ランキング形式に表示できるアプリを導入してみた！](https://qiita.com/kageyama_takashi/items/e163b6dc21b545cf6665)

[【Shopifyアプリ】商品ページに追従購入ボタンを設置できるアプリが結構良い](https://qiita.com/kageyama_takashi/items/40cc9c95bbdeaddc62e9)

[【Shopifyアプリ】FAQ（よくある質問）を簡単に導入できるアプリ見つけた！](https://qiita.com/kageyama_takashi/items/52242de7a0291256716b)

[Shopifyでボトムナビゲーションを挿入できるアプリを試してみた](https://qiita.com/kageyama_takashi/items/4475c1c5c83c3886edfe)


## 参考記事

[【Shopifyアプリ調査】LINE誘導ボタンらくらく設置｜リテリア LINE誘導を導入してみた！](https://qiita.com/kawa_shirow/items/976ca7d3339e6393d7f0)

[ShopifyでLINE誘導ボタン（アイコン）を簡単に設置できる安価なアプリについて【備忘録】](https://qiita.com/shitron/items/53db8e74cb588bb9c613)