商品カードに商品タイプを表示させる方法

[K_S4]

お世話になります。

商品のカードに（商品一覧ページのカード/特集コレクションのカード）に、商品管理で登録した商品タイプをタグのような形で表示したいのですが、liquidファイル上でのコードの記述方法がわかりません。

どなたかご存知の方いらっしゃいますでしょうか。

[Qcoltd]

ご質問いただいている、添付画像の様に複数の商品タイプを表示する件ですが、

Shopifyのヘルプセンターによると、商品タイプは1つのみとの事です。

参考記事

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. 次の行に下記コードを追加

{% if card_product.type != blank %}
  <span>{{ card_product.type }}</span>
{% endif %}

また、複数商品タイプを表示したい場合は、タグを利用されると良いかもしれません。

タグでしたら、複数登録することが可能です。

上記の6で追加したコードを下記に変更ください。

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

商品タイプ・商品タグとも、金額の下にタグが表示する仕様となります。

表示の見た目につきましては、css等でご調整いただければと思います。

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

[K_S4]

ご回答いただきありがとうございます。

無事サイト側にも反映ができました。

[K_S4]

ご回答いただきありがとうございます。

無事サイト側にも反映ができました。

ちなみにその出力されたタイプにリンクを持たせ、クリックすると対象のコレクションページに遷移させるようなことは可能でしょうか。

[Qcoltd]

@K_S4様

出力されたテキストにリンクを設定することも可能です。

リンクを設定した場合、商品カードの作り上そのままではリンクをクリックできませんので、CSSで表示順を調整いただければと思います。

商品タイプをご利用の場合

{% if card_product.type != blank %}
  <span><a href="{{ shop.url }}/collections/types?q={{ card_product.type }}">{{ card_product.type }}</a></span>
{% endif %}

商品タグをご利用の場合

{% for tag in card_product.tags %}
  <span><a href=”{{ shop.url }}/collections/all/{{ tag }}”>{{ tag }}</a></span>
{% endfor %}

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