Shopifyでは商品にタグを付けて管理することができます。
今回は、商品一覧ページなどで対象の商品に「新商品」や「送料無料」などのラベルを付ける方法をご紹介します。

商品にタグを付ける

まずは、商品登録画面から必要なタグを付けていきます。
商品登録画面の右側にある「タグ」にテキストを入力してEnterを押すとこのようにタグが設定されます。

今回は新商品のラベルを付けたいので《new》というタグを設定しました。

特定のタグが付いた商品にラベルを付ける

今回は、商品一覧ページで《new》タグが付いた商品に「新商品」ラベルをつけていきます。
ラベルを挿入したいLiquidファイル内の該当箇所に以下のコードを記述します。

{% for tag in product.tags %}
  {% if tag contains 'new' %}
    <p>新商品</p>
  {% endif %}
{% endfor %}

for文で商品タグをループさせて、if文で《new》のタグが付いていた場合「新商品」ラベルが表示されるという条件を指定しています。
あとは、CSSでラベルをお好みのスタイルに整えてください。

splitを使用して様々なラベルを表示する

「送料無料」や「ギフト」など他のタグを同じように追加することもできるのですが、if文の記述が長くなってしまいます。
その場合はsplitを使用してラベルの文言を変更することが可能です。

今回は、《送料無料_label》や《新商品_label》、《ギフト_label》のように、全て共通で "_label" というタグを付けていきます。


ラベルを挿入したいLiquidファイル内の該当箇所に以下のコードを記述します。

{% for tag in product.tags %}
  {% if tag contains '_label' %}
    <p>{{ tag | split: '_' | first }}</p>
  {% endif %}
{% endfor %}

for文で商品のタグをループさせるところまでは先ほどと同じです。
if文では、タグに "_label" が入っている商品のみ、ラベルを表示させるという条件を指定しています。

ラベルにするタグを表示する際には{{ tag }}という記述で出力が可能です。
しかし、「新商品_label」というタグがそのまま出力されてしまうので、splitを使用してタグを分割しています。
例えば《新商品_label》の場合 "_" で分割されるので《新商品》と《label》となります。

そして、firstフィルターを使用することで分割された1つ目の「新商品」のみが出力されます。

《送料無料_label》や《ギフト_label》のようにタグを設定することで「送料無料」や「ギフト」のラベルも同様に表示することが可能です。

Liquidで使用する商品タグは英語で付けるのがおすすめ！

商品のタグは英語でも日本語でも追加することができます。
基本的にはどちらで付けても問題はありません。

しかし、今回のようにLiquidファイル内で使用するタグについてはエラーの原因になる可能性があるので英語で付けたものを使用するのがおすすめです。