# 商品につけたタグをラベルとして表示 **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [May 21, 2023, 6:19am UTC](https://community.shopify.com/t/topic/217721 "2023-05-21T06:19:02Z")\ **Posts on this page:** 7\ **Page:** 1 ## AI-generated summary **課題:** Shopifyテーマ「Dawn」の商品一覧ページで、商品タグをラベルとして表示したい。最初に`card-product.liquid`に挿入したコードが動作しなかった。 **解決方法:** - コードを修正し、`card_product.tags`を使用することで商品タグの出力に成功 - 修正後のコード例: ``` {% for tag in card_product.tags %} {{ tag }} {% endfor %} ``` **追加の質問:** 1. **表示位置の調整:** 画像上にラベル表示する場合は`
`内の`
`以下に記載し、CSSで`position: absolute`を指定。ブラウザの開発者ツールでHTML構造を確認すると配置位置が理解しやすい。 2. **条件付き表示:** 「Label__New」など特定のタグのみを表示したい場合の実装方法について質問が継続中。 3. **スタイル変更:** ラベルの文字色を黒から白に変更する方法についても質問が出ている。 **状況:** 基本的なタグ表示は解決済み。条件分岐やスタイルのカスタマイズに関する質問が進行中。
**Author:** ![ec\_man](https://avatars.discourse-cdn.com/v4/letter/e/9de0a6/32.png) [@ec\_man](https://community.shopify.com/u/ec_man)\ **Post date:** [May 21, 2023, 6:19am UTC](https://community.shopify.com/t/topic/217721/1 "2023-05-21T06:19:02Z")
テーマDawnで商品一覧の各商品部分にタグをラベル表示したく、card-product.liquidに下記コードを入れましたが表示されません。 ```markup {% for tag in product.tags %} {{ tag }} {% endfor %} ``` 商品タグは登録しており、試しに商品詳細ページ（main-product.liquid）に上記コードを入れたら表示されました。 どの外部サイトを見ても上記コードで合っていそうなのですが、何故でしょうか。 ご回答頂けますと幸いです。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [May 22, 2023, 2:16am UTC](https://community.shopify.com/t/topic/217721/2 "2023-05-22T02:16:56Z")
ご質問いただいている、商品一覧でタグを出力したい件ですが、 ご記載いただいておりますタグを下記に修正いただきますと、商品タグを出力することが可能かと思われます。 ```markup {% for tag in card_product.tags %} {{ tag }} {% endfor %} ``` ご参考まで。 (キュー小坂) ---
**Author:** ![ec\_man](https://avatars.discourse-cdn.com/v4/letter/e/9de0a6/32.png) [@ec\_man](https://community.shopify.com/u/ec_man)\ **Post date:** [May 22, 2023, 9:44am UTC](https://community.shopify.com/t/topic/217721/3 "2023-05-22T09:44:34Z")
商品タグを無事に出力することが出来ました。 card-product.liquidファイルではcard\_productで取得できるのですね。 ご回答ありがとうございました。 ---
**Author:** ![SSHH\_09](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@SSHH\_09](https://community.shopify.com/u/SSHH_09)\ **Post date:** [August 20, 2023, 2:40am UTC](https://community.shopify.com/t/topic/217721/4 "2023-08-20T02:40:24Z")
申し訳ございません。 {% for tag in card\_product.tags %} {{ tag }} {% endfor %} 上記、コードを入力してラベルを表示させたいのですが。 どの部分に入れれば良いのか教えていただけないでしょうか。 ---
**Author:** ![ec\_man](https://avatars.discourse-cdn.com/v4/letter/e/9de0a6/32.png) [@ec\_man](https://community.shopify.com/u/ec_man)\ **Post date:** [August 22, 2023, 8:54pm UTC](https://community.shopify.com/t/topic/217721/5 "2023-08-22T20:54:53Z")
テーマDawnのcard-product.liquidに挿入する前提でお伝え致します。 画像上にラベル表示させるのか、画像下の部分に表示させるのかによって異なりますが、前者であれば\
の兄弟要素の 以下の記載したい位置に記載ということなります。 今回に限らずですが、ブラウザの開発者ツールで表示させたい箇所周辺のタグの構造を理解されると、コードの記載位置がお分かり頂けるかと思います。 ---
**Author:** ![SSHH\_09](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@SSHH\_09](https://community.shopify.com/u/SSHH_09)\ **Post date:** [August 23, 2023, 1:31am UTC](https://community.shopify.com/t/topic/217721/6 "2023-08-23T01:31:34Z")
ご教授いただきありがとうございます。 上手く画像上にラベル表示させるが出来ました。 何度も申し訳ございません。 もう一点質問なのですが、上記 {% for tag in card\_product.tags %} {{ tag }} {% endfor %} を入れた場合Label\_\_Newとした場合、Label\_\_Newと表示されます。 Label\_\_NewこのLabel\_\_を表示させずに、Label\_\_と入ったタグのみを画像の上に表示させる事も可能でしょうか？ ---
**Author:** ![Done\_hm](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@Done\_hm](https://community.shopify.com/u/Done_hm)\ **Post date:** [January 11, 2024, 1:17pm UTC](https://community.shopify.com/t/topic/217721/7 "2024-01-11T13:17:42Z")
横から失礼します。 上記でラベル表示に成功しました。 文字のカラーをBLACK→WHITEに変更するにはどうしたらよろしいでしょうか？