A user wants to add custom labels (“New,” “Just In,” “Price Drop”) to product images in collection views, styled like Dawn theme’s default “Sold out” pill badge.
Solution provided:
new or just-in in Shopify admincard-product.liquid (or product-card.liquid) in theme code{% if card_product.tags contains 'new' %}
<span class="badge badge--sold-out">New</span>
{% endif %}
.badge--sold-out class for consistent stylingColor customization issue:
The user attempted to assign different color schemes (Scheme 6, Scheme 7) to different badges by adding color_scheme: 'scheme-6' attributes. However, this approach isn’t working—badges default to Scheme 2 and inherit transparent backgrounds, causing the entire product card background to change color instead of just the badge.
Status: The basic badge display is working, but custom color differentiation per badge type remains unresolved. The helper requested a page link via direct message to troubleshoot further.
Hello,
I am trying to get a “New” or “Just In” label to appear over the product image when viewing a collection, to show which products are new to the store.
I might also want to customise these in the future, such as “price drop” or something similar.
I would like it to appear in the small black ‘pill’ button that the Dawn theme autoatically populates when an item is out of stock, I believe it says “sold out” or similar.
How can I customise these labels?
For adding these badges to products you can either add tags to products as new or jusi-in and render that with an if condition. So if the product co tains the tag add the badge. This is okay if you have a few products.
Alternatively you can check for the timeline the product was created and keep the badge on a product for that certain period. This is a bit complicated from the last one but it removes the manual headache of adding and removing tags. You can either do this with code or you can probably automate this behaviour with flow.
And for styling you can just use the same badge structure as dawn uses, only the text will be different.
Hello @OD0Cs
Dawn only checks stock status out of the box, so you’ll need to teach it what “new” means (usually via a product tag or metafield) and then add your own badge into the same spot it shows “Sold out.” Here’s what to do next:
1. Tag your new products
In Shopify admin, open each product you want labeled and add a tag like new or just_in.
2. Locate the badge code in your theme
{% unless product.available %}
3. Copy and adapt that block for “New”
Right after the sold-out check, insert:
{% if product.tags contains ‘new’ %}
You’re reusing the same badge class so it inherits Dawn’s black-pill styling.
4. Customize for future labels
For “price-drop,” tag products price-drop and repeat the above with your own text.
If you want different colors, override or extend the .badge–sold-out class in your assets/base.css (e.g., .badge–price-drop { background: #… }).
5. Save and preview
Publish your changes and visit a collection page. Any product with your new tag will now show the “New” pill over its image—just like “Sold out.”
You are using Dawn theme, please add that code to your card-product.liquid file in store admin > Sales channels > Online Store > Themes > click “…” in Current theme > Edit code > Snippets. Above this line of code, around line 128
{%- if card_product.available == false -%}
Paste this code
{% if card_product.tags contains 'new' %}
New
{% endif %}
{% if card_product.tags contains 'just-in' %}
Just In
{% endif %}
Hi @Dan-From-Ryviu that is really useful - thank you.
Is there a way I can make each one a different colour?
I.e: a different colour for ‘new’ and different colour for ‘just in’ ?
You can do that by going to your store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Colors > Schemes > Add 2 new schemes, it will be Scheme 6 and Scheme 7.
Then go to edit the code in the previous message to this below so New tag will be used color settings of Scheme 6, and Just In will use color settings of Scheme 7.
{% if card_product.tags contains 'new' %}
New
{% endif %}
{% if card_product.tags contains 'just-in' %}
Just In
{% endif %}
Hi @Dan-From-Ryviu - unfortunately, that has not worked. Although I am using the code Theme 6, it is reverting to Theme 2 and it is just a see-through button (meaning whatever background color is behind, is the color it inherits).
Did you update and save the code in card-product.liquid file? Could you share the link to your page?
Yes, code is in the card-product.liquid
{% if card_product.tags contains 'buy-or-hire' %}
Available to Buy or Hire!
{% endif %}
I can send you link as direct message?
This is what I have to change (in Scheme 2, even though I have put Scheme 
and it results in this, the whole background for the block changes.
