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 Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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 Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024