How to Display Discount Percentage Instead of 'Sale' on Shopify's Trade Theme with BemeApps

By Tony Ng.
February 24th, 2025

How to Display Discount Percentage Instead of 'Sale' on Shopify's Trade Theme with BemeApps

Understanding the Problem

In the competitive world of eCommerce, effectively communicating discounts to potential customers can significantly impact sales. Many Shopify users face the issue of default 'sale' badges that don't clearly indicate the value customers are saving. This can be a deterrent for price-sensitive shoppers who are more likely to be swayed by seeing the exact percentage discount. This article will guide you through the process of replacing the 'sale' badge with a discount percentage and customizing its appearance.

Why Show Discount Percentage?

Increased Transparency

Displaying the discount percentage provides clear and immediate information to customers, enhancing transparency and trust.

Enhanced Customer Engagement

A specific discount figure can capture attention more effectively than a generic 'sale' badge, potentially increasing click-through rates and conversions.

Competitive Edge

With many online stores still using generic sale labels, showing exact discount percentages can give your store a competitive advantage.

Causes of the Problem

Default Theme Settings

Shopify's Trade theme, like many others, defaults to a simple 'sale' badge. This is often due to the theme's focus on simplicity and minimalism.

Limited Customization Options

Not all themes offer built-in options to display discount percentages, requiring users to delve into code or use additional apps.

User Unfamiliarity

Many store owners are not familiar with the Liquid templating language used by Shopify, making it challenging to customize themes beyond the default settings.

Step-by-Step Guide to Show Discount Percentage

Step 1: Access Your Theme Code

Log in to your Shopify Admin
Navigate to Online Store > Themes
Click on Actions > Edit Code for your active theme

Step 2: Modify the Product Card Template

Locate the product-card.liquid file or equivalent in your theme.
Find the section where the 'sale' badge is rendered.
Replace the existing code with a Liquid code snippet that calculates and displays the discount percentage:

{% assign discount = product.compare_at_price | minus: product.price %}
{% assign discount_percentage = discount | divided_by: product.compare_at_price | times: 100 | round %}
<span class="badge" style="color: orange;">{{ discount_percentage }}% OFF</span>

Step 3: Customize the Badge Style

Access your theme.scss.liquid or theme.css.liquid file.
Add custom CSS to style the discount badge:

.badge {
  background-color: #fff;
  color: orange;
  font-weight: bold;
  padding: 5px;
  border-radius: 3px;
}

Step 4: Test Your Changes

Preview your changes in the Shopify theme editor.
Ensure that the discount percentage displays correctly on all applicable product cards.

Troubleshooting Common Issues

Badge Not Displaying Correctly

Ensure that the Liquid code is correctly placed and that there are no syntax errors.

CSS Not Applying

Double-check the class names and ensure that your CSS is not being overridden by other styles.

Calculations Are Incorrect

Verify that the product has both a price and a compare-at price set, as the discount calculation depends on these values.

Conclusion

Displaying a discount percentage instead of a generic 'sale' badge can significantly enhance the shopping experience on your Shopify store. By following this guide, you can customize your Trade theme to provide clear, attractive discount information to your customers.

Author by BemeApps AI.