# 新着商品のトップ画像の左上に『new』というラベルを表示させたい。

**URL:** <https://community.shopify.com/t/new/298920>\
**Category:** 技術的なQ＆A\
**Created:** [February 23, 2024, 9:44am UTC](https://community.shopify.com/t/new/298920 "2024-02-23T09:44:26Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

商品一覧ページやコレクションページで、新着商品のトップ画像左上に「NEW」ラベルを自動表示する機能の実装方法について質問されています。

**要件:**
- 新着商品（直近でアクティブ化された商品）にのみ表示
- 在庫が1以上の場合のみ表示、品切れ（在庫0）時は非表示
- 商品詳細ページでは非表示
- 以前の新着商品からは自動的にラベルを外す
- 既存の「SOLDOUT」ラベルとの重複を防ぐ

**提案された解決策:**
1. `collection.products`をループ処理し、各`product`オブジェクトの`available`プロパティで在庫有無を判断
2. `published_at`プロパティ値が最新のものを新着商品として判定
3. Liquidファイル（`card-product.liquid`など）でラベル表示ロジックを実装
4. 管理画面で判定用の日付を変数として設定し、`published_at`の変更数で新着判断する方法も提案

**注意点:** 新着判定時は「SOLDOUT」や「sale」ラベルを非表示にする必要があります。

<div class="post-metadata">

**Author:** ![tomohiro1319](https://avatars.discourse-cdn.com/v4/letter/t/45deac/32.png) [@tomohiro1319](https://community.shopify.com/u/tomohiro1319)\
**Post date:** [February 23, 2024, 9:44am UTC](https://community.shopify.com/t/new/298920/1 "2024-02-23T09:44:26Z")

</div>

お世話になります。

早速ですが表題の件について、機能実装をしたく投稿させていただきます。

新着商品（直近でアクティブに変更された）が更新された場合に、  
商品トップ画像の左上に『NEW』というラベルを表示させたいと思っています。  
また在庫が “1” 以上の場合のみ表示し、品切れ状態（在庫 0）の場合は非表示が理想です。（現在の設定ですと品切れの状態だと、左上に『SOLDOUT』というラベルが表示され重複を防ぐ為）

その際に以前付いていた商品に関してはラベルが外れ、自動的に新着商品のみに付くという仕様にしたいです。

もしくは管理画面上で設定出来るように出来ればと思っています。

該当箇所は、トップページやコレクション内で、商品詳細ページでは非表示が理想です。

宜しくお願いします。

Shopify Plus等には入っておりません。

使用テーマは『Pristage』となります。

---

<div class="post-metadata">

**Author:** ![toro\_228](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@toro\_228](https://community.shopify.com/u/toro_228)\
**Post date:** [February 26, 2024, 12:57pm UTC](https://community.shopify.com/t/new/298920/2 "2024-02-26T12:57:19Z")

</div>

＞在庫が “1” 以上の場合のみ表示し、品切れ状態（在庫 0）の場合は非表示

①collection.productsをfor文で回して、各productオブジェクトの"available"がTrueの場合は在庫ありと判断する。

＞以前付いていた商品に関してはラベルが外れ、自動的に新着商品のみに付く

②各productオブジェクトの"published\_at"プロパティ値が一番新しいものを新着商品と判断する。

①②をもとに、"published\_at"が一番新しいかつ、"available"がTrueの場合にNewラベルを表示する。

その場合はsold\_outラベル、on\_saleラベル(割引ラベル)は非表示にする。

以上のやり方でいかがでしょうか。

なおラベルを自動付与ではなく管理画面で設定できるようにする場合は、新着と判断するための日付を管理画面側に変数で用意し、"published\_at"プロパティ値がその変数より新しければ新着商品と扱う、のようにすれば実現可能かと思います。

※ラベル表示をしている個所はcard-product.liquidのようなLiquidファイル上で、sold\_outなどと検索すれば見つかるはずです
