Shopifyで会員限定バナーを表示できるログインバナーアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルログインバナー｜会員限定バナー表示アプリ」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルログインバナー｜会員限定バナー表示アプリ」は、ログイン中の顧客のみにバナーを表示できるシンプルなアプリです。
会員向けの特別セールやリピーター施策を強化したい方におすすめで、バナー画像・リンクの設定がノーコードで簡単に行えます。
ご興味のある方は、以下の URL からインストールしてみてください。
このアプリの料金は、月額 $3.99（1 週間の無料お試し期間あり） でご利用いただけます。
「シンプルログインバナー｜会員限定バナー表示アプリ」でできること
Shopify アプリである「シンプルログインバナー｜会員限定バナー表示アプリ」では、以下のような機能を利用できます。
-
ログイン中の顧客だけにバナーを簡単に表示できる！
非会員（未ログイン）のユーザーには表示させず、会員へ訴求したい情報を的確に届けることができます。 -
PC 用とスマホ用で異なる画像を設定できる！
PC 表示とスマホ表示でそれぞれ別の画像を用意し、デバイスに合わせて最適化されたバナーを提供可能です。
-
ノーコードで見た目をカスタマイズできる！
コードの編集が不要なので、デザインに詳しくない方でも余白やレイアウトの調整が簡単に行えます。
-
リンクつき画像バナーをストア上に設置できる！
特定のリンク先へ誘導したり、クーポンコードや特別セールページなどに直接遷移させることができます。
-
1 クリックでテーマに追加できる！
テーマへの組み込みがとても簡単で、煩雑な作業をしなくてもバナーを表示できます。
アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $3.99 / 1 週間の無料お試し期間あり です。
-
Shopify 管理画面にログインします。
-
左下にある「設定」をクリックします。
-
「アプリと販売チャネル」をクリックし、「Shopify App Store」をクリックしてください。
-
検索窓に「シンプルログインバナー｜会員限定バナー表示アプリ」と入力し、表示されたアプリをクリックします。
-
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。
-
必要な権限が表示されますので、内容を確認して「インストール」を完了させてください。
これでアプリのインストールが完了です。完了すると、以下の管理画面が表示されます。
テーマにバナーを追加する
「シンプルログインバナー｜会員限定バナー表示アプリ」をストアで有効化して、実際にバナーを表示させましょう。
自動でバナーをテーマに追加
-
インストールが完了したら、Shopify 管理画面左側の「アプリ」から「シンプルログインバナー｜会員限定バナー表示アプリ」の管理画面を開きます。
-
以下の画面に遷移するので、テーマを選択して「テーマに追加」ボタンをクリックします。
-
テーマのカスタマイズ画面が開き、アプリブロックが追加されます。
（もしここでエラーとなる場合は、次の項に進んでください）
-
右上の「保存」をクリックして完了です。
手動でバナーをテーマに追加
もし自動追加がうまくいかない場合や、トップページ以外に手動でバナーを表示させたい場合は、以下の手順で行ってください。
-
アプリ管理画面からテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
-
テーマエディタが開くので、バナーを表示させたいページへ移動し、サイドバーの「テンプレート」内にある「セクションを追加」をクリックします。
-
以下の小窓が開くので、アプリのタブから「シンプルログインバナー」を選択します。
-
バナーのアプリブロックが追加されるので、右上の「保存」をクリックして完了です。
見た目のカスタマイズ
テーマにバナーを追加できたら、見た目をカスタマイズしていきます。
テーマカスタマイズ画面を開き、サイドバーの「シンプルログインバナー」をクリックします。
すると、以下のような設定項目が表示されるので、ここで設定を行なっていきます。
バナー画像設定
-
画像 1（PC 用） / 画像 1（スマホ用）
それぞれ PC 版とスマホ版のバナー画像を設定します。スマホ版を未設定の場合は PC 版がスマホでも表示されます。 -
リンク 1
バナーをクリックした際の遷移先 URL を設定します。空欄の場合はリンクなしの画像として表示されます。
必要に応じて「画像 2」「画像 3」「画像 4」についても、PC 版・スマホ版のバナー画像とリンク先を設定してください。
画像のアスペクト比
- 画像のアスペクト比
「画像に合わせる」や「1:1」「16:9」などのオプションから選択できます。
ここで指定したアスペクト比に従って、バナー画像が自動でトリミング・表示されます。
マウスホバー時の動作
- 「透過」「拡大」「なし」などが選択できる場合があります。
マウスをバナー上に乗せたときのアニメーションや見た目の変化を指定します。
レイアウト設定
-
カラム数（PC）
PC 表示時に、バナーを 1〜4 カラムで配置するか選択できます。 -
カラム数（スマホ）
スマホ表示時のカラム数を 1〜3 カラム程度で設定可能です。 -
画像間の余白
各バナー画像間の余白（ピクセル単位）を調整します。
余白設定
- 上部の余白（PC / スマホ）
- 下部の余白（PC / スマホ）
バナーセクション全体の上端・下端に余白を加えて、ページデザインとの調和を図ります。
追加 CSS
- 追加 CSS
独自のデザインやスタイルを適用したい場合、ここに直接 CSS を記述することで自由にカスタマイズできます。
おわりに
今回は「シンプルログインバナー｜会員限定バナー表示アプリ」の解説を行いました。
- ログイン中の顧客だけに限定表示できるため、会員向けのセール・特典を有効に告知
- PC 用 / スマホ用で異なる画像を登録して、ユーザー体験を向上
- 月額 $3.99（1 週間の無料お試し期間あり） で利用可能
会員限定マーケティングやリピーター施策を強化したい場合、ぜひご活用ください。
ここまでお読みいただき、誠にありがとうございました。
参考記事
今回は、以下の記事を参考にしています。
.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}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
