Shopifyでバナー（リンク付き画像）をらくらく設置できるアプリを解説
目次
Shopify でバナー（リンク付き画像）をらくらく設置できるアプリを解説
Shopify でオンラインストアを運営している方の中には、新商品をバナーで宣伝したいと考えている人も少なくないと思います。
また、コーディングは面倒・怖いのでしたくないという方も多いと思います。
- Shopify ストアにバナーを導入して、ストアの広告力を向上させたい
- 新商品を TOP ページの目につく場所で宣伝したい
- コーディングは出来ればしたくない
この記事では、Shopify アプリで簡単にバナー（リンク付き画像）を設置する方法を解説していきます。
それでは、頑張っていきましょう。
今回の記事では、導入が簡単かつ導入後も多くの人が簡単に操作できそうならくらくバナー設置アプリ｜リテリア Bannerの特徴や使い方を徹底解説していきたいと思います。
この記事の執筆のために参考にした記事を以下にまとめておきますのでご参考ください。
参考：Shopify でリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説
参考：Shopify でバナーを簡単に設置できるアプリについて【備忘録】
Shopify ストアにバナーを挿入できるアプリの紹介です。
シンプル画像バナー｜お手軽広告バナーアプリ」は、ストアにノーコードで画像バナーを挿入できるアプリです。
「らくらくバナー設置アプリ｜リテリア Banner」の特徴
アプリの特長は以下の通りです。
- ボタンワンクリックでアプリを有効化できる
- Shopify Online 2.0 対応のため、テーマ内のコードやほかのアプリとの干渉が少ない
- ノーコードで画像や URL、リンク、横に並ぶ数などのカスタマイズできる
アプリの価格は月額$1.99 ととても安価な価格設定となっており、インストールから 7 日間は無料で利用可能なようです。
また、開発ストアであれば無料で機能を利用できるようです。
こちらのアプリは、日本語に完全対応しているため、海外製アプリのように操作画面で迷うことがありません。
また、万が一アプリが正常に動作しない場合にはサポートに問い合わせることにより対応してもらうことが可能です。海外製アプリの場合には、英語でメールのやり取りを行う必要がありますが、こちらのアプリは日本語エンジニアが丁寧にサポートしてくれます。
「らくらくバナー設置アプリ｜リテリア Banner」のインストール方法
それでは、実際にアプリのインストールを行っていきましょう。
ストアの管理画面の「アプリ管理」から、「ストアをカスタマイズ」に移動しましょう。
アプリストアで、らくらくバナー設置アプリ｜リテリア Bannerと検索して下さい。
こちらをクリックして、アプリ画面に移動して下さい。
「アプリを追加する」をクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用のアカウント（通称開発アカウント）でインストールを行うと、全ての機能を無料で利用することができます。
マーチャント用のアカウントの場合、月額 1.99 ドルで利用できます。7 日間の無料プラン付きのため、アプリの挙動を確認することが出来ます。
「アプリを追加する」をクリックすると、以下の画面に遷移します。
プライバリポリシーを確認の上、右上の「アプリをインストール」をクリックして、アプリのインストールを行いましょう。
アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後からとなりますので、安心して承認ボタンをクリックしましょう。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。
管理画面が表示されれば、インストールは終了です。
ここからは、アプリの有効化作業です。
まず、アプリを導入するテーマを選択します。今回の解説では、公開中のテーマを選択しています。
テーマを選択したら「有効化」をクリックします。自動インストールは以上で終了です。
次に「プレビュー」をクリックしましょう。
TOP ページの一番下にバナーセクションが追加されているのを確認できます。
ここまでで、アプリの導入は一通り完了です。
それでは次に、アプリの使い方を見てみましょう。
バナーセクションのカスタマイズ
今回は以下の画像を目標に使い方を解説していこうと思います。
アプリブロックの追加
今回の例ではアプリブロックを２個使用しています。はじめに、アプリセクションの「ブロックを追加」からアプリブロックをもう一個追加しましょう。
追加後は以下の画像になります。
列数の選択
まず、列数を選択します。今回はスマホ/PC のどちらも２列にしておきます。両方のアプリブロックで設定します。
マウスオーバー時の挙動には、不透明度を下げる・画像を拡大する・無しがありました。今回は不透明度を下げるに設定しています。
画像の設定
次に画像の設定をしていきます。下の画像の「画像を選択」に使いたい画像をセットしましょう。今回は１つ目のブロックに４枚、２つ目のブロックに２枚セットします。
ここまでの操作で以下の画像のようになっていると思います。
URL の設定
URL 用のテキスト欄があるのでそこから URL を設定しましょう。
クリックすると以下の画像のようにページを選択できます。
リンクしたいページを選びましょう。今回は商品管理から商品を選びました。
もし、リンクしたいページがなかった場合は直接打ち込むことも出来ます。
各 SNS や YouTube などにリンクしたい場合もあるかと思います。
設定方法はとても簡単です。リンクしたいページに行き、URL をコピーして、貼り付けるだけです。
まずは、リンクしたいページに行きましょう。例では YouTube の TOP ページです。都度、SNS やご自身の YouTube ページに置き換えてください。ページ上部にある URL をクリックしコピーしましょう。
次にコピーした URL を入力欄に貼り付けましょう。
URL を設定したらちゃんと設定できているか確認してみましょう。
その際はプレビューから確認しましょう。プレビューは管理画面のアクションをクリックすると開けます。
画像間の余白の調整
画像上下・左右の余白を調整しましょう。PC/スマホ別々に設定できるので動かしながら調整しましょう。
セクション上下の余白の調整
最後にアプリブロック同士の余白を調整しましょう。以下の画像の場所で調整します。
設定の際、値をマイナスにすることで通常よりも接近させることが出来ます。
アプリブロック 1 で設定します。今回は PC 時下の余白を-88px、スマホ時-56px で設定しました。
PC 画面
スマホ画面
いい感じの数値を探しましょう！
以上でカスタマイズは終了です。
終わりに
今回は、Shopify アプリで簡単にバナー（リンク付き画像）を設置する方法を解説しました。
アプリストアは以下になります。興味のある方はインストールしてみてください。繰り返しになりますが 7 日間は無料ですのでいろいろ触ってみるのもいいかもしれません。
ここまでお付き合い頂き、誠にありがとうございました。
Shopify ストアにバナーを挿入できるアプリの紹介です。
シンプル画像バナー｜お手軽広告バナーアプリ」は、ストアにノーコードで画像バナーを挿入できるアプリです。
以下参考記事です。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
