2026/01/19

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！

@ 信条刃

今回の記事は Shopify App Store で提供されている、商品ページに「商品タグ」を表示（ラベル・バッジ化）できるアプリについての記事です。

「新商品」「セール」「限定」「予約商品」など、運用で付けている商品タグを、そのまま購入導線の近くで見せたい。そんなときに役立つアプリを 5 つまとめて紹介します。
合わせて、アプリに頼らずに コーディングでタグを表示する方法（Liquid） も載せます。

商品ページに表示する「商品タグ」とは

Shopify の商品タグ（product tags）は、商品を整理・分類するために使うメタ情報です。コレクションの自動条件や、アプリの条件分岐（タグが付いている時だけバッジを出す等）にもよく利用されます。

ただし、Shopify テーマの標準状態では 商品ページ上にタグが必ず表示されるわけではありません。
そのため「タグをラベルとして見せたい」「タグごとに見せ方を変えたい」という要望が出たときは、次のどちらかで実現することが多いです。

アプリを入れて、タグを「ラベル／バッジ」として表示する
テーマ（Liquid）を編集して、タグを表示する

今回はこのうち、まずは アプリでお手軽に実装する方法を中心に紹介します。

商品タグ表示を導入する利点

商品タグを商品ページ上に見える形で出すと、単なる装飾ではなく、購入判断を助ける情報設計になります。代表的なメリットをまとめます。

購入判断の迷いを減らせる
「限定」「残りわずか」「送料無料」など、重要情報が一目で分かると、比較検討の時間を短縮できます。
重要情報の見落としを防げる
配送条件や納期（例：予約商品）など、本文を読まないユーザーにも伝えやすくなります。
回遊中のストレスを下げられる
コレクションから商品ページに遷移したあとも、特徴が即座に把握でき、戻る／進むの判断が速くなります。
セールやキャンペーンの訴求が強くなる
セール対象タグを付けておけば、商品点数が多くても運用でまとめて「セール」表示にできます。
ブランドの統一感が出る
ラベルの見た目を揃えることで、商品ページ全体のデザインが整い、信頼感が上がります。
テストしやすい
「新商品」ラベルを出す／出さないで CTR や CVR がどう変わるか、施策として検証できます。
運用の負担が減る
商品説明文を個別に書き換えなくても、タグ付けだけで表示を切り替えられる運用が作れます。
スタッフ間でルール化しやすい
「ラベルはタグで管理」というルールにすると、誰が更新してもブレにくくなります。
アプリ連携の拡張性が高い
多くのラベル／バッジ系アプリはタグ条件に対応しているため、後から機能追加しやすいです。

商品タグ表示アプリの選び方

商品タグを見える化するアプリ選定では、単に「表示できる」だけでなく、運用に耐えるかが重要です。私が見るポイントは以下です。

商品ページで タグ一覧をそのまま表示できる（またはタグをラベル化できる）
タグごとに 表示・非表示を柔軟に制御できる
特定タグを 強調表示できる（「新商品」「セール」など）
ノーコードで 色・形・文言をカスタマイズできる
タグ条件（またはメタフィールド条件）で 表示ルールを作れる
テーマへの追加が簡単（ブロック追加、ワンクリック導入など）
日本語対応（管理画面・サポート・翻訳）が必要かどうか

「とにかくタグを一覧で見せたい」のか、「タグをトリガーにバッジ運用したい」のかで最適解が変わります。
次の章で、アプリなし（コーディング）での実装も含めて整理します。

コーディングで商品ページにタグを表示する方法（アプリなし）

「アプリを増やしたくない」「タグ表示はシンプルでいい」「表示ルールは自前で作りたい」という場合は、テーマに Liquid を追加するのが最短です。

ここでは 商品ページにタグをラベル表示する実装例を載せます。Online Store 2.0 なら、コード編集が不安な場合でも「カスタム Liquid」ブロックで対応できることが多いです。

実装手順（おすすめ）

まずはテーマを複製（バックアップ）してから作業
商品テンプレート（例：main-product.liquid）に追加
もしくはテーマエディタで「カスタム Liquid」ブロックを商品情報付近に追加

タグをラベルとして一覧表示する Liquid（強調タグ・非表示タグつき）

{% comment %}
  商品タグをラベルとして表示する例
  - hidden_tags: 表示したくないタグ
  - highlight_tags: 強調したいタグ（例：新商品/セール/限定）
{% endcomment %}

{% if product.tags.size > 0 %}
  {% assign hidden_tags = 'internal,staff-only' | split: ',' %}
  {% assign highlight_tags = '新商品,セール,限定' | split: ',' %}

  <ul class="product-tag-list" aria-label="商品タグ">
    {% for tag in product.tags %}
      {% unless hidden_tags contains tag %}
        {% assign is_highlight = false %}
        {% if highlight_tags contains tag %}
          {% assign is_highlight = true %}
        {% endif %}

        {% comment %}
          タグごとに色を変えたい場合は case を使う
        {% endcomment %}
        {% assign label_color = '#333333' %}
        {% case tag %}
          {% when 'セール' %}
            {% assign label_color = '#d00000' %}
          {% when '新商品' %}
            {% assign label_color = '#0a7a2a' %}
          {% when '限定' %}
            {% assign label_color = '#6b2bd1' %}
        {% endcase %}

        <li
          class="product-tag{% if is_highlight %} is-highlight{% endif %}"
          style="color: {{ label_color }}; border-color: {{ label_color }};"
        >
          {{ tag }}
        </li>
      {% endunless %}
    {% endfor %}
  </ul>
{% endif %}

最低限の CSS（見た目を整える）

.product-tag-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-tag {
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 999px;
  background: rgba(0,0,0,.02);
  white-space: nowrap;
}

.product-tag.is-highlight {
  font-weight: 700;
}

運用をラクにする小技：タグの接頭辞で「表示用タグ」だけ出す

タグを増やしすぎると「内部運用のタグまで見えてしまう」問題が起きます。
その場合は、表示専用タグを label: で統一する運用が便利です。

label:新商品
label:セール
label:限定

{% assign label_prefix = 'label:' %}

<ul class="product-tag-list" aria-label="商品ラベル">
  {% for tag in product.tags %}
    {% if tag contains label_prefix %}
      {% assign label_text = tag | remove: label_prefix | strip %}
      <li class="product-tag is-highlight">{{ label_text }}</li>
    {% endif %}
  {% endfor %}
</ul>

ここまでできれば、アプリを入れなくても十分に「タグの見える化」は可能です。
一方で、運用担当がノーコードで変更したい場合や、表示ルールが複雑な場合はアプリの方が安全で速いです。

価格比較（ざっくり把握したい方向け）

「まずは月額いくらから始められるか」を、ざっくり比較します（詳細は各アプリのプラン説明参照）。

シンプル商品ページラベル表示
$2.99/月（7 日無料体験あり）
Fordeer 商品ラベル＆バッジ
無料プランあり（有料は $4.99/月〜、無料体験あり）
Essential Trust Badges & Icons
無料プランあり（有料は $6.99/月〜、無料体験あり）
TZ Trust Badges, Payment Icons
無料
Hukify Product Labels & Badges
無料プランあり（有料は $9.99/月〜、無料体験あり）

Shopify アプリの日本語サポート

商品タグ表示は運用担当者が触ることも多いので、日本語対応は意外と効いてきます。
少なくとも「管理画面が日本語」だと、ルール運用がブレにくくなります。

シンプル商品ページラベル表示
日本語対応あり
Fordeer 商品ラベル＆バッジ
日本語未翻訳
Essential Trust Badges & Icons
日本語未翻訳
TZ Trust Badges, Payment Icons
日本語未翻訳
Hukify Product Labels & Badges
日本語未翻訳

使いやすさ

「商品タグを商品ページに分かりやすく表示する」という目的に絞るなら、シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定 が最も導入ハードルが低いです。

タグをそのままラベル化して見せられる
表示／非表示、強調表示ができる
ノーコードでデザイン調整できる
日本語対応がある

一方で、「タグを条件に、複雑なキャンペーンバッジ運用をしたい」場合は、Fordeer や Hukify のようなルール運用の強いアプリが候補になります。
そして「購入の安心材料（支払い・配送・保証）を強化したい」場合は Essential や TrustZ のような信頼系バッジの導入が効きやすいです。

終わりに

今回は、Shopify で商品ページにタグを表示できるアプリを 5 つ紹介しました。

「どれを入れるべきか迷う」場合は、まずは次の考え方で選ぶのがおすすめです。

タグ一覧を見せたい → シンプル商品ページラベル表示
タグ条件でバッジ運用を本格化したい → Fordeer / Hukify
信頼要素・購入後押しを強化したい → Essential / TrustZ

また、アプリを増やしたくない場合は、記事内の Liquid 実装例をベースに テーマ側でタグ表示も十分実現できます。
運用と開発のバランスを見て、最適な方法を選んでみてください。

ここまでお付き合い頂き、誠にありがとうございました。

参考記事

以下の情報整理にあたり、Shopify の「商品タグ運用」「商品ページの情報設計（ラベル・バッジ）」の一般的な考え方を踏まえて構成しています。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！

商品ページに表示する「商品タグ」とは

商品タグ表示を導入する利点

商品タグ表示アプリの選び方

コーディングで商品ページにタグを表示する方法（アプリなし）

実装手順（おすすめ）

タグをラベルとして一覧表示する Liquid（強調タグ・非表示タグつき）

最低限の CSS（見た目を整える）

運用をラクにする小技：タグの接頭辞で「表示用タグ」だけ出す

おすすめの商品ページタグ表示 Shopify アプリ

シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定 ☆ 迷ったらこれ

特徴・機能

価格設定

こんなストアにおすすめ

Fordeer 商品ラベル＆バッジ

特徴・機能

価格設定

注意点

Essential Trust Badges & Icons

特徴・機能

価格設定

注意点

TZ Trust Badges, Payment Icons

特徴・機能

価格設定

注意点

Hukify Product Labels & Badges

特徴・機能

価格設定

注意点

価格比較（ざっくり把握したい方向け）

Shopify アプリの日本語サポート

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！

Shopify の顧客タグに応じた画像バナーアプリおすすめ10選

Shopifyに離脱防止カウントダウンポップアップ表示できるアプリ10選

Shopify にメルマガ登録フォームを表示できるアプリを5つ紹介！

Shopifyでブログの読了時間目安を表示するアプリ10選

Shopify でポップアップをページごとに表示できるアプリを5つ紹介！

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！

Shopify で商品ページにタグを 表示できるアプリを5つ紹介！