Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
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
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
Will this work for Dawn 2.0?
@NVV off course it will
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
@NVV it can be card-product.liquid
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?
forgot the examples
Yes it can be done
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 and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you, this worked! Is there a way to switch the colour of the text? This is how it looks right now...
This is an accepted solution.
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
it worked! thanks so much!!
I've been trying to do this on my refresh theme, is there a different way of doing it?
@Xfitwearpr it can be done by the same way. Do let me know if you need my help on this.
I need help
@Xfitwearpr yes please happy to help.
Thank you
Please share the detail's
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?
Sure hold on plz
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024