Liquid、JavaScriptなどに関する質問
お世話になります。
商品のカードに(商品一覧ページのカード/特集コレクションのカード)に、商品管理で登録した商品タイプをタグのような形で表示したいのですが、liquidファイル上でのコードの記述方法がわかりません。
どなたかご存知の方いらっしゃいますでしょうか。
ご質問いただいている、添付画像の様に複数の商品タイプを表示する件ですが、
Shopifyのヘルプセンターによると、商品タイプは1つのみとの事です。
参考記事
https://help.shopify.com/ja/manual/products/details/product-type
商品タイプが1つのみでしたら、下記手順でタイプを表示することが可能です。
設定手順
{% if card_product.type != blank %}
<span>{{ card_product.type }}</span>
{% endif %}
また、複数商品タイプを表示したい場合は、タグを利用されると良いかもしれません。
タグでしたら、複数登録することが可能です。
上記の6で追加したコードを下記に変更ください。
{% for tag in card_product.tags %}
<span>{{ tag }}</span>
{% endfor %}
商品タイプ・商品タグとも、金額の下にタグが表示する仕様となります。
表示の見た目につきましては、css等でご調整いただければと思います。
ご参考まで。
(キュー小坂)
ご回答いただきありがとうございます。
無事サイト側にも反映ができました。
ご回答いただきありがとうございます。
無事サイト側にも反映ができました。
ちなみにその出力されたタイプにリンクを持たせ、クリックすると対象のコレクションページに遷移させるようなことは可能でしょうか。
出力されたテキストにリンクを設定することも可能です。
リンクを設定した場合、商品カードの作り上そのままではリンクをクリックできませんので、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 %}
ご参考まで。
(キュー小坂)
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024