Introduction
Want to automatically show a “NEW” badge on products that are less than 30 days old in your Shopify store? This is a great way to increase customer engagement and highlight new arrivals. In this tutorial, I’ll show you a step-by-step guide to implement this feature without any paid apps.
Features and Benefits
✅ Automatic Detection – Auto shows on products less than 30 days old
✅ No App Required – No monthly subscriptions
✅ Fully Customizable – Change colors, styles, and positioning
✅ Easy to Implement – Simple copy-paste solution
✅ Mobile Responsive – Works on all devices
Find the Correct Line
<span
id="Badge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
</div>
PASTE this NEW badge code:
{% comment %} NEW Badge Code Start - 30 Days New {% endcomment %}
{% assign product_created_time = card_product.created_at | date: '%s' %}
{% assign current_time = 'now' | date: '%s' %}
{% assign time_difference = current_time | minus: product_created_time %}
{% assign days_difference = time_difference | divided_by: 86400 %}
{% if days_difference <= 30 %}
<div class="new-product-badge" style="
position: absolute;
top: 12px;
left: 12px;
background: #ff0000;
color: white;
padding: 5px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
z-index: 10;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
">NEW</div>
{% endif %}
{% comment %} NEW Badge Code End {% endcomment %}
Important Notes:
Save the file after pasting
Check positioning – If you want the badge on top-left of image instead, let me know
Test with a product created less than 30 days ago
Red background is used – Change
#ff0000to any color you want
