Categories: 未分類

【Shopify】アプリなしで商品のステータスラベルを表示!

例えば、新商品には”NEW”というラベルを表示したい、再入荷した商品には”REARRIVAL”ラベルを表示したい、という要件。

以下のコードで完了!

{% if product.tags contains 'newarrival' %}
  <span>NEW</span>
{% elsif product.tags contains 'rearrival' %}
  <span>REARRIVAL</span>
{% else %}
  <span><!--ラベルをなにも表示しない--></span>
{% endif %}

ラベルを出したい箇所にliquidのif文の条件分岐をいれて、
商品に登録する「タグ」( product.tags )を見て

“newarrival”というタグ名があったら、”NEW”という文字を表示する」
“rearrival”というタグ名があったら、”REARRIVAL”という文字を表示する」
で制御すればよいです!

ちなみに、
product.tags“というような”オブジェクト名.プロパティ名
はShopifyにはどんなものがあるか?はここで調べられます!

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid
The Shopify Cheat Sheet is a resource for building Shopify Themes with Liquid. Learn about Liquid basics, tags, filters, and objects.

ここのオブジェクト名.プロパティ名と、
liquidの条件分岐やループ文を使えば、かなりいろんなことができるようになります!

liquidの条件文やループ文はここで調べられます!

Site not found · GitHub Pages

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。Voicyのパーソナリティをしています。ラジオでWebエンジニアの生の声をお届けしています。フォロワー数がザコなのでぜひフォローしてね!