サン様
はじめまして。
CSSの細かな調整は必要ですが、商品タグの取得、表示は下記ソースをお試しください。
検証ツールでは「new」の確認は出来ました。
{% for tag in card_product.tags %}
{%- if tag contains 'label_' -%}
{{ tag | split: 'label_' | limit:1 }}
{%- endif -%}
{% endfor %}
Topic summary
Shopifyテーマ（Dawn）で商品画像左上に「NEW」ラベルを表示したい要件。商品タグを用い、Liquid（Shopifyのテンプレート言語）でラベルを出し分ける方針。
主な実装ポイント:
- タグ取得: card_product.tags をループし、‘label_new’ を検出して表示。追加要望に対応し ‘label_sell’（売れています）も同様に分岐して表示。
- 見た目調整: .card–tag を position:absolute; top:0; で配置。サイズは font-size、padding、width/height を変更して拡大。円形は border-radius:50% とし、width と height を同値に、flex で中央揃え。
- 複数ラベルの横並び: .card–tag.new を left:0、.card–tag.sell を left:60px などとし、隣に並べて固定配置。
進捗と結果:
- 「NEW」の表示に成功。その後、CSSで円形バッジ化やサイズ調整も実現。
- 「売れています」ラベルを追加し、NEWの右横に表示する構成で動作確認済み。
現状: 実装は完了し、利用者側でCSSを微調整して希望どおり表示。未解決事項はなし。
1 Like