Shopifyで顧客タグに応じたリンク付き画像バナーを簡単に表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/01/04

はじめに

今回の記事は、Shopify アプリである
「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」 のご利用ガイドです。

Shopify は、EC サイトを簡単に構築できるプラットフォームで、Shopify アプリはその機能を拡張するための仕組みです。WordPress におけるプラグインのようなもの、と考えていただくと分かりやすいでしょう。

「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」は、顧客タグに応じて表示内容を切り替えられる画像バナーを、ストア内のあらゆるページに表示できるアプリです。

会員ランク別の特典案内や、VIP 顧客向けの限定キャンペーン、特定顧客へのメッセージ表示などを、ノーコードで簡単に実現できます。

ご興味のある方は、以下の URL からインストールしてみてください。

シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示

「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」でできること

「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」は、顧客タグを条件として、表示する画像バナーを柔軟に切り替えられる Shopify アプリです。

シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示

主な特徴は以下のとおりです。

顧客タグごとに表示・非表示を制御
VIP や会員ランクなどの顧客タグを条件に、表示するバナーを出し分けできます。
PC・スマホで別々の画像を設定可能
デバイスごとに最適な画像サイズ・デザインを表示できます。
レイアウト・余白・リンクをノーコードで調整
CSS やコード編集不要で、見た目を細かくカスタマイズできます。
1 クリックでテーマに追加
Shopify のテーマエディタから簡単にアプリブロックを追加できます。

これらを活用することで、顧客ごとに最適なメッセージを届け、エンゲージメントやコンバージョンの向上につなげることができます。

顧客タグに応じた画像バナーを表示できる

顧客タグ（例：VIP、premium など）を条件に、特定の顧客だけに画像バナーを表示できます。
ログインしていない顧客は「タグを持たない顧客」として扱われます。

顧客タグに応じたリンク付き画像バナーを簡単に表示できる！

PC 用・スマホ用で異なる画像を設定できる

各バナー画像には、PC 用とスマホ用の画像をそれぞれ設定できます。
スマホ用画像を設定しない場合は、PC 用画像がそのまま表示されます。

PC用とスマホ用で異なる画像を設定できる！

レイアウトや余白をノーコードでカスタマイズできる

カラム数や画像間の余白、上下の余白などをスライダー操作で簡単に調整できます。
HTML や CSS の知識がなくても、テーマに自然に馴染むデザインを実現できます。

レイアウトや余白をノーコードでカスタマイズできる！

1 クリックでテーマに追加できる

アプリをインストール後、Shopify のテーマエディタからアプリブロックを追加するだけで、すぐにストアに反映されます。

1 クリックでテーマに追加できる！

アプリのインストール方法

以下の URL からアプリをインストールしてください。

シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示

アプリの料金は、**月額 $3.99（7 日間の無料トライアルあり）**です。

ストア管理画面左下の「設定」をクリックします。
管理画面の設定

「アプリ」をクリックし、「Shopify App Store」に移動してください。
管理画面のアプリ設定

検索窓に「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」と入力し、表示されたアプリをクリックします。
Shopify app store

アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $3.99 でご利用いただけます（1 週間の無料期間付き）。
アプリインストール画面

「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
インストール確認ダイアログ

以下のアプリ管理画面が表示されます。
アプリの管理画面

以上で、アプリのインストールは完了です。

アプリブロックをテーマに追加する方法

アプリの機能を実際にテーマに組み込み、画像バナーをストア上に表示できるように設定していきましょう。

自動でテーマに追加する場合

アプリの管理画面を開いてください。
「テーマに画像バナーを追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
アプリ管理画面

「テーマに追加」ボタンをクリックします。
アプリ管理画面

テーマ編集画面が開き、アプリが有効化されるので、「保存する」をリックして有効化は完了です。

エラーが起きる場合や画像以外のブロックを追加したい場合、トップページ以外に追加したい場合は次の項に進んでください。

手動でテーマに追加する場合

アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。

テーマエディタが開くので、アプリを追加したい画面に移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
テーマ編集画面

「アプリ」のタブに「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」というアプリブロックが表示されるので、ブロックをクリックして追加します。
テーマ編集画面

アプリセクションが追加されその中に選択したアプリブロックが追加されました。詳細な設定が完了したタイミングで「保存する」ボタンをクリックしてください。
テーマ編集画面

以上で、手動でのブロック追加は完了です。

アプリブロックの設定項目について

テーマにアプリブロックを追加したら、カスタマイズ画面で以下の設定項目が表示されます。

テーマ編集画面

表示条件設定

対象タグ
カンマ区切りで顧客タグを入力します（例：VIP,premium）
指定したタグを持つ顧客にのみバナーが表示されます。
空欄の場合は、すべての顧客に表示されます。
非対象タグ
指定したタグを持つ顧客にはバナーを表示しません。
対象タグと非対象タグの両方を持つ場合は、非表示が優先されます。

テーマ編集画面の表示条件設定

バナー画像設定

画像 1〜4（PC / スマホ）
最大 4 枚まで画像を設定できます。
各画像ごとにリンク先 URL を指定可能です。
!テーマ編集画面のバナー画像設定
リンクを新しいウィンドウで開く
有効にすると、クリック時に別タブでリンクが開きます。
画像のアスペクト比
「画像に合わせる」「ポートレート（3:4）」「正方形（1:1）」「ワイド（4:3）」から選択できます。
マウスホバー時の動作
「透過」「拡大」「なし」から選択できます。