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

はじめに
記事の構成
Shopify で商品タグを表示できる？
Shopify の商品タグを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集 or アプリ利用の比較
おすすめアプリ「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」紹介
「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」のインストール手順
- インストール手順
アプリブロックを商品ページに追加する
- 自動でアプリをテーマに追加（1 クリック）
- 手動でアプリをテーマに追加
シンプル商品ページラベル表示アプリのカスタマイズ
Shopify 商品タグを活用する運用のコツ
表示されないときのチェックポイント
テーマのコード編集で実装する場合のサンプルコード
- サンプルコード
- サンプルコードのポイント
コード編集で実装する際の注意点
よくある質問
まとめ
- 参考リンク

はじめに

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

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

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

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

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

記事の構成

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

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

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

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

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

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

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

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

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

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

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

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

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

メリット

重要情報が一目で伝わる

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

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

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

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

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

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

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

デメリット

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

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

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

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

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

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

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

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

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

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

メリット

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

デメリット

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

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

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

メリット

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

デメリット

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

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

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

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

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

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

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

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

インストール手順

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

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

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

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

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

「シンプル商品ページラベル表示｜お手軽商品タグ一覧表示設定」と入力

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

「インストール」ボタンをクリックしてストアにインストール

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

インストールを完了

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

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

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

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

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

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

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

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

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

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

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

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

テーマにアプリブロックを追加したら、テーマエディタで本アプリのカスタマイズを行えます。ブロック（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>