商品につけたタグをラベルとして表示

日本語 ディスカッション 技術的なQ＆A

Topic summary

課題: Shopifyテーマ「Dawn」の商品一覧ページで、商品タグをラベルとして表示したい。最初にcard-product.liquidに挿入したコードが動作しなかった。

解決方法:

  • コードを修正し、card_product.tagsを使用することで商品タグの出力に成功
  • 修正後のコード例:
{% for tag in card_product.tags %}
  {{ tag }}
{% endfor %}

追加の質問:

  1. 表示位置の調整: 画像上にラベル表示する場合は<div class="card__inner">内の<div class="card__content">以下に記載し、CSSでposition: absoluteを指定。ブラウザの開発者ツールでHTML構造を確認すると配置位置が理解しやすい。

  2. 条件付き表示: 「Label__New」など特定のタグのみを表示したい場合の実装方法について質問が継続中。

  3. スタイル変更: ラベルの文字色を黒から白に変更する方法についても質問が出ている。

状況: 基本的なタグ表示は解決済み。条件分岐やスタイルのカスタマイズに関する質問が進行中。

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

テーマDawnで商品一覧の各商品部分にタグをラベル表示したく、card-product.liquidに下記コードを入れましたが表示されません。

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

商品タグは登録しており、試しに商品詳細ページ（main-product.liquid）に上記コードを入れたら表示されました。

どの外部サイトを見ても上記コードで合っていそうなのですが、何故でしょうか。

ご回答頂けますと幸いです。

2

ご質問いただいている、商品一覧でタグを出力したい件ですが、

ご記載いただいておりますタグを下記に修正いただきますと、商品タグを出力することが可能かと思われます。

{% for tag in card_product.tags %}
  {{ tag }}
{% endfor %}

ご参考まで。
(キュー小坂)

1 Like
3

商品タグを無事に出力することが出来ました。

card-product.liquidファイルではcard_productで取得できるのですね。

ご回答ありがとうございました。

4

申し訳ございません。

{% for tag in card_product.tags %}
{{ tag }}
{% endfor %}

上記、コードを入力してラベルを表示させたいのですが。

どの部分に入れれば良いのか教えていただけないでしょうか。

5

テーマDawnのcard-product.liquidに挿入する前提でお伝え致します。

画像上にラベル表示させるのか、画像下の部分に表示させるのかによって異なりますが、前者であれば<div class="card__inner>内の

以下に記載しこのspan要素にclass名を指定してcssでposition: absolute;で位置を指定、後者であれば<div class="card__inner>の兄弟要素の
以下の記載したい位置に記載ということなります。

今回に限らずですが、ブラウザの開発者ツールで表示させたい箇所周辺のタグの構造を理解されると、コードの記載位置がお分かり頂けるかと思います。

1 Like
6

ご教授いただきありがとうございます。

上手く画像上にラベル表示させるが出来ました。

何度も申し訳ございません。

もう一点質問なのですが、上記

{% for tag in card_product.tags %}
{{ tag }}
{% endfor %}

を入れた場合Label__Newとした場合、Label__Newと表示されます。

Label__NewこのLabel__を表示させずに、Label__と入ったタグのみを画像の上に表示させる事も可能でしょうか？

7

横から失礼します。

上記でラベル表示に成功しました。

文字のカラーをBLACK→WHITEに変更するにはどうしたらよろしいでしょうか？