Discount badges are a powerful way to grab customer attention and boost conversions. If you’ve ever shopped on Amazon, you’ve likely noticed their signature circular discount badges that display percentage savings. These badges make discounts stand out, instilling a sense of urgency and increasing the likelihood of a purchase.
If you’re running a Shopify store and want to add a similar circular discount badge to your product listings, you’re in the right place. In this guide, we’ll walk you through the steps to create an Amazon-style discount badge on Shopify.
“E-commerce isn’t the cherry on the cake, it’s the new cake.” – Jean-Paul Ago
Why Use a Circular Discount Badge?
Before we dive into the technical details, let’s understand why these badges are effective:
- Increases Visibility: A bold, eye-catching badge immediately informs customers about ongoing discounts.
- Boosts Conversions: Displaying percentage discounts can create urgency, encouraging customers to make a purchase.
- Enhances User Experience: A clear and attractive discount label makes the shopping experience more informative and engaging.
Now, let’s go step by step on how to implement this on Shopify.
Step 1: Use Shopify’s Built-in Discount Feature
Shopify allows you to create automatic discounts, but it does not provide built-in discount badges. However, you can still display percentage discounts on product pages by following these steps:
- Go to Shopify Admin Panel
- Navigate to Discounts > Create Discount
- Choose Automatic Discount and set up a percentage discount
- Apply it to specific products or collections
While this doesn’t create a circular badge, it ensures that discounts are applied correctly. Now, let’s move on to designing the badge.
Step 2: Adding a Circular Discount Badge Using Liquid and CSS
To create an Amazon-style circular discount badge, you’ll need to modify your Shopify theme code.
1. Edit Your Theme Code
- In your Shopify Admin, go to Online Store > Themes
- Click Actions > Edit Code
- Open the product-card.liquid or product-grid-item.liquid file (the location may vary depending on your theme)
2. Add Discount Badge Code
Insert the following Liquid code inside the product loop to calculate and display the discount percentage:
{% if product.compare_at_price > product.price %}
<div class=”discount-badge”>
-{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round }}%
</div>
{% endif %}
This code calculates the percentage discount based on the compare_at_price and price values.
3. Style the Badge Using CSS
Now, let’s make it visually appealing with CSS.
- Go to Assets > base.css or theme.css
- Add the following CSS code:
.discount-badge {
position: absolute;
top: 10px;
left: 10px;
background: #FF9900;
color: white;
font-size: 14px;
font-weight: bold;
padding: 8px 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
text-align: center;
}
This will create a circular badge with a bold font, similar to Amazon’s discount labels.
Step 3: Testing and Tweaking the Design
Once you’ve added the code, preview your store:
- Go to Online Store > Themes > Preview
- Check how the badge appears on your product listings
- Adjust the CSS styling if needed (change colors, size, or position)
Alternative: Use a Shopify App for Discount Badges
If you prefer a no-code solution, Shopify apps can automate this process. Some popular apps include:
- Ultimate Sales Boost
- Product Labels & Badges
- Discount Announcement Bar
These apps allow you to customize discount badges without modifying the theme code.
Adding an Amazon-style circular discount badge to your Shopify store can significantly improve product visibility and sales. Whether you choose to implement it manually through Liquid and CSS or use a Shopify app, this small tweak can make a big impact on your conversions.
Try it out today and watch your sales grow!
Need help with Shopify customizations? Our team at ShopifyEcommerce is here to assist you in optimizing your store for better performance and sales. Get in touch with us today!