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
This cheat sheet is an interactive reference for the Liquid templating language that will help you build ecommerce templates on Shopify.

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

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

Site not found · GitHub Pages

ナナイロ

ECサイト制作に強いフロントエンドエンジニア。Web関連のお役立ち技術情報を発信しています。 2025年の最新のAI生成コーディングのコースをUdemyに公開いたしました。爆速でコードを書きたい方は必見です!! さらに、今年(2025年)からVoicyのパーソナリティに挑戦し始めました!ラジオでWebエンジニアの生の声をお届けしています。

Share
Published by
ナナイロ