Shopifyでバナー（リンク付き画像）をらくらく設置できるアプリを解説

Shopifyでオンラインストアを運営している方の中には、新商品をバナーで宣伝したいと考えている人も少なくないと思います。
また、コーディングは面倒・怖いのでしたくないという方も多いと思います。

Shopifyストアにバナーを導入して、ストアの広告力を向上させたい
新商品をTOPページの目につく場所で宣伝したい
コーディングは出来ればしたくない

この記事では、Shopifyアプリで簡単にバナー（リンク付き画像）を設置する方法を解説していきます。

それでは、頑張っていきましょう。

今回の記事では、導入が簡単かつ導入後も多くの人が簡単に操作できそうならくらくバナー設置アプリ｜リテリア Bannerの特徴や使い方を徹底解説していきたいと思います。

この記事の執筆のために参考にした記事を以下にまとめておきますのでご参考ください。

参考：Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説
参考：Shopifyでバナーを簡単に設置できるアプリについて【備忘録】

バナー画像

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

ボタンワンクリックでアプリを有効化できる
Shopify Online 2.0対応のため、テーマ内のコードやほかのアプリとの干渉が少ない
ノーコードで画像やURL、リンク、横に並ぶ数などのカスタマイズできる

アプリの価格は月額$1.99ととても安価な価格設定となっており、インストールから7日間は無料で利用可能なようです。
また、開発ストアであれば無料で機能を利用できるようです。

こちらのアプリは、日本語に完全対応しているため、海外製アプリのように操作画面で迷うことがありません。
また、万が一アプリが正常に動作しない場合にはサポートに問い合わせることにより対応してもらうことが可能です。海外製アプリの場合には、英語でメールのやり取りを行う必要がありますが、こちらのアプリは日本語エンジニアが丁寧にサポートしてくれます。

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面の「アプリ管理」から、「ストアをカスタマイズ」に移動しましょう。

アプリストアで、らくらくバナー設置アプリ｜リテリア Bannerと検索して下さい。

こちらをクリックして、アプリ画面に移動して下さい。

「アプリを追加する」をクリックして、ストアにアプリを追加しましょう。

Shopify パートナー用のアカウント（通称開発アカウント）でインストールを行うと、全ての機能を無料で利用することができます。
マーチャント用のアカウントの場合、月額 1.99 ドルで利用できます。7 日間の無料プラン付きのため、アプリの挙動を確認することが出来ます。

「アプリを追加する」をクリックすると、以下の画面に遷移します。

プライバリポリシーを確認の上、右上の「アプリをインストール」をクリックして、アプリのインストールを行いましょう。

アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後からとなりますので、安心して承認ボタンをクリックしましょう。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。

管理画面が表示されれば、インストールは終了です。

ここからは、アプリの有効化作業です。

まず、アプリを導入するテーマを選択します。今回の解説では、公開中のテーマを選択しています。

テーマを選択

テーマを選択したら「有効化」をクリックします。自動インストールは以上で終了です。

有効化

次に「プレビュー」をクリックしましょう。

プレビュー

TOP ページの一番下にバナーセクションが追加されているのを確認できます。
TOPページのアプリ確認

ここまでで、アプリの導入は一通り完了です。

それでは次に、アプリの使い方を見てみましょう。

バナーセクションのカスタマイズ

今回は以下の画像を目標に使い方を解説していこうと思います。
使用例

アプリブロックの追加

今回の例ではアプリブロックを２個使用しています。はじめに、アプリセクションの「ブロックを追加」からアプリブロックをもう一個追加しましょう。
ブロック追加

追加後は以下の画像になります。

列数の選択

まず、列数を選択します。今回はスマホ/PCのどちらも２列にしておきます。両方のアプリブロックで設定します。
スマホ/PC２列

マウスオーバー時の挙動には、不透明度を下げる・画像を拡大する・無しがありました。今回は不透明度を下げるに設定しています。

画像の設定

次に画像の設定をしていきます。下の画像の「画像を選択」に使いたい画像をセットしましょう。今回は１つ目のブロックに４枚、２つ目のブロックに２枚セットします。

ここまでの操作で以下の画像のようになっていると思います。

URL の設定

URL用のテキスト欄があるのでそこからURLを設定しましょう。

クリックすると以下の画像のようにページを選択できます。

リンクしたいページを選びましょう。今回は商品管理から商品を選びました。

もし、リンクしたいページがなかった場合は直接打ち込むことも出来ます。
各SNSやYouTubeなどにリンクしたい場合もあるかと思います。
設定方法はとても簡単です。リンクしたいページに行き、URLをコピーして、貼り付けるだけです。
まずは、リンクしたいページに行きましょう。例ではYouTubeのTOPページです。都度、SNSやご自身のYouTubeページに置き換えてください。ページ上部にあるURLをクリックしコピーしましょう。
リンク先URL
次にコピーしたURLを入力欄に貼り付けましょう。
貼り付け先
URLを設定したらちゃんと設定できているか確認してみましょう。
その際はプレビューから確認しましょう。プレビューは管理画面のアクションをクリックすると開けます。