Hey there, welcome to my YouTube channel! Today, I’ll show you how to show discount percentage in Shopify product grid instead of using the default sale badge. With this method, the discount percentage will calculate automatically based on the discount applied to each product.

Why Show Discount Percentages in Shopify?

When customers shop online, they want to know how much money they are saving. A simple sale badge like “On Sale” doesn’t give enough details. By showing the exact percentage off, you make it easy for shoppers to understand the value of the deal.

For example, instead of just seeing a tag, customers might see “20% Off”. This number grabs attention instantly and encourages buyers to add items to their cart.

Step 1: Understand the Benefit of Percentages

Discount percentages are clear and universal. Customers don’t need to compare original and sale prices in detail. They see the percentage and immediately know the savings. This creates urgency and improves conversions.

Step 2: Add Code to Your Theme

To display discount percentages, you’ll need to add a small snippet of code to your Shopify theme.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Under Snippets, create or open the file where your product pricing appears (often product-card-grid.liquid or similar).
3. Insert a formula that calculates the discount:

{% if product.compare_at_price > product.price %}
  <span class="discount-badge">
    {{ ((product.compare_at_price | minus: product.price) | times: 100.0) 
    | divided_by: product.compare_at_price | round }}% OFF
  </span>
{% endif %}

4. Save your changes. The percentage will now show on products that have a discount.

Step 3: Style with CSS

Add some CSS to make the percentage badge stand out:

.discount-badge {
  color: #fff;
  background: #e74c3c;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
}

Final Thoughts

By displaying the discount percentage in the Shopify product grid, you create a clear and appealing shopping experience. Customers instantly know how much they are saving, which builds trust and encourages purchases. Unlike a plain sale badge, this approach highlights value, improves user experience, and can boost your overall sales.