Product badges can be a powerful way to catch your customers’ attention and highlight special items on your store’s collection pages. Whether it’s a “New Arrival,” “Best Seller,” or “Limited Edition” tag, custom badges add a visual cue that encourages shoppers to explore and engage with specific products. In this blog, we’ll guide you through the steps to create and display custom product badges on your Shopify collection pages, helping your products stand out and drive more clicks.
Code: https://github.com/ndrishinski/blogs/commit/e045f7a1cb48b95e0348f7fe424ef57b563e9f9a
Prefer video?
Enjoy, otherwise read on!
Disable Default Collection Badges
Within the Dawn theme (which I am using for this tutorial), if you navigate to the customizer there is a theme setting which exists for collection badges.
The only problem with these (in my opinion) is that they only show for Sold Out products, or products that are “On Sale”. I would like to display a custom badge with whatever text I desire. I am going to show you two ways that you can add custom badges, but for now, let’s disable these two.
Find Your Collection Snippet
In this tutorial, I am working in the Dawn theme which utilizes the ‘card-product.liquid’ snippet to display the individual product cards on the collection pages. If you’re working in a different theme, that is totally fine but you will need to find the place where your product cards are rendering. They are in a snippet file that is referenced in your collection sections.
After opening ‘card-product.liquid’ in my snippets directory, I am going to navigate where the card image is shown. In fact, there is actually a class that I can use to help me place my code in the right place. The code “<div class=”card__badge” is where the default badges are displayed so I am going to add my code right below! (see full code here).
Option 1: Using Product Tags
If you followed my tutorial here where we added a “Best Seller” badge to the product page, this option will make it compatible! We want to paste the following code:
...
{%- endif -%}
</div>
{% if card_product.tags contains 'best-seller' %}
<div style="
align-self: flex-end;
grid-row-start: 3;
justify-self: flex-start;
text-align: left;
">
<span style="
border: 1px solid transparent;
border-radius: var(--badge-corner-radius);
display: inline-block;
font-size: 1.2rem;
letter-spacing: .1rem;
line-height: 1;
padding: .5rem 1.3rem .6rem;
text-align: center;
background: #000;
border-color: #0000;
color: #fff;
word-break: break-word;
">
Best Seller
</span>
</div>
{% endif %}
...Now we have a simple HTML div wrapping a span tag with some inline styles that will display our badge. And within the span tag you will see the words “Best Seller”. You can customize this text to whatever you would like. You will also notice some liquid conditional logic where we are checking if the product has a tag of “best-seller”. If so, we then display the badge.
This code is great and all, but it won’t actually show anything until we add the tag to some products!
Add Tag to Products
If we open the Shopify Admin, and navigate to Products we will see the list of our store products. We can click into any of these and on the right-hand side look for ‘tags’. Within the text box we are going to add the tag ‘best-seller’.
After saving our new tag and our HTML, we should see it working in our store preview!
Option 2: Using Metafields
In this method, we are going to change our code slightly to utilize Shopify metafields so we can display any tag we want, rather than rely on hard coded text like the above method. Instead of the above code, we will use this slightly different snippet:
...
{% unless card_product.metafields.custom.product_badge.value == blank %}
<div style="
align-self: flex-end;
grid-row-start: 3;
justify-self: flex-start;
text-align: left;
">
<span style="
border: 1px solid transparent;
border-radius: var(--badge-corner-radius);
display: inline-block;
font-size: 1.2rem;
letter-spacing: .1rem;
line-height: 1;
padding: .5rem 1.3rem .6rem;
text-align: center;
background: linear-gradient(135deg, #9B7EBD, #3B1E54);
border-color: #0000;
color: #fff;
word-break: break-word;
">
{{ card_product.metafields.custom.product_badge.value }}
</span>
</div>
{% endunless %}
...This code looks for the presence of the metafield that we will create in the next step. If so, we display that text.
Create a Metafield Value
If we open the Shopify admin, and open Settings -> Custom Data -> Products -> ‘Add definition’ we can add a metafield called ‘Product Badge’ with the following data:
Now if we save our new metafield and navigate to “Products” in the admin, we can click into any product and add the text we would like to see in the badge. For example:
Now if we save, and open our theme preview we have a fully functioning product badge showing on our collection pages!
Tip
If you would like to customize the badge, I would recommend editing these fields in the CSS:
background: <insert color> -- to change background color
color: <insert color> -- to change text color
position: absolute; -- to change position
top: <insert pxs>
bottom: <insert pxs>
right: <insert pxs>
left: <insert pxs>Conclusion
By adding custom product badges to your Shopify collection pages, you can instantly elevate your store’s look and provide valuable context to your customers. Highlighting featured products or calling out special attributes with badges not only enhances your store’s visual appeal but also supports more informed purchasing decisions. With just a few steps, you can create a memorable shopping experience that guides customers toward the items that matter most.