【Shopify】特定の商品タグのみ表示する方法【サンプルコードあり】

商品の情報として「送料無料」や「NEW」など、ラベル付けをするというのはよくある方法です。ただ、自動コレクションに追加するために既に商品にタグがついていて、「全部出すんじゃなくて特定のタグだけラベルとして出力したいんだけど・・」というケースがあるかと思います。

今回は商品にラベル付けをする際に特定の商品タグのみ出力する方法をサンプルコードとともに解説します。

そもそも商品タグをページ上に出力するには

基本的なところからおさらいをしておきます。Shopifyのテーマでページ上に商品タグを出力する場合は、以下のような記述をする必要があります。

{% for tag in product.tags %}
  {{ tag }}
{% endfor %}

https://shopify.dev/docs/themes/liquid/reference/objects/product

上記で商品タグをページ上に表示することができますが、全てのタグが出力されてしまいます。

商品タグにルール付けをしてif文で制御する

特定のタグのみページ上に反映をしたい場合、タグ付けの名前の決め方を予め定めておき、if文で表示を制御するのが手っ取り早いです。

例えば、以下のような形になります。

{% for tag in product.tags %}
  {%- if tag contains '--showLabel' -%}
    {{ tag | split: '--showLabel' }}
  {%- endif -%}
{% endfor %}

商品タグの中でも「–showLabel」という文字列が含まれている場合のみページ上に表示されるよう条件指定をしています。

例えば「送料無料–showLabel」や「NEW–showLabel」というタグをつけることで、「–showLabel」がついている商品タグのみを表示することが可能です。

{{ tag }}のみだと「送料無料–showLabel」の状態でページ上に反映されてしまうため、{{ tag | split: ‘–showLabel’ }}のようにsplitを使って–showLabelの部分を出力されないようにしています。

記事一覧ページでカテゴリを表示したい

Shopifyでブログページを作成するときに「NEWS」や「SALE情報」など大きな枠組みは作れるのですが、「NEWS」の中でさらにカテゴリ分けをしたいといった場合、タグの機能を使って実装をすることが多いです。

単にカテゴリ（実際はタグ）を見出し下に表示するだけであれば、上記のコードの応用で、for文の対象をarticleに変えるだけでOKです。

{% for tag in article.tags %}
    {{ tag }}
{% endfor %}