Shopifyで顧客タグに応じた画像バナーを表示する方法｜業種・ストア別の活用例とアプリ設定

目次

• はじめに
• あなたのストアはどのパターン？顧客タグ バナーの業種別ユースケース
  • アパレル・ファッション：会員ランクと購入カテゴリで出し分ける
  • コスメ・健康食品：リピーターと休眠顧客の出し分け
  • BtoB・卸売：取引先ランク別の限定情報
  • サブスク・会員制：プラン別の特典案内
  • リアル店舗併設：地域タグでオンラインとオフラインをつなぐ
• 実現方法は2つ：自前のコード編集か、アプリ導入か
  • テーマのコード編集による実装
  • アプリを利用した実装
• おすすめアプリ「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」
  • 業種別ユースケースに当てはめると
• インストール手順と設定の流れ
  • アプリのインストール手順
  • アプリブロックをテーマに追加
  • アプリブロックのカスタマイズ
• 自分でコードを書きたい人向けのサンプルコード
  • 基本的な Liquid / HTML / CSS サンプル
  • 複数バナーを表示するサンプル
  • PC・スマホで異なる画像を表示するサンプル
  • カスタマイズのポイント
  • 実装手順
• よくある質問（FAQ）
  • Q. 顧客タグは何個まで付けられますか？
  • Q. 未ログインのお客様にもバナーは出せますか？
  • Q. 「特定商品を買った人」だけにバナーを出せますか？
  • Q. アプリとコード編集、どちらを選べばよいですか？
• まとめ
  • 参考記事

はじめに

「会員ランクごとに違うキャンペーンを見せたい」「VIP のお客様にだけ先行セールのバナーを出したい」——こうした要望は、ストアの売上が伸びてくるほど現場から出てきます。Shopify で顧客タグに応じた画像バナーを表示できれば、ログインしている顧客の属性に合わせて、トップページや商品ページのビジュアルを丸ごと切り替えられます。

ただ、実際に手を動かそうとすると「自分のストアのケースだと、どう設定すればいいのか」がいちばん知りたいところではないでしょうか。VIP 向けと初回購入者向けでは、付けるタグも、出すバナーも、運用の頻度もまったく異なります。

そこでこの記事では、Shopify 顧客タグ バナーの実装を、抽象的なメリット論ではなく「どんなストア・どんな業種が、どう使うか」というユースケース起点で整理します。アパレル、コスメ、BtoB 卸、サブスク、リアル店舗併設など、それぞれの現場で顧客タグの画像バナーがどう効くのかを具体例で示し、そのうえでノーコードのアプリ設定と、自前で書く場合の Liquid のサンプルコードまでつなげていきます。

紹介する日本製アプリ「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」は、PC 用とスマホ用で別画像を設定でき、テーマエディタにアプリブロックを 1 クリックで追加するだけのノーコード設置に対応しています。月額 $3.99（年払いなら $39.99/年で 16% お得）、7 日間の無料体験付きで、管理画面とサポートが日本語で完結します。

この記事は以下の記事を参考にしています。

• Shopify で顧客タグに応じたリンク付き画像バナーを簡単に表示できるアプリについて徹底解説｜ご利用ガイド
• Shopify で顧客タグに応じた画像バナーを表示する方法を 5 つ紹介！
• Shopify の顧客タグに応じた画像バナーアプリおすすめ 10 選

あなたのストアはどのパターン？顧客タグ バナーの業種別ユースケース

顧客タグに応じた画像バナーは、ストアの業態によって「効かせ方」が大きく変わります。まずは自分のストアに近いケースを見つけてから、設定方法に進むのが近道です。ここで挙げるタグ名はそのまま後述のアプリ設定やコードに流用できます。

アパレル・ファッション：会員ランクと購入カテゴリで出し分ける

シーズンの入れ替わりが激しいアパレルでは、「VIP」タグを付けた優良顧客に新作の先行販売バナーを、「アウター購入」などのカテゴリタグを付けた顧客に関連アイテムのコーディネート提案バナーを出す、といった使い方が効きます。トップページのファーストビューを丸ごと差し替えられるので、ログイン直後の体験が「自分向けのショップ」に変わります。

筆者の実務感覚では、アパレルはバナーの差し替え頻度が高くなりがちなので、コードを毎回触るよりアプリで画像だけ入れ替えられる体制にしておくほうが、現場の運用負荷が一気に下がります。

コスメ・健康食品：リピーターと休眠顧客の出し分け

定期的に消費される商材では、「リピーター」タグに対して定期購入の案内や本品クーポンのバナーを、しばらく購入のない顧客に付けた「休眠」タグに対してカムバックキャンペーンのバナーを出す運用が定番です。同じトップページでも、買い続けている人と離れかけている人に、別々のメッセージを出せます。

BtoB・卸売：取引先ランク別の限定情報

会員制・卸売のストアでは、「卸価格」タグや取引先ランクのタグを付け、ログインした取引先にだけ専用カタログや受発注ページへの導線バナーを表示できます。一般顧客には見せたくない業務用の情報を、タグ一つで安全に出し分けられるのは BtoB ならではの使い方です。

サブスク・会員制：プラン別の特典案内

サブスクや会員制サイトでは、「ゴールド」「シルバー」といったプランタグに応じて、各プランの特典や上位プランへのアップグレード案内バナーを出します。次のランクを目指すモチベーションを、ログインのたびに自然に提示できます。

リアル店舗併設：地域タグでオンラインとオフラインをつなぐ

実店舗を持つストアでは、配送先住所などをもとに「関東」「関西」のような地域タグを付与し、地域限定イベントや最寄り店舗のフェア情報のバナーを表示できます。オンラインとオフラインの送客を、顧客タグ一つで橋渡しできます。

これらのユースケースに共通するのは、「特定のタグを持つ顧客にだけ画像を出す」という同じ仕組みで動いている点です。次に、この仕組みを Shopify 上でどう実現するかを見ていきます。

実現方法は2つ：自前のコード編集か、アプリ導入か

上で挙げたユースケースを Shopify で形にする方法は、大きく「テーマのコード編集」と「アプリの利用」の 2 通りです。どちらが自分のストアに合うかは、運用体制と差し替え頻度で決まります。

テーマのコード編集による実装

Liquid テンプレートで顧客オブジェクトからタグを取得し、条件分岐でバナーを出し分ける方法です。HTML / CSS / JavaScript を直接書けるためデザインの自由度が高く、月額費用もかかりません。一方で、テーマ更新時に上書きされるリスクや、エラー時に自力で原因を切り分ける必要があるなど、開発リソースが前提になります。

ここで実務上いちばん注意したいのが Liquid の仕様です。customer.tags はログイン中の顧客にのみ値が入り、未ログイン時は customer オブジェクトが nil になります。そのため {% if customer.tags contains 'vip' %} という判定は、未ログインの訪問者には機能しません。さらに新しい「Customer Accounts」環境では、オンラインストアテーマ側で顧客オブジェクトが空になる、ログインから 24 時間後に顧客情報が取得できなくなる、といった事象が開発者コミュニティで報告されています。自前で組む場合は、この「未ログイン時に何を出すか」「ログイン状態の取得が外れたときにどう振る舞うか」の設計が、後から効いてくる落とし穴です。

アプリを利用した実装

専用アプリを使えば、プログラミングの知識がなくても管理画面の操作だけで画像バナーを設置できます。アプリストアからインストールし、テーマエディタで対象タグを入力して画像を差し込むだけ。テーマ更新で消える心配が少なく、画像の差し替えも GUI で完結します。月額費用は発生しますが、前述のアパレルのように差し替え頻度が高いストアでは、運用工数の削減効果がコストを上回りやすいです。

実装方法を選ぶときの観点を、簡単な表にまとめておきます。

観点	テーマのコード編集	アプリの利用
必要なスキル	Liquid / HTML / CSS の知識	不要（ノーコード）
導入までの時間	設計・実装・検証で相応の時間	数分〜数十分
月額費用	なし	月額 $3.99〜
画像の差し替え	コードを再編集	管理画面で即変更
テーマ更新の影響	上書きされるリスクあり	影響を受けにくい
PC・スマホ別画像	自前で picture タグ等を実装	設定項目で対応
日本語サポート	自己解決が基本	開発元へ日本語で問い合わせ可

「とにかく簡単に試したい」「コードは触りたくない」「結果を早く確認したい」という方には、アプリ導入が向いています。次の章で、そのアプリを具体的に見ていきます。

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

ここからは、上記ユースケースをノーコードで実現できる日本製アプリ「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」を紹介します。

• アプリ名: シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示
• URL: https://apps.shopify.com/sa-132-ur-customer-banner?locale=ja
• 価格: 月額 $3.99（年払いは $39.99/年で 16% お得、7 日間の無料お試し期間あり）

このアプリは「顧客タグで画像バナーを出す」という用途に絞り込んでいるのが特徴です。海外製の類似アプリには、無料でも実体は商品タグ（複数商品をスライダーで並べる）が主軸で顧客タグでの出し分けが弱いものや、顧客タグに加えて注文回数・累計購入額・メール購読状態まで扱える多軸型のものがありますが、いずれも英語インターフェースが中心です。「日本語で、顧客タグごとに PC・スマホ別の画像バナーを出したい」という前章のユースケースに対しては、このアプリの守備範囲がそのまま噛み合います。

主な機能は次のとおりです。

• ノーコードで導入: テーマにコードを追記せず、管理画面の操作だけで設定できます。
• 顧客タグによる出し分け: 対象タグと非対象タグを設定し、特定の顧客グループにだけバナーを表示します。
• PC・スマホ別画像設定: デバイスごとに最適な画像を設定でき、レスポンシブ表示に対応します。
• カスタマイズ自由度: 画像比率、間隔、ホバーエフェクト、カラム数などを細かく設定できます。
• 任意のページに設置可能: ホーム、商品、コレクションなど、どのページにも配置できます。
• 最大 4 枚のバナー表示: 1 つのアプリブロックで最大 4 枚まで画像を設定できます。
• シンプルかつ軽量: 不要な機能を省き、表示速度への影響を抑えた設計です。
• 日本語サポートあり: 開発元が日本企業のため、トラブル時も日本語で問い合わせできます。

業種別ユースケースに当てはめると

前章のユースケースは、このアプリの「対象タグ」「非対象タグ」の 2 設定だけで再現できます。アパレルの VIP 先行販売なら対象タグに VIP、コスメで購入済み顧客を除外したいなら非対象タグに 購入済み を入れる、といった具合です。両方を持つ顧客には非表示が優先されるため、「リピーターには出すが休眠扱いの人には出さない」といった重ね合わせも作れます。

PC・スマホ別画像が標準で設定できる点は、スマホ流入が多いアパレル・コスメで特に効きます。スマホでは画像が小さくなりすぎてタップしづらい、という典型的な失敗を、はじめからデバイス別画像で回避できるためです。

月額 $3.99（約 550 円程度）で、年払いにすれば $39.99/年と 16% 抑えられます。7 日間の無料トライアルで自社のタグ運用に合うか試せるので、まずは 1 ユースケースだけ作って効果を見るのが現実的です。

以下では、インストールから設定までの具体的な流れを解説します。

インストール手順と設定の流れ

公式のご利用ガイドでも詳しく説明していますので、あわせてご参照ください。
→ 「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」ご利用ガイド

アプリのインストール手順

1. Shopify アプリストアにアクセス
   Shopify 管理画面の左下にある「設定」をクリックし、「アプリ」→「Shopify App Store」へ移動します。または、こちらのリンクから直接アプリ詳細ページへアクセスしてください。
   
   

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

3. インストール
   アプリの詳細ページから「インストール」ボタンをクリックし、インストールを始めます。
   

4. 権限の確認
   Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
   

5. 完了
   アプリの管理画面が表示されれば、インストールは完了です。

この段階で 7 日間の無料トライアルが始まります。無料期間のうちに、自社のタグ運用に合うかどうかを一通り試しておきましょう。

アプリブロックをテーマに追加

カスタマイズには、テーマにアプリブロック（またはアプリセクション）を追加する必要があります。

自動でテーマに追加（1 クリック追加）

1. アプリの管理画面を開く
   Shopify 管理画面の「アプリ」から「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」を選択します。

2. テーマに追加
   「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
   

3. 保存
   テーマエディタが開いたら、アプリブロックが有効化されていることを確認して、「保存する」をクリックします。
   

   注意：公開中のテーマの場合、保存すると実際のストアに反映されてしまうので注意してください。

手動でテーマに追加（任意ページに設置したい場合）

自動追加がうまくいかない場合や、特定ページ（商品ページや任意のテンプレート）に入れたい場合は、手動追加がおすすめです。

1. テーマカスタマイズ画面を開く
   Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
   

2. ページを選択
   テーマエディタ上部のプルダウンから、追加したいページ（ホーム / コレクション / 商品 など）に移動します。
   

3. セクションまたはブロックを追加
   「セクションを追加」または「ブロックを追加」をクリックします。
   

4. アプリブロックを選択
   「アプリ」タブから「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」を選んで追加します。
   

5. 保存
   表示を確認し、問題なければ「保存する」をクリックします。

アプリブロックのカスタマイズ

テーマにブロックを追加したら、テーマエディタの設定項目からデザインを調整できます。前章の業種別ユースケースは、ここで設定するだけで再現できます。

表示条件設定

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

• 非対象タグ: 指定したタグを持つ顧客にはバナーを表示しません。対象タグと非対象タグの両方を持つ場合は、非表示が優先されます。

例えばアパレルの先行販売なら対象タグに「VIP」と入力します。コスメで購入済み顧客に出したくない場合は、非対象タグに「購入済み」と入力します。前章のどのユースケースも、この 2 欄の組み合わせで表現できます。

バナー画像設定

• 画像 1〜4（PC / スマホ）: 最大 4 枚まで画像を設定できます。各画像ごとにリンク先 URL を指定可能です。PC 用とスマホ用で異なる画像を設定することで、デバイスごとに最適化された表示が可能になります。
  

• リンクを新しいウィンドウで開く: 有効にすると、クリック時に別タブでリンクが開きます。外部サイトへのリンクや、ストア内で複数ページを同時に見せたい場合に便利です。
  

• 画像のアスペクト比: 「画像に合わせる」「ポートレート（3:4）」「正方形（1:1）」「ワイド（4:3）」から選択できます。統一感のあるレイアウトを作りたい場合は、アスペクト比を固定するのがおすすめです。
  

• マウスホバー時の動作: 「透過」「拡大」「なし」 から選択できます。ホバー時のアニメーションを追加することで、インタラクティブな体験を提供できます。
  

レイアウト設定

• カラム数（PC / スマホ）: PC では 1〜4 カラム、スマホでは 1〜3 カラムから選択できます。バナーの枚数や訴求の強さに応じて調整しましょう。
  

• 画像間の余白: 画像同士の間隔を px 単位で調整できます。余白を広めにとると上品な印象に、狭めにすると情報量が増えた印象になります。
  

余白設定

• 上部の余白（PC / スマホ）: バナーセクションの上部余白を調整できます。
• 下部の余白（PC / スマホ）: バナーセクションの下部余白を調整できます。

ページ全体との間隔を調整し、自然なレイアウトに整えられます。デバイスごとに異なる余白を設定することで、より最適化された表示が可能です。

その他の設定

• 追加 CSS: より細かくデザインを調整したい場合は、CSS を直接記述できます。クラス名はブラウザの検証ツールで確認してください。
  

設定して「保存」すると、即座にストアのプレビュー画面に反映されます。前章で見つけた自社のユースケースに合わせて、対象タグと画像を調整してみてください。

自分でコードを書きたい人向けのサンプルコード

「アプリを使わず独自デザインを追求したい」「月額費用をかけたくない」という方向けに、Liquid のサンプルを紹介します。いずれも customer.tags を使うため、ログイン中の顧客にのみ動作する点に注意してください。未ログイン時は else 側の分岐が使われます。

基本的な Liquid / HTML / CSS サンプル

<!-- 顧客タグに応じた画像バナーのサンプル -->
{% if customer %}
  {% comment %} ログインしている顧客の場合 {% endcomment %}

  {% assign has_vip_tag = false %}
  {% assign has_premium_tag = false %}

  {% comment %} 顧客タグをチェック {% endcomment %}
  {% for tag in customer.tags %}
    {% if tag == 'VIP' %}
      {% assign has_vip_tag = true %}
    {% elsif tag == 'premium' %}
      {% assign has_premium_tag = true %}
    {% endif %}
  {% endfor %}

  <div class="customer-tag-banner">
    {% if has_vip_tag %}
      {% comment %} VIPタグを持つ顧客向けバナー {% endcomment %}
      <div class="banner-wrapper">
        <a href="/collections/vip-exclusive">
          <img src="{{ 'vip-banner.jpg' | asset_url }}" alt="VIP限定キャンペーン">
        </a>
      </div>
    {% elsif has_premium_tag %}
      {% comment %} premiumタグを持つ顧客向けバナー {% endcomment %}
      <div class="banner-wrapper">
        <a href="/collections/premium-sale">
          <img src="{{ 'premium-banner.jpg' | asset_url }}" alt="プレミアム会員セール">
        </a>
      </div>
    {% else %}
      {% comment %} その他のログイン顧客向けバナー {% endcomment %}
      <div class="banner-wrapper">
        <a href="/collections/member-special">
          <img src="{{ 'member-banner.jpg' | asset_url }}" alt="会員限定セール">
        </a>
      </div>
    {% endif %}
  </div>

{% else %}
  {% comment %} ログインしていない顧客向けバナー {% endcomment %}
  <div class="customer-tag-banner">
    <div class="banner-wrapper">
      <a href="/account/register">
        <img src="{{ 'register-banner.jpg' | asset_url }}" alt="会員登録で特典GET">
      </a>
    </div>
  </div>
{% endif %}

<style>
  .customer-tag-banner {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
  }
  .banner-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
  }
  .banner-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
  }
  .banner-wrapper:hover img {
    transform: scale(1.05); /* ホバー時に拡大 */
  }

  /* スマホ向けメディアクエリ */
  @media (max-width: 767px) {
    .customer-tag-banner {
      margin: 20px auto;
      padding: 0 10px;
    }
  }
</style>

この例は、前章のサブスク・会員制ユースケース（ランクごとに別バナー）にそのまま対応します。{% else %} を未ログイン用に用意してあるのがポイントで、これを省くと未ログインの訪問者にバナーが一切出ない、という見落としにつながります。

複数バナーを表示するサンプル

<!-- 複数のバナーをグリッド表示 -->
{% if customer %}
  {% assign show_banner = false %}
  {% assign banner_images = '' | split: ',' %}
  {% assign banner_links = '' | split: ',' %}

  {% comment %} VIPタグを持つ顧客の場合 {% endcomment %}
  {% for tag in customer.tags %}
    {% if tag == 'VIP' %}
      {% assign show_banner = true %}
      {% assign banner_images = 'vip-banner-1.jpg,vip-banner-2.jpg,vip-banner-3.jpg' | split: ',' %}
      {% assign banner_links = '/collections/vip-sale,/collections/vip-new,/pages/vip-lounge' | split: ',' %}
    {% endif %}
  {% endfor %}

  {% if show_banner %}
    <div class="customer-tag-banner-grid">
      <h2 class="banner-title">VIP会員様限定</h2>
      <div class="banner-grid">
        {% for image in banner_images %}
          <div class="banner-item">
            <a href="{{ banner_links[forloop.index0] }}">
              <img src="{{ image | asset_url }}" alt="VIPバナー{{ forloop.index }}">
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}
{% endif %}

<style>
  .customer-tag-banner-grid {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
  }
  .banner-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #333;
  }
  .banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .banner-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
  }
  .banner-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .banner-item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
  }

  /* スマホ向けメディアクエリ */
  @media (max-width: 767px) {
    .banner-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .banner-title {
      font-size: 1.5rem;
    }
  }
</style>

複数のキャンペーンを同時に見せたいアパレルのトップページ向けです。1 つのタグに対して複数画像をグリッドで並べたいときに使います。

PC・スマホで異なる画像を表示するサンプル

<!-- PC・スマホで異なる画像を表示 -->
{% if customer %}
  {% for tag in customer.tags %}
    {% if tag == 'VIP' %}
      <div class="responsive-banner">
        <a href="/collections/vip-exclusive">
          <picture>
            <source media="(max-width: 767px)" srcset="{{ 'vip-banner-mobile.jpg' | asset_url }}">
            <img src="{{ 'vip-banner-pc.jpg' | asset_url }}" alt="VIP限定キャンペーン">
          </picture>
        </a>
      </div>
    {% endif %}
  {% endfor %}
{% endif %}

<style>
  .responsive-banner {
    max-width: 100%;
    margin: 40px auto;
  }
  .responsive-banner img {
    width: 100%;
    height: auto;
    display: block;
  }
</style>

スマホ流入が多いコスメ・アパレルで重要になる、PC・スマホ別画像のサンプルです。アプリでは設定項目で済む処理を、コードでは <picture> と <source> で自前実装することになります。

カスタマイズのポイント

1. 顧客タグの確認
   {% for tag in customer.tags %} でループし、特定のタグを持っているかをチェックします。タグ名は大文字・小文字を区別するので注意してください。

2. 条件分岐の追加
   複数のタグに応じて異なるバナーを表示したい場合は、{% if %} {% elsif %} {% else %} を使って条件分岐を追加します。

3. 画像パスの変更
   {{ 'banner.jpg' | asset_url }} の部分を、実際の画像ファイル名に置き換えてください。Shopify のファイルアップロード機能を使って画像をアップロードし、そのファイル名を指定します。

4. リンク先の設定
   href="/collections/vip-exclusive" の部分を、実際の遷移先 URL に変更してください。

5. レスポンシブ対応
   <picture> タグと <source> タグを使うことで、デバイスごとに異なる画像を表示できます。

実装手順

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「コードを編集」を開きます。
2. セクションファイル（例：sections/customer-tag-banner.liquid）を新規作成するか、既存のセクションに追記します。
3. 上記のコードをコピー＆ペーストし、画像パスや URL、タグ名を自社ストアに合わせて調整します。
4. テーマエディタで該当セクションを追加し、プレビューで表示を確認します。
5. 問題なければ保存して公開します。

上記は一例ですので、デザインやタグ条件などを自社ストアに合わせて適宜変更してください。テーマ更新時に上書きされるリスクがあるため、万一に備えてテーマを複製しておき、定期的にバックアップを取ることをおすすめします。

よくある質問（FAQ）

Q. 顧客タグは何個まで付けられますか？

Shopify の仕様では、1 顧客あたりのタグは最大 250 個、1 タグあたり最大 255 文字です。これはパフォーマンス改善のために導入された制限で、手動付与・アプリによる自動付与の双方に適用されます。250 個を超えている顧客は既存タグこそ保持されますが、250 未満になるまで新しいタグを追加できません。バナーの出し分けに使うタグは、この上限を圧迫しないよう、命名ルールを決めて整理しておくのが安全です。

Q. 未ログインのお客様にもバナーは出せますか？

顧客タグによる出し分けは、ログイン中の顧客が対象です。customer.tags は未ログイン時に取得できないため、コードで実装する場合は {% else %} 側で「会員登録を促すバナー」など、未ログイン向けの内容を別途用意します。なお新しい「Customer Accounts」環境では、テーマ側で顧客情報が空になる、ログインから 24 時間後に情報が取得できなくなる、といった事象も報告されているため、ログイン状態に依存する表示は念入りに検証してください。

Q. 「特定商品を買った人」だけにバナーを出せますか？

顧客タグ自体は購入条件を自動では持ちませんが、Shopify Flow などで「特定商品を購入した顧客に自動でタグを付与する」ワークフローを組めば実現できます。付与したタグを本アプリの対象タグに指定すれば、「この商品を買った人にだけ関連バナーを出す」という運用が、コードなしで回せます。自動タグ付与とバナー出し分けを組み合わせるのが、実務でいちばん効くパターンです。Shopify Flow での自動タグ付与については、Shopify で注文に応じて顧客タグを自動付与する方法もあわせてご覧ください。

Q. アプリとコード編集、どちらを選べばよいですか？

差し替え頻度が高い、コードを触れる人がいない、テーマ更新で消えるのを避けたい、というストアはアプリが向いています。逆に、独自デザインを細部まで作り込みたい、月額費用をかけたくない、開発リソースがある、という場合はコード編集が選択肢になります。前述の比較表を判断材料にしてください。

まとめ

Shopify で顧客タグに応じた画像バナーを表示する施策は、「全員に同じ画面」を「お客様ごとの画面」に変える、費用対効果の高いパーソナライズです。この記事では、アパレル・コスメ・BtoB・サブスク・店舗併設という業種別のユースケースから入り、それを実現するアプリ設定とコードまでをつなげて解説しました。

• 使いどころ: VIP の先行販売、リピーター・休眠の出し分け、取引先ランク別情報、プラン特典、地域連動など、業種ごとに最適な切り口がある
• 実現方法: ノーコードのアプリと、自前の Liquid 編集の 2 通り。差し替え頻度と運用体制で選ぶ
• おすすめアプリ: 「シンプル顧客タグ画像バナー｜お手軽顧客タグに応じた広告表示」（ノーコード・日本語サポート・PC/スマホ別画像対応、月額 $3.99 で 7 日間の無料トライアルあり）
• 押さえる仕様: 顧客タグは最大 250 個、customer.tags はログイン中のみ有効。Shopify Flow との連携で「自動タグ付与×バナー出し分け」が組める

まずは自社に近いユースケースを 1 つ選び、無料トライアルでそのタグだけバナーを出してみるところから始めてみてください。自動タグ付与と組み合わせれば、運用の手間を増やさずに、お客様ごとの体験を磨き続けられます。

参考記事

この記事は以下の記事を参考にしています。

• Shopify で顧客タグに応じたリンク付き画像バナーを簡単に表示できるアプリについて徹底解説｜ご利用ガイド
• Shopify で顧客タグに応じた画像バナーを表示する方法を 5 つ紹介！
• Shopify の顧客タグに応じた画像バナーアプリおすすめ 10 選