Shopify 商品タグを商品ページに表示する方法｜ストア別の使い分けとサンプルコード

目次

• はじめに
• そもそも Shopify の商品タグは表示されない、という前提から
• こんなストアはこう表示する
  • 月数点しか更新しない、世界観重視のブランドストア
  • セール・再入荷・限定が頻繁に動く回転の速いストア
  • 商品点数が数千を超える大型カタログ・絞り込み重視のストア
  • NEW バッジを自動で出したい・運用を自動化したいストア
• タグを表示する前に知っておきたい SEO の落とし穴
• アプリで実装する：「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」
  • アプリの基本情報
  • このアプリが向いているのはどんな場面か
• インストール手順
• アプリブロックを商品ページに追加する
  • 自動でアプリをテーマに追加（1 クリック）
  • 手動でアプリをテーマに追加
• 設定項目をストアの目的に当てはめる
  • タグ表示設定
  • デザイン設定
  • 余白設定
  • その他の設定
• コードで実装する：Liquid サンプルコード
  • このコードの読みどころ
  • コード実装で踏みやすい地雷
• 表示されないときのチェックポイント
• よくある質問
  • Shopify の商品タグは標準で商品ページに表示される？
  • タグはいくつまで付けられる？
  • 商品タグを表示すると SEO に有利になる？
  • 絞り込み機能として使いたい場合は？
  • 手軽に始めるならコードとアプリのどちらから？
  • 無料で実装する方法はある？
• まとめ
  • 参考リンク

はじめに

「新作」「再入荷」「送料無料対象」――こうした情報を商品タグで管理しているストアは多いものの、Shopify の商品タグは標準では購入者の画面に一切表示されません。管理画面で付けたタグは内部の整理・自動化用であって、そのままでは商品ページに出てこないのです。

この記事では、Shopify 商品タグを商品ページに表示する方法を、ストアのタイプ別に整理します。月に数点しか更新しないアパレル、セールを頻発する雑貨、商品点数が数千を超える大型カタログ――同じ「Shopify 商品ページ タグ」というテーマでも、最適な実装は店舗の運用体制でまるで変わります。Liquid のサンプルコードから、ノーコードで Shopify 商品ラベルを整えるアプリ、そして見落とされがちな SEO 上の注意点まで、あなたのストアに当てはまる箇所から読み進めてください。

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

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

そもそも Shopify の商品タグは表示されない、という前提から

最初に押さえておきたいのは、Shopify の商品タグは「裏方のデータ」だということです。管理画面で付けたタグは、商品の絞り込み・自動コレクション・在庫管理ワークフローなどに使われますが、商品ページには標準で出力されません。

タグには公式の上限もあります。1 商品あたり最大 250 個、1 タグあたり最大 255 文字までで、これは API 経由でも超えられません（無制限になるのは Shopify Plus プランのみ）。つまり「タグを大量に付けて整理しているつもり」でも、表示に回せるのはそのごく一部に絞るべき、ということです。

購入者に見せたい場合は、テーマの main-product.liquid（旧テーマでは product-template.liquid）に {% raw %}{% for tag in product.tags %}{% endraw %} を追記するか、テーマカスタマイズの「カスタム Liquid」ブロックを使うか、専用アプリを入れるかの三択になります。どれを選ぶべきかは、次に挙げるストアのタイプで判断するのが近道です。

こんなストアはこう表示する

ここがこの記事の主役です。あなたのストアに近いケースから読んでください。

月数点しか更新しない、世界観重視のブランドストア

アパレルや作家もののように、デザインの一貫性が最優先で、更新頻度がそれほど高くないストア。このタイプは、テーマのコードに直接タグ表示を書き込む方法が向いています。フォントや余白を 1px 単位で詰められ、外部アプリに依存しないため、ブランドの世界観を崩しません。

ただし、更新が少ないからこそ「テーマ更新で追記が消えた」という事故に気づきにくいのが落とし穴です。後述のサンプルコードを使うなら、必ずテーマを複製してから作業してください。筆者の実務でも、リニューアル時にカスタム追記が巻き戻り、タグが消えていたのに数週間気づかなかったケースがありました。

セール・再入荷・限定が頻繁に動く回転の速いストア

雑貨・コスメ・食品など、「セール」や「再入荷」の入れ替わりが激しいストア。ここでコードを毎回触るのは非現実的です。タグの出し分けや色を管理画面から即座に変えられる、ノーコードのアプリが最短ルートになります。

このタイプには、「設置 → 計測 → 改善」を短いサイクルで回せることが効いてきます。文言を「期間限定」から「SALE」に変えて反応を見る、強調色を試す、といった検証をエンジニアの手を借りずに回せるからです。後述の「シンプル商品ページラベル表示」がまさにこの用途に合います。

商品点数が数千を超える大型カタログ・絞り込み重視のストア

ここは注意が必要なゾーンです。「タグで絞り込みたい」という目的なら、タグの表示よりも Shopify Search & Discovery のメタフィールドフィルタを検討してください。タグは件数が増えるとフィルタ一覧が肥大化し、かえって顧客を迷わせます。メタフィールドなら表示する値を限定でき、高度な絞り込みや自動ワークフローにも回せます。

ただしメタフィールドは "Oak" と "oak" のような表記ゆれを別項目として表示してしまうため、データの統一が前提です。「商品ページにラベルとして見せたいのか」「サイドバーで絞り込ませたいのか」を切り分けるのが、大型ストアの最初の分岐点になります。

NEW バッジを自動で出したい・運用を自動化したいストア

「新商品には自動で NEW、セール終了で自動で切り替え」のような条件分岐まで求めるなら、バッジ系の高機能アプリ（Lably / DECO など、無料〜$39/月の価格帯）が候補に入ります。商品タグをそのまま見せる用途と、画像にバッジを重ねる用途は別物だと考えておくと、アプリ選びで迷いません。バッジ訴求まで踏み込みたい場合は、Shopify の新商品ラベル の比較も参考になります。

タグを表示する前に知っておきたい SEO の落とし穴

タグ表示というと「内部リンクが増えて SEO に効く」と語られがちですが、実態は逆に働くこともあります。

タグをリンク化すると、/collections/xxx/tagged/yyy という形式の自動生成ページが大量に作られます。これらは独自コンテンツを持たない薄い商品一覧ページで、検索エンジンのクロールバジェットを浪費しがちです。site:store.com intitle:Tagged -inurl:tagged のような検索で、自店にどれだけ生成されているか確認できます。

タグの本来の価値は、SEO ではなく「顧客体験・絞り込み・自動化」にあります。表示に使うタグは内部リンク目的で増やすのではなく、顧客がひと目で判断できる数点に絞る――この前提を持っておくと、後の運用がぶれません。

アプリで実装する：「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」

回転の速いストアや、非エンジニアが運用するストアに向いた一本が、日本製の シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定 です。管理画面の設定だけで、タグをラベルとして整形して商品ページに出せます。

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

アプリの基本情報

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

このアプリが向いているのはどんな場面か

筆者がこのアプリを勧めるのは、次のような場面です。タグをそのまま見せるのではなくラベルとして整形できるので、「新商品」や「限定」といった訴求語をテーマの雰囲気に馴染ませやすいのが効きます。

• 表示したいタグだけを見せ、internal のような運用タグは隠したい
• 「セール」や「限定」など、特定のタグだけ強調して購入を後押ししたい
• 文字色・背景色・枠線・余白を、コードを書かずにブランドカラーへ合わせたい
• 日本語の管理画面とサポートで進めたい

海外製の無料アプリ（Snap Product Labels & Badges、Magic Product Badges など）と比べると、日本語に完全対応している点と、ラベル表示に機能を絞っている分の設定の分かりやすさが本アプリの持ち味です。

インストール手順

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

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

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

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

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

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

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

これでインストールは完了です。インストール日から 7 日間は無料体験として利用できます。料金は月額 $2.99 ですが、価格は改定される場合があるため最新の表示を App Store でご確認ください。

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

このアプリは「アプリブロック」としてテーマに追加して使います。商品ページ（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 を追記して上書きできます。検証ツールでクラス名を確認し、必要なスタイルを足してください。

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

コードで実装する：Liquid サンプルコード

世界観重視のストアや、外部アプリに依存したくないストア向けに、アプリを使わず 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 に表示したいタグだけを列挙しているので、250 個まで付けられるタグの中から、顧客に見せたい数点だけを安全に絞り込めます。highlight_tags に含めたタグは強調デザインになるため、購入を後押ししたい情報に限定して使うのがおすすめです。

リンク付きで見せたい場合は、{% raw %}<a href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>{% endraw %} のように handleize フィルタで URL 化するのが定石です。ただし前述のとおりタグ別ページが増える点は念頭に置いてください。

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

コード実装で踏みやすい地雷

• 作業前にテーマを複製する: 編集ミスやテーマ更新で表示が崩れることがあります。複製してバックアップを確保してから触りましょう
• セクション化しておく: テンプレートに直書きせず、セクションとして作成してテーマエディタから挿入すると、運用担当が後から触りやすくなります
• テーマ更新で消えるリスクを把握する: 大きな更新でファイルが差し替わると追記が消えることがあります。差分を管理しておくと復旧が楽です

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

アプリやコードを入れたのにタグが出ない場合は、上から順に確認すると切り分けが早いです。

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

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

よくある質問

Shopify の商品タグは標準で商品ページに表示される？

されません。タグは内部の整理・絞り込み・自動化に使われるデータで、購入者の画面には出てきません。表示するには Liquid の追記、カスタム Liquid ブロック、または専用アプリのいずれかが必要です。

タグはいくつまで付けられる？

1 商品あたり最大 250 個、1 タグあたり最大 255 文字までです（無制限になるのは Shopify Plus のみ）。API 経由でもこの上限は超えられないため、表示に使うのはその中の数点に絞るのが現実的です。

商品タグを表示すると SEO に有利になる？

直接の効果は期待しないほうが無難です。タグをリンク化すると薄い自動生成ページが増え、クロールバジェットを浪費することがあります。タグは SEO 目的ではなく、顧客体験・絞り込み・自動化のために使うのが本来の役割です。

絞り込み機能として使いたい場合は？

件数が多いなら、タグよりも Shopify Search & Discovery のメタフィールドフィルタが向いています。表示する値を限定でき、表記ゆれを整えれば顧客が迷いにくいフィルタを作れます。

手軽に始めるならコードとアプリのどちらから？

文言や位置を頻繁に調整するストアはアプリから始めるのが早いです。ノーコードで検証を回せます。デザインを完全に作り込みたい・更新頻度が低いストアは、サンプルコードでの実装が合います。

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

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

まとめ

Shopify 商品タグを商品ページに表示する方法は、ストアのタイプで最適解が変わります。

• 世界観重視・低更新頻度のストアは、Liquid のサンプルコードでデザインを作り込む
• セールや再入荷が頻発する回転の速いストアは、ノーコードのアプリで検証を回す
• 大型カタログ・絞り込み重視のストアは、表示用タグを絞りつつメタフィールドフィルタも検討する
• NEW バッジの自動切り替えまで求めるなら、バッジ系アプリを候補に入れる

手軽に Shopify 商品ラベルを整えたいなら、まずは「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」で表示を作り、反応を見ながら出し分けや色を最適化していくのが進めやすい流れです。タグはあくまで顧客の判断を助ける道具として、見せる数を絞って活用していきましょう。

参考リンク

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

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