商品画像の左上に「NEW」というラベルを表示

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を微調整して希望どおり表示。未解決事項はなし。

Summarized with AI on December 16. AI used: gpt-5.

サン様
はじめまして。
CSSの細かな調整は必要ですが、商品タグの取得、表示は下記ソースをお試しください。
検証ツールでは「new」の確認は出来ました。

{% for tag in card_product.tags %}
 {%- if tag contains 'label_' -%}
  
   {{ tag | split: 'label_' | limit:1 }}
  

 {%- endif -%}
{% endfor %}
1 Like