Shopify で商品ページにタグを表示する方法は？おすすめのアプリも紹介！

目次

• はじめに
• 記事の構成
• Shopify で商品タグを表示できる？
• Shopify の商品タグを表示するメリット・デメリット
  • メリット
  • デメリット
• テーマのコード編集 or アプリ利用の比較
  • テーマのコード編集で実装する方法
  • アプリを利用して実装する方法
  • 結論：手軽に試すならアプリがおすすめ
• おすすめアプリ「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」紹介
  • アプリの基本情報
  • 特徴
  • どんなストアに向いている？
• 「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」のインストール手順
  • インストール手順
• アプリブロックを商品ページに追加する
  • 自動でアプリをテーマに追加（1 クリック）
  • 手動でアプリをテーマに追加
• シンプル商品ページラベル表示アプリのカスタマイズ
  • タグ表示設定
  • デザイン設定
  • 余白設定
  • その他の設定
• Shopify 商品タグを活用する運用のコツ
  • タグの種類を整理しておく
  • 強調タグは 1〜2 個に絞る
  • タグ文言は短く、意味が伝わるものにする
  • タグリンクで回遊を促す
• 表示されないときのチェックポイント
• テーマのコード編集で実装する場合のサンプルコード
  • サンプルコード
  • サンプルコードのポイント
• コード編集で実装する際の注意点
  • 作業前にテーマを複製してバックアップする
  • 追加場所はセクション化すると管理しやすい
  • テーマ更新で消えるリスクを把握する
• よくある質問
  • Shopify で商品タグを好きな場所に表示できる？
  • 手軽に始めるならどちらがおすすめ？
  • 無料で実装する方法はある？
• まとめ
  • 参考リンク

はじめに

Shopify ストアで商品を販売していると、「この商品は新作」「期間限定」「再入荷」「送料無料対象」といった情報を、もっと分かりやすく伝えたくなる場面が多いはずです。こうした情報は商品タグとして管理されていることが多いものの、タグをそのまま表示できないため、ユーザーに伝わりにくいという課題があります。

そこで注目したいのが Shopify 商品タグ を「商品ページにラベルとして表示する」施策です。視認性が高まり、訴求力が上がり、回遊や購入の後押しにつながります。本記事では Shopify 商品タグ をテーマに、商品ページにタグを表示する方法をわかりやすく解説します。

• Shopify で商品タグは表示できるのか
• 商品タグ表示のメリット・デメリット
• テーマのコード編集とアプリ導入の違い
• 手軽に試すならアプリがおすすめな理由
• おすすめアプリ「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」の紹介
• 公式ガイド準拠のインストール手順と使い方
• コード編集で実装する場合のサンプルコード

「ノーコードで試したい」「商品ページの訴求を強化したい」「Shopify 商品ラベルを見やすく整理したい」という方は、最後まで読むことで最適な選択肢を見つけられるはずです。

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

• Shopify の商品ページにタグを表示できるアプリ20選を紹介！
• Shopify で商品ページにタグを表示できるアプリを5つ紹介！
• Shopify で商品ページにタグを表示する方法を5つ紹介！
• Shopifyで商品ページにラベルや商品タグを表示するアプリについて徹底解説

記事の構成

この記事は以下の流れで解説します。

• Shopify で商品タグを表示できる？
• Shopify の商品タグを表示するメリット・デメリット
• テーマのコード編集とアプリ導入の違い（それぞれのメリット・デメリット）
• 手軽に試すならアプリがおすすめな理由
• おすすめ Shopify アプリ「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」の紹介
• アプリのインストール手順と簡単な使用方法（公式ガイド準拠）
• テーマのコード編集で実装する場合のサンプルコード

読み終える頃には、あなたのストアに合った方法で Shopify 商品タグ を表示し、商品ページの訴求を高めるための準備が整うはずです。

Shopify で商品タグを表示できる？

結論から言うと、Shopify で商品タグを商品ページに表示することは可能です。ただし、標準機能だけでは「タグをラベルとして表示する」機能は用意されていないため、次の 2 つの方法のいずれかで実装する必要があります。

1. テーマのコードを編集して実装する方法
2. アプリを利用してノーコードで実装する方法

どちらを選ぶべきかは、ストアの運用体制・更新頻度・デザインのこだわり度によって変わります。例えば、

• デザインを完全にコントロールしたい
• 社内にエンジニアがいる
• 導線の細部まで作り込みたい

という場合はコード編集が向いています。一方で、

• すぐに検証したい
• ノーコードで試したい
• 運用担当が非エンジニア

という場合はアプリ導入が最短ルートです。次のセクションで、メリット・デメリットを整理していきます。

Shopify の商品タグを表示するメリット・デメリット

「Shopify 商品タグ」を商品ページに表示するべきか判断するために、メリットとデメリットを整理しておきます。

メリット

重要情報が一目で伝わる

商品ページでは、説明文や商品スペックが長くなりがちです。その中で「新作」「セール」「限定」などの重要情報を視覚的にまとめると、ユーザーが瞬時に判断しやすくなります。Shopify 商品ラベル として見せることで、スクロールせずとも重要情報を把握できるのが強みです。

購入の意思決定を後押しできる

「残りわずか」「期間限定」などの情報は、購買行動の強いトリガーになります。タグをラベル化して目立たせることで、迷っているユーザーの背中を押しやすくなります。

ストアの統一感を保ちながら訴求できる

アプリやコードでデザインを整えれば、ブランドカラーやフォントに合わせた Shopify 商品ラベル を作れます。バラバラな情報をまとめて表示できるため、ストアの統一感が損なわれにくいのも魅力です。

回遊や滞在時間の増加につながる

タグをリンク化できる場合、同じタグの商品一覧へ誘導できるようになります。「関連商品を見たい」ユーザーを自然に回遊させ、滞在時間や閲覧数を伸ばしやすくなります。

デメリット

表示しすぎると見づらくなる

タグが多すぎると、ラベルの表示がゴチャつき、逆に見づらくなります。重要な情報だけを厳選し、表示数を絞る運用が必要です。

設定やデザイン調整に手間がかかる

テーマ編集やアプリ設定には、初期の調整が必要です。タグの表示条件や色の設計を丁寧に行わないと、意図しない表示になることもあります。

コストが発生する場合がある

アプリを利用する場合は月額料金が発生します。コストに見合う効果が見込めるか、導入前に整理しておきましょう。

テーマのコード編集 or アプリ利用の比較

Shopify で商品タグを表示する方法には、テーマのコード編集 と アプリ導入 の 2 つがあります。それぞれのメリット・デメリットを整理します。

テーマのコード編集で実装する方法

Liquid / HTML / CSS を編集して、商品ページ内にタグ表示の仕組みを作る方法です。

メリット

• デザイン自由度が高い（ストアの雰囲気に完全に合わせられる）
• 外部アプリに依存しない（仕様変更の影響を受けにくい）
• 月額費用がかからない（実装コストは別）
• 表示条件を細かく制御できる（特定テンプレート、特定コレクションなど）

デメリット

• 実装にスキルが必要（初心者には難易度が高い）
• テーマ更新で差分が上書きされる可能性がある
• トラブル発生時は自己解決が必要
• 検証や AB テストのスピードが落ちやすい

アプリを利用して実装する方法

Shopify アプリをインストールし、管理画面の設定だけでタグ表示を実装する方法です。

メリット

• ノーコードで導入できる
• すぐに公開でき、検証が早い
• UI でデザインや表示場所を調整しやすい
• サポートがある場合、困ったときに相談できる

デメリット

• 月額費用がかかる
• デザイン自由度はアプリ仕様に依存する
• アプリ同士の競合による表示崩れや速度低下のリスクがある

結論：手軽に試すならアプリがおすすめ

Shopify 商品タグ の表示は、「設置 → 計測 → 改善」を繰り返す施策です。最初から完璧に作り込むよりも、まずは早く試して改善できる環境を作ったほうが成果につながりやすいです。

• タグの出し分けを試す
• 表示位置を変えて反応を見る
• 文言や色を変更して効果検証する

こうした改善を短期間で回すなら、アプリ導入が最短ルートになります。

おすすめアプリ「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」紹介

手軽に Shopify 商品タグ を商品ページに表示したいなら、シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定 が有力な選択肢です。

アプリ URL:
https://apps.shopify.com/sa-146-ur-prod-tag-label?locale=ja

アプリの基本情報

• アプリ名: シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定
• 価格: 月額 $2.99（7 日間無料体験あり）
• 開発者: UnReact Inc.
• カテゴリー: バッジとアイコン
• 対応言語: 英語、日本語、ほか多数

特徴

商品ページでタグをラベルとして表示できる

タグをそのまま見せるのではなく、ラベルとして整形して表示できます。「新商品」「セール」「限定」など、訴求したい情報をわかりやすく伝えられます。

タグごとの表示・非表示を柔軟に設定できる

「表示したいタグだけ見せる」「運用タグは隠す」といった制御ができます。商品数が多いストアほど、整理された表示が重要です。

指定したタグを強調表示できる

「セール」「限定」など、特に見せたいタグだけ強調できるため、購入の後押しに効果的です。

ノーコードで見た目をカスタマイズできる

文字色・背景色・枠線・余白などを管理画面で調整できます。テーマの雰囲気に合わせて Shopify 商品ラベル を整えられるのが強みです。

どんなストアに向いている？

• Shopify 商品タグをわかりやすく表示したい
• まずはノーコードで試したい
• 商品ページの訴求力を上げたい
• ブランドの世界観に合わせてラベルデザインを調整したい

「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」のインストール手順

ここからは、公式ガイドを元にインストール手順を紹介します。

ご利用ガイド:
https://unreact.jp/shopify-apps/sa-146-ur-prod-tag-label/guide

インストール手順

1. Shopify 管理画面左下の「設定」をクリック

2. 「アプリ」をクリックし、「Shopify App Store」に移動

3. 検索窓に「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」と入力し、表示されたアプリをクリック

4. アプリ詳細画面の「インストール」ボタンをクリックしてストアにインストール

5. 権限の確認画面で内容を確認し、インストールを完了

以上で、アプリのインストールは完了です。インストール日から 7 日間は無料体験として利用できます。

アプリブロックを商品ページに追加する

このアプリは「アプリブロック」としてテーマに追加して使います。商品ページ（Product template）にブロックを追加すると、商品タグがラベルとして表示されます。

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

アプリ管理画面側に「テーマに追加」系の導線がある場合は、案内に沿って進めるとスムーズです。

1. Shopify 管理画面で本アプリを開く
2. 「テーマを選択」から適用したいテーマを選択
3. 「テーマに追加」をクリック
4. テーマエディタが開いたら「保存する」

手動でアプリをテーマに追加

自動追加がうまくいかない場合や、テンプレートを指定して追加したい場合は手動で行います。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く
2. 上部のテンプレート選択から「商品」テンプレート（例：デフォルト商品）へ移動
3. 「セクションを追加」または「ブロックを追加」をクリック
4. 「アプリ」タブから 「UR: Product Page Label Display」（本アプリ）を選んで追加
5. 表示位置を調整し「保存する」

シンプル商品ページラベル表示アプリのカスタマイズ

テーマにアプリブロックを追加したら、テーマエディタで本アプリのカスタマイズを行えます。ブロック（UR: Product Page Label Display）をクリックすると、設定項目が表示されます。

ここからは、設定画面に合わせて、各項目を分かりやすく解説します。

タグ表示設定

表示モード

タグの出し分け方を決めます。用途に合わせて次のように使い分けるのがおすすめです。

• 指定タグのみを表示: 見せたいタグだけを「指定タグ」に入れてホワイトリスト表示
  • 例: new,sale,limited だけ見せる
• 指定タグ以外を表示: 見せたくないタグを「指定タグ」に入れてブラックリスト非表示
  • 例: internal,hidden は隠して、それ以外を表示

指定タグ

表示または非表示にするタグを、カンマ区切りで入力します。

• 例: sale,new,limited
• 空欄の場合は全タグが表示されます

タグ名は、実際に商品に設定されているタグと同じ表記で入力してください（全角/半角などに注意）。

強調タグ

強調表示（目立つデザイン）したいタグを、カンマ区切りで指定します。

• 例: sale,hot
• 「セール」「限定」「人気」など、コンバージョンに直結しやすい情報の強調に便利です。

タグリンクを有効化

有効にすると、ラベル（タグ）をクリックした際に、そのタグで絞り込んだ商品一覧ページへ遷移します。
「同じテイストの商品も見たい」という回遊を促したい場合におすすめです。

タグ接頭辞

タグ名の前に付ける文字を設定できます。

• 例: # / @ など
• ハッシュタグ風の見せ方にしたい場合に便利です。

接頭辞の後にスペースを追加

有効にすると、接頭辞とタグ名の間に半角スペースを自動で入れます。

• 例: #Sale → # Sale

デザイン設定

ラベルの見た目を、テーマに合わせて調整できます。

• フォントサイズ: ラベル文字の大きさ（px）
• 文字の太さ: フォントウェイト（例: 400/600 など）
• 文字色: 通常タグの文字色
• 背景色: 通常タグの背景色
• 枠線の色: 通常タグの枠線色
• 枠線の太さ: 枠線の太さ（px）
• 角の丸み: 角丸（px）
• 強調タグの背景色: 強調タグ用の背景色
• 強調タグの文字色: 強調タグ用の文字色
• 強調タグの枠線色: 強調タグ用の枠線色

ポイントとしては、

• 通常タグは控えめ
• 強調タグはコントラストを高める

といったメリハリを付けると、重要情報が自然に目に入るようになります。

余白設定

ラベルの読みやすさ・整列感に直結する項目です。

• タグ内の余白（上下）: ラベル内の上下パディング（px）
• タグ内の余白（左右）: ラベル内の左右パディング（px）
• タグ間の余白: ラベル同士の間隔（px）
• 上部の余白（PC）/（スマホ）: ブロック上の余白（デバイス別）
• 下部の余白（PC）/（スマホ）: ブロック下の余白（デバイス別）

スマホだけ余白を少し広めにすると、指で触りやすく読みやすい UI になりやすいです。

その他の設定

追加の CSS

設定項目以外の微調整をしたい場合に、CSS を追記して上書きできます。
検証ツールなどでクラス名を確認し、必要なスタイルを追加してください。

• 例: フォントをさらに細かく調整したい
• 例: ホバー時のスタイルを変えたい
• 例: ラベルの表示位置をテーマ都合で微調整したい

Shopify 商品タグを活用する運用のコツ

タグ表示を作っただけでは効果が最大化しません。運用で差が出るポイントをまとめます。

タグの種類を整理しておく

商品タグは増えすぎると管理が難しくなります。まずは以下のように分類し、表示対象を絞りましょう。

• 表示したいタグ: new sale limited free-shipping など
• 表示しない運用タグ: internal draft hidden など

見せたいタグだけをホワイトリストで表示する設計のほうが、ミスが起きにくくおすすめです。

強調タグは 1〜2 個に絞る

強調タグが多いと、強調の意味が薄れます。「セール」と「限定」など、購入に直結するタグだけを強調するのが効果的です。

タグ文言は短く、意味が伝わるものにする

表示スペースが限られるため、タグ文言は短くするのが基本です。

• NG: 期間限定でお得な価格で購入できます
• OK: 期間限定 SALE 再入荷

タグリンクで回遊を促す

タグをクリックすると関連商品一覧へ飛ぶ設計にすると、商品ページの離脱を抑えられます。

• 同じタグの商品がある場合はリンク化
• タグの無い場合は非表示

というように、回遊導線として活用しましょう。

表示されないときのチェックポイント

アプリを入れたのにタグが表示されない場合は、次の項目を順番に確認すると切り分けやすいです。

• テーマエディタで 保存 を押したか
• 商品ページにアプリブロックを追加できているか
• 追加したページが「公開中のテーマ」か
• スマホだけ表示されない場合、表示設定がデバイス別でオフになっていないか
• ブラウザキャッシュの影響がないか

表示が崩れる場合は、余白やフォントサイズを少しずつ調整して、テーマ全体と馴染ませるのがコツです。

テーマのコード編集で実装する場合のサンプルコード

ここからは、アプリを使わずに Shopify 商品タグ を表示する場合のサンプルです。Shopify の商品タグは product.tags で取得できるため、以下のように表示できます。

サンプルコード

{% comment %}
  商品ページに商品タグをラベル表示する例
  表示対象タグを限定し、強調表示を追加する簡易版
{% endcomment %}

{% assign visible_tags = 'new,sale,limited,free-shipping' | split: ',' %}
{% assign highlight_tags = 'sale,limited' | split: ',' %}

{% if product.tags.size > 0 %}
  <div class="product-tag-labels" role="region" aria-label="商品タグ">
    {% for tag in product.tags %}
      {% if visible_tags contains tag %}
        {% assign is_highlight = highlight_tags contains tag %}
        <span class="product-tag-label{% if is_highlight %} is-highlight{% endif %}">
          {{ tag }}
        </span>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

<style>
  .product-tag-labels {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0;
  }
  .product-tag-label {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 999px;
    background: #f6f6f6;
  }
  .product-tag-label.is-highlight {
    background: #111;
    color: #fff;
    border-color: #111;
  }
</style>

サンプルコードのポイント

表示するタグを限定している

visible_tags に表示したいタグだけを列挙しています。タグが多いストアでも、見せたい情報だけを絞り込めます。

強調タグを設定している

highlight_tags に含まれるタグは強調デザインになります。購入を後押ししたい情報に絞り込んで使うのがおすすめです。

スタイルを簡易にまとめている

CSS をテンプレート内に書いていますが、運用上は theme.css など外部ファイルに移して管理するほうが安全です。

コード編集で実装する際の注意点

コードで商品タグを表示する場合は、次の点を押さえておくとトラブルを減らせます。

作業前にテーマを複製してバックアップする

Shopify はテーマ更新や編集ミスで表示が崩れることがあります。編集前にテーマを複製し、バックアップを確保するのが安全です。

追加場所はセクション化すると管理しやすい

テンプレートに直接書くとページごとの調整が難しくなります。

• セクションとして作成
• テーマエディタから挿入

の形にしておくと、運用担当が触りやすくなります。

テーマ更新で消えるリスクを把握する

テーマの大きな更新でファイルが差し替わると、追記したコードが消えることがあります。更新前に差分管理をしておくと復旧が楽です。

よくある質問

Shopify で商品タグを好きな場所に表示できる？

可能です。テーマのコード編集で任意の場所に実装できますし、アプリを使えばノーコードでさまざまなページに設置できます。

手軽に始めるならどちらがおすすめ？

最初はアプリがおすすめです。Shopify 商品タグ は設置後に文言や位置を調整して改善することが多いため、ノーコードで検証できるメリットが大きいです。

無料で実装する方法はある？

コード編集であれば月額費用はかかりません。ただし実装と保守の工数が必要なので、時間コストも含めて判断するのが現実的です。

まとめ

Shopify で 商品ページにタグを表示することは、商品訴求の強化や購入の後押しに直結する重要な施策です。

• Shopify 商品タグは コード編集でもアプリでも表示可能
• 自由度重視ならコード編集、スピード重視ならアプリ導入が向いている
• 手軽に試すなら「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」が導入しやすい
• 公式ガイド通りに進めれば、インストールからテーマ反映までスムーズ

まずはアプリで「タグ表示」を整え、成果が見えてきたらデザインや出し分けを最適化するのが最短ルートです。あなたのストアに合った形で Shopify 商品ラベル を活用し、商品ページの訴求力を高めていきましょう。

参考リンク

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

• Shopify の商品ページにタグを表示できるアプリ20選を紹介！
• Shopify で商品ページにタグを表示できるアプリを5つ紹介！
• Shopify で商品ページにタグを表示する方法を5つ紹介！
• Shopifyで商品ページにラベルや商品タグを表示するアプリについて徹底解説