特定のタグがついた場合のみ、アイキャッチ画像にオーバーレイをつける方法

日本語 ディスカッション 技術的なQ＆A

Topic summary

特定のタグ（「限定商品」）がついた商品のアイキャッチ画像にオーバーレイを追加する方法についての質問です。

現状：

  • 使用テーマ：Dawn
  • card-product.liquidで「sold out」時のオーバーレイは既に実装済み
  • 同様の方法で限定商品用のオーバーレイも設定したが動作していない

実装コード：

{% if card_product.tags contains '限定商品' %}
<div class="overlay-limited sales_block_link">
{% endif %}

回答：
NIIGAKI_HYUGAさんより、Liquidコードの記述自体に間違いはないとの指摘がありました。

考えられる原因：

  • コードの記述位置
  • 記述ミス
  • CSSのスタイル名や競合
  • タグ名の問題（日本語ではなく英語にする等）

全体的なコードを把握できないため、パートナーへの相談が推奨されています。

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

特定のタグがついた場合のみ、アイキャッチ画像にオーバーレイをつけることは可能でしょうか。

タグ名：限定商品

使用テーマ：dawn

現在、sold outの時のオーバーレイとして、

card-product.liquidの画像の上に、以下のコードを配置して動いています。

〜〜〜

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{%- if card_product.available == false -%}

{%- endif -%}

上記と類似の検討で、同じ位置に以下を設置してみたのですが、うまくいきません。

{%- if card_product.tags contains ‘限定商品’ -%}

{%- endif -%}

どなたかお分かりになれば教えていただけますと幸いです。

よろしくお願い申し上げます。

2

@1646568

初めまして。新垣です。

提示して頂いているコードのliquid記述に間違いはないかと思います。

なので、コードの記述位置や、記述ミス、スタイル名、CSSの競合、他のタグ（日本語ではなく、英字にする）等をお試しください。

解決できないようでしたら、全体的なコードを把握しないとわかりませんので、パートナーに相談することをお勧めいたします。

以上、参考になりましたら幸いです。