Shopifyでバナーを簡単に設置できるアプリについて【備忘録】

## はじめに
Shopifyのストアにリンク付き画像（バナー）を設置できる安価なアプリがあったので、使い方を備忘録として残してみます。

リンク付き画像（バナー）とは以下のようなものです。画像にリンクが設定してあり、クリックすると指定のURLに移動できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/6f7916af-4bf0-a908-03ad-64e1bcac457a.png)

解説していくのは以下のアプリになります。

<strong>らくらくバナー設置アプリ｜リテリア Banner</strong>

https://apps.shopify.com/banner-10?locale=ja&from=zenn

## 導入のきっかけ
Shopifyのストアにリンク付き画像（バナー）を設置する方法を検索していたところ、Shopifyヘルプセンターに以下のような回答がありました（以前のShopifyテーマ向けの回答ですが）。

- 一部のテーマにはバナー機能が組み込まれているので、バナー機能がある場合はテーマのドキュメントを参照してバナーを追加する
- テーマにバナー機能がない場合はバナーアプリをダウンロードして対応する

参考：[Shopifyヘルプセンター](https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/adding-an-announcement-banner)

Shopifyのストアにリンク付き画像（バナー）を設置する方法については、このほかにあまり情報が見つかりませんでした。

そんななか、簡単に使えそうな日本語のアプリ・<strong>らくらくバナー設置アプリ｜リテリア Banner</strong>を見つけたので試しに使ってみることにしました。

https://apps.shopify.com/banner-10?locale=ja&from=zenn

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

- ノーコードで簡単に使える
- 設定も簡単なシンプル設計
- Shopify Online Store 2.0完全対応で、既存のテーマやアプリとの干渉がない

コーディングの知識がまったく必要ないため、例えばShopifyアプリを初めて利用する人でも問題なく使えそうです。

月額料金も<strong>1.99ドル</strong>と気軽に導入できる金額です。また、現時点では7日間の無料体験もあります。

## 「らくらくバナー設置アプリ｜リテリア Banner」の使い方
それではここからは、アプリの基本的な使い方を解説していきたいと思います。

### 「らくらくバナー設置アプリ｜リテリア Banner」のインストール方法
まず、Shopifyのストア管理画面にある<strong>アプリ管理</strong>をクリックし、右上の<strong>ストアをカスタマイズ</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/0f36cf9f-09f4-d29b-e6b2-ef8c82c43dc5.png)

するとShopifyのアプリストアに移動するので、検索ボックスに<strong>らくらくバナー設置アプリ｜リテリア Banner</strong>と入力して検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/6c3424d8-3786-b67b-e61a-80647a7d2119.png)

該当のアプリをクリックします（ここでは2段目の真ん中に表示されています）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/0188b430-f6c5-39b3-7025-3dcace09e640.png)

<strong>アプリを追加する</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/98faa890-3660-e3e6-2755-0abd257bd356.png)

以下の画面になるので、内容を確認してから<strong>アプリをインストール</strong>をクリックしましょう。これでインストールが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/89212b6a-8a7d-0f4f-8d85-36494939a844.png)

次に設定を行ないます。<strong>テーマに反映</strong>の項目を確認しましょう。

<strong>アプリをインストールするテーマを選択</strong>の部分でアプリを適用したいテーマを選択し、<strong>有効化</strong>ボタンをクリックします。

ここでは<strong>Studio（公開中のテーマ）</strong>を選択して有効化します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/8817e204-71ad-1a2f-6f2f-98f18a53f467.png)

<strong>アプリを有効化しました</strong>というポップアップが出れば有効化は完了です。

そのまま、有効化ボタンの隣にある<strong>プレビュー</strong>ボタンをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/6e84c3b1-0e7b-3bf3-12a5-c35ac28a99ee.png)

ストアが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/7f68cdf1-9d59-b6fa-c587-561e2872973a.png)

そのまま下の方までスクロールすると、<strong>バナーのアプリボックス</strong>が追加されているのがわかります。

ボックスの左上にマウスのカーソルを移動すると、以下のように青色の<strong>Bannar</strong>の文字が出てくるのでクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/f893a6fc-c8f7-4c31-2abf-981385b8da79.png)

左側にアプリの<strong>基本設定</strong>の項目がでてきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/9f4593b2-92ae-be87-31a8-696e811ccc2d.png)

## ストアにリンク付き画像（バナー）を設置する方法
ここからは実際にリンク付き画像（バナー）をShopifyのストアに設置してみましょう。

<strong>リンク付き画像1</strong>の項目にある<strong>画像を選択</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/b723ad30-1bd3-2f96-565e-e436c88f7080.png)

すると以下の画面になるので、画像をアップロードするなどして用意し、<strong>選択する</strong>をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/3d1ce46f-c85c-74e6-4536-40650ca3f493.png)

こんな感じで表示されました。

なお、リンク付き画像（バナー）を表示する<strong>列（カラム）数は、スマホでは1列～3列、PCでは1列～5列まで</strong>指定可能です。以下は3列表示になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/94636260-e16b-f2dc-70f7-7709a659ead8.png)

リンク付き画像（バナー）の表示が5列までできるということで、<strong>画像の登録も5つまで</strong>できます。

試しに<strong>リンク付き画像2</strong>の項目に先ほどの要領で画像を登録してみると、以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/6339fcf5-4e53-0eee-1340-0a63b33f5227.png)

アプリボックス内の左から、リンク付き画像1・リンク付き画像2・リンク付き画像3と表示が対応しているので、バナーを設置したいところに画像を登録すればOKです。

また、列（カラム）数を5列表示に指定すると以下のようになります。アプリボックス内の左から、リンク付き画像1～5と表示が対応しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/586af926-20b5-c6f3-8b3b-9105be06de16.png)

最後に、それぞれのリンク付き画像に対して<strong>移動先のURLを入力</strong>すれば、リンク付き画像（バナー）の設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667143/230e452a-bb6e-81c7-f443-cd7ced38c779.png)

## 最後に
ここまでで、Shopifyのストアにリンク付き画像（バナー）を簡単に設置できる<strong>らくらくバナー設置アプリ｜リテリア Banner</strong>の使い方の解説は終わりです。

操作が簡単なので、Shopifyのアプリを使うのが初めてでも難なく利用できそうな印象でした。

アプリストアは以下の通りです。7日間は無料で利用できるので、興味のある方はインストールしてみてください。

<strong>らくらくバナー設置アプリ｜リテリア Banner</strong>

https://apps.shopify.com/banner-10?locale=ja&from=zenn

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