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? 

[Dan-From-Ryviu · Accepted solution]

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'  %}
<span class="badge new-product top left">New</span>
{% endif %}

[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 %}
   <span class="badge-new">NEW!</span>
{% endif %}

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

Thanks

[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?

[NVV]

forgot the examples

[Liquid_xPert_SJ]

Yes it can be done 

[Dan-From-Ryviu · Accepted solution]

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'  %}
<span class="badge new-product top left">New</span>
{% 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 · Accepted solution]

@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