Solved

North Theme: Add 'NEW' to top corner

shopmarci
Excursionist
14 0 8

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? 

Screen Shot 2024-01-25 at 2.15.33 AM.png

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7010 1325 1351

This is an 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 %}

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Liqiud_xPert_SJ
Shopify Partner
412 44 63

This is an 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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

View solution in original post

Replies 5 (5)

Liqiud_xPert_SJ
Shopify Partner
412 44 63

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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

Dan-From-Ryviu
Shopify Partner
7010 1325 1351

This is an 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 %}

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

shopmarci
Excursionist
14 0 8

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

 

Screen Shot 2024-01-27 at 3.07.51 PM.png

Liqiud_xPert_SJ
Shopify Partner
412 44 63

This is an 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

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
shopmarci
Excursionist
14 0 8

it worked! thanks so much!!