特定タグが見つからない時、見出しとdivを非表示にしたい

Topic summary

課題: 商品タグのうち特定のものだけを表示し、該当タグがない場合は見出しとdivを非表示にしたい。既存コードは「タグ名1」「タグ名2」などを手動で列挙してリンク生成。

提案: タグに接頭辞「__tag:」を付ける命名規則を導入し、Liquid(Shopifyのテンプレート言語)で走査して表示対象を自動識別。

実装: ループで「__tag」を含むタグを検出したら、isVisible=trueに設定し、splitで「__tag:」以降の文字列をtagNameとして取得してbreak。終了後、isVisibleのときのみHTML(見出しとdiv)を出力。該当がなければ何も出力しないため非表示を実現。

補足: HTMLの出力部分とLiquidのロジックを分離して記述し、保守性を向上。質問にあったコレクションへのリンク処理は回答では範囲外。

現状: 要望を満たす具体的なコード例が提示され、解決に向けて明確な方針が示された。未解決の大きな論点は特になし。

Summarized with AI on February 24. AI used: gpt-5.

こんにちは
商品に特定タグが付与されている場合、特定タグのみ表示したいです。
また、特定タグが見つけられなかった場合には空の

自体も非表示にしたいです。
お分かりになる方、教えてくださいm(_ _)m

サンプルコード


見出し: 
{% for tag in product.tags %}
{% if tag contains 'タグ名1' or tag contains 'タグ名2' or tag contains 'タグ名3' %}
{% capture url %}/collections/collection-name/{{tag | handle}}{% endcapture %}
{{ tag | link_to:url }}
{% endif %}
{% endfor %}

はい、一例ですが、商品に「__tag:”表示したいタグ名”」の形式でタグを登録し、以下のようなコードを追加することで可能です。

サンプルで頂いている条件分岐の中に「タグ名1」「タグ名2」などと固有の名称を入れる形ですと、名称を増やす場合に都度コードの編集が必要になるため、商品に登録をするタグ側で表示したい内容を特定するための文言(今回の場合 “__tag:”)を入れる形が良いと思います。

また、見出しやdivを非表示にと頂いている点につきましては、下記コード例のように実際に出力をする箇所(HTML)とLiquidのロジックの部分を分けて書くことで対応ができると思います。

(サンプルのコードにコレクションへのリンクの記述がございましたが、一旦ご質問として頂いているタグベースでの要素の出しわけに絞って回答をさせていただきました。)


コード例:

{% assign isVisible = false %}

{% for tag in product.tags %}
{%-if tag contains ‘__tag’ %}
{% assign isVisible = true %}
{% assign tagName = tag | split: ‘__tag:’ | last %}
{% break %}
{% endif %}
{% endfor %}

{% if isVisible %}

見出し: {{ tagName }}
{% endif %}