How can I add a 'new' banner to products on the collection page?

[shopmarci]

Hi! Is there a way to add a ‘new’ banner to the product shown on the collection page similar to the ‘out of stock’ banner?

[Liquid_xPert_SJ]

Hi @shopmarci welcome to the Shopify Community,

Go to Online Theme > Edit Code > product-grid-item.liquid it may vary according to the theme structure. and paste the below code inside

{% assign date_created = product.created_at | date:'%s' %}
{% assign     date_now = 'now' | date:'%s' %}
{% assign   difference = date_now | minus: date_created %}
{% if difference < 2592000 %}
   NEW!
{% endif %}

Let me know if i you cannot do it by yourself.

Thanks

[Dan-From-Ryviu]

Yes, it can be. You can add “new” to your product tag and then add this code to your product card page, ad this code below next to your sold out badge code

{% if product.tags contains 'new'  %}
New
{% endif %}

[shopmarci]

Thank you, this worked! Is there a way to switch the colour of the text? This is how it looks right now…

[Liquid_xPert_SJ]

@shopmarci

You can put the below css code in your css file and update it

.badge.new-product{
   display:inline-block;
   width:80px;
   height:42px;
   background-color:#d00;
}

Thanks

[shopmarci]

it worked! thanks so much!!

[Xfitwearpr]

I’ve been trying to do this on my refresh theme, is there a different way of doing it?

[Liquid_xPert_SJ]

@Xfitwearpr it can be done by the same way. Do let me know if you need my help on this.

[Xfitwearpr]

I need help

[Liquid_xPert_SJ]

@Xfitwearpr yes please happy to help.

[Xfitwearpr]

Thank you

[Liquid_xPert_SJ]

Please share the detail’s

[Xfitwearpr]

I want to add the new banne to my new products on my website. Im using the code that you provided in one of your previous aswers and what it does it is that the code get added to the description of the product not the banner. Im using refresh theme can you guide me on how to do it?

[Liquid_xPert_SJ]

Sure hold on plz

[NVV]

Will this work for Dawn 2.0?

[Liquid_xPert_SJ]

@NVV off course it will

[NVV]

Ok. I cannot find the property “product-grid-item.liquid” in the Dawn theme editor. Has it changed in the new version of Dawn? We’re on version 15.2

[Liquid_xPert_SJ]

@NVV it can be card-product.liquid

[Liquid_xPert_SJ]

@NVV

[NVV]

We want the “new” badge to appear like this example for both the detailed product page and the grid page. What code do we need change the color and shape of the badge in Dawn 15.2?