adding NEW as a label in Dawn Theme

Shopify Discussion

Topic summary

A user wants to add a “NEW” label overlay on product images in the Dawn theme (v15.3.0) when products are tagged with “new.” The label should appear on both collection and product pages.

Initial Solution Provided:

  • Add conditional code to card-product.liquid checking for the ‘new’ tag
  • Style the badge using CSS in base.css with absolute positioning
  • This basic implementation worked successfully

Current Issue:
The user attempted to match the existing “Sold Out” badge styling but encountered formatting problems. The badge now displays incorrectly—either appearing as plain text without a background (making it unreadable on some images) or with strange visual artifacts.

Status:
The discussion remains open with the helper requesting either the store URL or offering paid services to troubleshoot the styling issue. The core functionality works, but achieving consistent visual styling with the theme’s existing badges needs resolution.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I am using Dawn theme ver. 15.3.0 for art store.
Problem am facing :backhand_index_pointing_down:
I want to add “NEW” as a label on top left corner, on top of the product image which activates when “new” tag is selected in product. I tried using the AI feature of shoipfy where it edits the code for you. The results are impressive & when prompted for further instructions I told AI to apply the new changes to existing products with new tag in them. I do not see the results.

Can anyone help me solving a simple problem of adding “NEW” label when I add a new product?
I want the label to show on top of image both at the collection page & at the product page.

Any help would be appreciated :folded_hands:

2

Hey! @SoulCurryArt ,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

3

Hello @SoulCurryArt ,

Go to Snippets → card-product.liquid

search for this code

Once found then just before to it add this code

{% if card_product.tags contains 'new' %}
   
  New
  

{% endif %}

Save the files and then go to assets → base.css

Scroll to bottom and add this code

.newbadge {
    display: block !important;
    top: 0;
    position: absolute;
}

Save the files and you will find the bade in collection grid.

Let me know if you need any other customisation. You can drop me an email for services.

Regards
Guleria

1 Like
4

thanks it works, I appreciate your help

1 Like
5

I took it step further but am not happy with my result. I wanted to use the same design style what is already there for “Sold Out” badge.
so I modified the line this was

the outcome is strange

image.png
image.png1064×354 444 KB

I was looking for an output like this

image.png
image.png356×354 214 KB

any tips where I am going wrong

6

Try this

{% if card_product.tags contains 'new' %}

New

{% endif %}
7

nope this does not work. With this the black base is gone & the text just comes as plain text without base (snap attached)
and this way its not readable on some images

SoulCurryArt_0-1751301029179.png
SoulCurryArt_0-1751301029179.png338×350 117 KB

SoulCurryArt_1-1751301069160.png
SoulCurryArt_1-1751301069160.png349×352 179 KB

any suggestions where to trouble shoot.
BTW I really appreciate you helping me out :folded_hands:

8

Please share the URL.
or you can drop me an email for services. And I’ll quick fix it.