Create automatic product badges based on Shopify tags. This snippet displays professional "NEW" and "BESTSELLER" badges when corresponding tags are detected, helping highlight special products and increase conversions through visual cues.
Badges appear automatically when 'new' or 'bestseller' tags are added
Eye-catching badges that highlight special products effectively
Modify colors, text, or add more tag types in seconds
Absolute positioning places badges exactly where you want them
{% comment %}
Custom Badge on Products Using Product Tag
Adds badges based on product tags (e.g., "new", "bestseller")
Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}
{% if product.tags contains 'new' %}
<div class="product-badge new-badge" style="position: absolute; top: 10px; right: 10px; background: #FF5722; color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; font-weight: bold;">
NEW
</div>
{% endif %}
{% if product.tags contains 'bestseller' %}
<div class="product-badge bestseller-badge" style="position: absolute; top: 10px; right: 10px; background: #4CAF50; color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px; font-weight: bold;">
BESTSELLER
</div>
{% endif %}
Go to Online Store → Themes → Edit code → Locate sections/product-template.liquid
Search for the product image section (look for product.media or product.featured_image)
Paste the snippet immediately after the product image container (within the same parent element)
In your product admin, add either 'new' or 'bestseller' tags to activate the badges
Modify the CSS in the snippet to match your store's design (colors, position, size)
Pro Tip: Create additional badge types by duplicating the code block and changing the tag name (e.g., 'sale') and styling. Use z-index: 1; to ensure badges appear above other elements.