商品ページで商品につけたタグをラベルとして表示させたい

Topic summary

商品ページの価格横に、商品タグをラベル表示させる実装についての質問です。

目的:

  • Dawnテーマを使用
  • 「セール」ではなく、タイミングに応じて「早割」「超早割」など、カスタムタグを表示したい

初期の問題:
質問者が card_product.tags を使用したコードを試したが、表示されなかった。

解決策:
ogasawarakyohei氏が以下を指摘:

  • card_product はグローバルオブジェクトではなく、定義されていない可能性
  • Dawnの price.liquid には product オブジェクトが渡されているため、product.tags を使用すべき

推奨実装:

{% assign sales_tags = 'セール,早割,超早割' | split: ',' %}
{% for tag in product.tags %}
  {% if sales_tags contains tag %}
    <span>{{ tag }}</span>
  {% endif %}
{% endfor %}

セール関連以外のタグが表示されないよう絞り込む方法として、メタフィールドの使用も提案されました。

結果:
質問者は product.tags を使用したコードで表示に成功しました。

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

お世話になります。

初心者レベルとなりますため、以下ご教授いただければ幸いです。

テーマはDawnを使用しています。

商品ページで金額の横にタグで登録した文言をラベルとして表示させたいと考えています。

狙いとしては、「セール」の表示ではなく、

お客様側で登録したタグの文言を表示させたい

(タイミングによって「早割」「超早割」など、割引にバリエーションを持たせたい)

ということがあります。

金額の横に表示ということで、price.liquidをさわれば良いことはわかったのですが、

タグを登録したうえで、さまざまな参考を見て

{% for tag in card_product.tags %}
  <span>{{ tag }}</span>
{% endfor %}

こちらのコードを入れてみたものの表示されません。

何が間違っているか、どなたかお教えいただけないでしょうか。

よろしくお願いいたします。

card_product には何が入ってますか?

グローバルなオブジェクトではないと思うので、独自で定義している変数ですかね?

もしcard_productがproductを入れたものならtagsプロパティもあると思うので動くかなと思うのですが、動かないということは、

・tagsが入っていない

・そもそもcard_productという変数が定義されていない

あたりが怪しいと思います。

Dawnをお使いでしたら、price.liquidにはセクションからproductが渡されていますので、productを使えば商品のtagsは取得できると思います。

{% for tag in product.tags %}
  <span>{{ tag }}</span>
{% endfor %}

ただ、for文ですべてのタグを出力する感じでいいんですかね?

セール関連に絞りたい場合、

{% assign sale_tags = 'セール,早割,超早割' | split: ',' %}
{% for tag in product.tags %}
  {% if sale_tags contains tag %}
    <span>{{ tag }}</span>
  {% endif %}
{% endfor %}

のようにする必要があります。

これは蛇足ですので、聞き流していただいていいのですが、要件的にはタグを使うのではなく、メタフィールドの方が適しているかなと思いました。

上述したように、セール関連以外のタグが表示されないように絞ったりするハンドリング等で管理が煩雑になりますので。

1 Like

ありがとうございます。

{% for tag in product.tags %}
  <span>{{ tag }}</span>
{% endfor %}

いただいた上記のコードで実装したところうまく表示されました。