How to add NEW badge to latest products in Shopify
There are many ways to attach visitor’s attention to a product. One of the most popular ways is by adding a small badge, usually on the top left or right corner of the product image. We’ve all seen this little red circle “Sale” icon near the product container.
![](https://scontent-lga3-2.xx.fbcdn.net/v/t1.6435-9/53410292_2374115645967121_829095289909411840_n.png?_nc_cat=104&ccb=1-7&_nc_sid=d9b88e&_nc_ohc=VtMpnOqBhIQQ7kNvgHrGQZ2&_nc_ht=scontent-lga3-2.xx&edm=AMAeTUEEAAAA&oh=00_AYDIll6i7HMw5VQk9Cy4VDPjd6US2mQ8jDdb-fGoFH63aw&oe=66AB4D6E)
This article helps you know how to create a simple “New” icon badge for a product, based on the date the product is published/created in Shopify. It is automatically added and removed from a product after a certain period of time (which we are able to adjust regarding our preferences).
Here’s the liquid code:
1 2 3 4 5 | {% assign days = 7 %} {% assign period_time = days | times: 24 | times: 60 | times: 60 %} {% assign date_now = 'now' | date:'%s' %} {% assign date_finished = product.published_at | date:'%s' | plus: period_time | date:'%s' %} {% if date_finished > date_now %}<span class="badge-new">NEW</span>{% endif %} |
You can change days variable to your value. In this case we’ve set it to 7, which equals to 7 days.
Now, what if a product is having 2 or more badges at the same time? For example a “Sale” badge, because its price is reduced and a “New” badge, because it’s newly listed in your store. You can create another simple if statement and organize the order of the badges like so:
1 2 3 4 5 6 7 8 9 | {% if product.price_min < product.compare_at_price_min %} <span class="badge-sale">SALE</span> {% else %} {% assign days = 7 %} {% assign period_time = days | times: 24 | times: 60 | times: 60 %} {% assign date_now = 'now' | date:'%s' %} {% assign date_finished = product.published_at | date:'%s' | plus: period_time | date:'%s' %} {% if date_finished > date_now %}<span class="badge-new">NEW</span>{% endif %} {% endif %} |
You can go ahead and build upon this snippet.
Happy coding!
Hi – Could you confirm with me in which area would this code be included ?
Kind regards, Kora
Hi, I installed the code in collection-template.liquid, but nothing is showing up when displaying a collection. Any suggestions?, help please.
Kind regards, John
Hi, Just wondering where to put this code too.
Regards,
Barry