# 商品カードに商品タイプを表示させる方法 **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css\ **Created:** [May 29, 2023, 6:29am UTC](https://community.shopify.com/t/topic/219827 "2023-05-29T06:29:03Z")\ **Posts on this page:** 5\ **Page:** 1 ## AI-generated summary **課題:** 商品一覧ページや特集コレクションのカードに、商品管理で登録した商品タイプをタグ形式で表示したい。Liquidファイルでのコード記述方法が不明。 **解決策:** - Shopifyの商品タイプは1つのみ登録可能 - `card-product.liquid`ファイルに以下のコードを追加することで表示可能: ``` {% if card_product.type != blank %} {{ card_product.type }} {% endif %} ``` **複数表示の場合:** 商品タグを利用することで複数のタグ表示が可能。以下のコードで実装: ``` {% for tag in card_product.tags %} {{ tag }} {% endfor %} ``` **追加機能:** 出力されたテキストにリンクを設定し、クリックでコレクションページへ遷移させることも可能。ただし、CSSで表示順の調整が必要。 **結果:** 質問者は無事にサイト側への反映に成功。
**Author:** ![K\_S4](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@K\_S4](https://community.shopify.com/u/K_S4)\ **Post date:** [May 29, 2023, 6:29am UTC](https://community.shopify.com/t/topic/219827/1 "2023-05-29T06:29:03Z")
お世話になります。 商品のカードに（商品一覧ページのカード/特集コレクションのカード）に、商品管理で登録した商品タイプをタグのような形で表示したいのですが、liquidファイル上でのコードの記述方法がわかりません。 どなたかご存知の方いらっしゃいますでしょうか。 ![スクリーンショット 2023-05-29 15.24.48.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/7/e738c18625255656e4eb080c84cffe0c23b22ec8.png) ![スクリーンショット 2023-05-29 15.24.48.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/7/e738c18625255656e4eb080c84cffe0c23b22ec8.png) ---
**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 29, 2023, 11:15am UTC](https://community.shopify.com/t/topic/219827/2 "2023-05-29T11:15:22Z")
ご質問いただいている、添付画像の様に複数の商品タイプを表示する件ですが、 Shopifyのヘルプセンターによると、商品タイプは1つのみとの事です。 参考記事 [https://help.shopify.com/ja/manual/products/details/product-type](https://help.shopify.com/ja/manual/products/details/product-type) 商品タイプが1つのみでしたら、下記手順でタイプを表示することが可能です。 **設定手順** 1. 管理画面 \> オンラインストア \> テーマ \> カスタマイズボタン横の「・・・」をクリック 2. コード編集をクリック 3. 左上の検索画面に「card-product.liqiud」と入力 4. 絞り込まれた「card-product.liqiud」をクリック 5. 開いた「card-product.liqiud」内から『{% render ‘price’, product: card\_product, price\_class: ‘’ %}』を検索 6. 次の行に下記コードを追加 ```markup {% if card_product.type != blank %} {{ card_product.type }} {% endif %} ``` ![Qcoltd_0-1685358754237.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/a/2a3d2b8fa84abea9440b1237c0cbf2a93f508412.png) また、複数商品タイプを表示したい場合は、タグを利用されると良いかもしれません。 タグでしたら、複数登録することが可能です。 上記の6で追加したコードを下記に変更ください。 ```markup {% for tag in card_product.tags %} {{ tag }} {% endfor %} ``` ![Qcoltd_1-1685358754237.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/2/729dce4491b7dfdc18e5ab8aa6b95f058d38a3fe.png) 商品タイプ・商品タグとも、金額の下にタグが表示する仕様となります。 表示の見た目につきましては、css等でご調整いただければと思います。 ご参考まで。 (キュー小坂) ---
**Author:** ![K\_S4](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@K\_S4](https://community.shopify.com/u/K_S4)\ **Post date:** [May 31, 2023, 6:26am UTC](https://community.shopify.com/t/topic/219827/3 "2023-05-31T06:26:13Z")
ご回答いただきありがとうございます。 無事サイト側にも反映ができました。 ---
**Author:** ![K\_S4](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@K\_S4](https://community.shopify.com/u/K_S4)\ **Post date:** [May 31, 2023, 6:42am UTC](https://community.shopify.com/t/topic/219827/4 "2023-05-31T06:42:36Z")
ご回答いただきありがとうございます。 無事サイト側にも反映ができました。 ちなみにその出力されたタイプにリンクを持たせ、クリックすると対象のコレクションページに遷移させるようなことは可能でしょうか。 ---
**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 31, 2023, 7:40am UTC](https://community.shopify.com/t/topic/219827/5 "2023-05-31T07:40:46Z")
@K_S4 様 出力されたテキストにリンクを設定することも可能です。 リンクを設定した場合、商品カードの作り上そのままではリンクをクリックできませんので、CSSで表示順を調整いただければと思います。 商品タイプをご利用の場合 ```markup {% if card_product.type != blank %} {{ card_product.type }} {% endif %} ``` 商品タグをご利用の場合 ```markup {% for tag in card_product.tags %} {{ tag }} {% endfor %} ``` ご参考まで。 (キュー小坂)