FROM CACHE - jp_header

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

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

K_S4
Shopify Partner
6 0 0

お世話になります。

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

 

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

スクリーンショット 2023-05-29 15.24.48.pngスクリーンショット 2023-05-29 15.24.48.png

  • CSS
4件の返信4

Qcoltd
Shopify Partner
1059 436 429

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

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 %}

 

Qcoltd_0-1685358754237.png

 

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

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

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

 

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

 

 

Qcoltd_1-1685358754237.png

 

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

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



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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
K_S4
Shopify Partner
6 0 0

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

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

K_S4
Shopify Partner
6 0 0

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

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

 

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

Qcoltd
Shopify Partner
1059 436 429

@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 %}


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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/