Want to boost your Shopify store’s sales by highlighting discounts? In this step-by-step tutorial, you’ll learn exactly how to show discount percentage in Shopify Horizon Theme on your products. This simple yet powerful trick helps create urgency, improves conversions, and enhances the shopping experience for your customers.
✨ Benefits of Shopify Discount Percentage
✅ Increases Conversions – Clear discounts attract more buyers.
✅ Builds Trust – Transparent pricing improves customer confidence.
✅ Creates Urgency – Percentage tags encourage faster purchases.
✅ Enhances Visual Appeal – Makes sale products stand out.
🔧 What You’ll Learn: Shopify Discount Percentage
✔ How to enable discount badges in Horizon Theme
✔ Customizing the discount display (color, size, position)
✔ Using Liquid code for dynamic percentage calculation
✔ Mobile-friendly adjustments
🚀 Perfect For:
- Shopify store owners using Horizon Theme
- Dropshippers & eCommerce entrepreneurs
- Marketers looking to boost sales with visual discounts
🛠 Modified Code: Shopify Discount Percentage
We’ll now add a discount percentage next to the compare-at price.
1️⃣ Added Discount Calculation (New Lines ~10-11)
liquidCopyDownload
{% if compare_at_price > price %}
{% assign show_compare_price = true %}
{% assign discount_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
{% endif %}
2️⃣ Display Discount Percentage (Lines ~42 & 60)
liquidCopyDownload
<span class="compare-at-price">{{- compare_at_price -}}</span>
<span class="discount-percentage">({{ discount_percentage }}% OFF)</span>
3️⃣ Added CSS Styling
liquidCopyDownload
<style>
.discount-percentage {
color: #ff0000;
font-weight: bold;
font-size: 0.9em;
margin-left: 5px;
}
</style>
📊 Summary of Changes
| Change | Location | Type | Purpose |
|---|---|---|---|
| Discount Calculation | Lines ~10-11 | New Logic | Computes % saved |
| Discount Display | Lines ~42 & 60 | New HTML | Shows discount badge |
| CSS Styling | End of file | New Style | Enhances visibility |
🎯 Final Result
Before:
$50 ~~$100~~ (No discount shown)
After:
$50 ~~$100~~ (50% OFF) 🎉
📌 Pro Tips for Better Results
- Combine with countdown timers for higher urgency
- Test different colors for your discount badges
- Mobile-optimize the discount display
🔗 Important Resources
📢 Conclusion: Shopify Discount Percentage Success
Learning how to show discount percentage in Shopify is crucial for boosting conversions. By following this guide, you’ve implemented a clean, effective solution that enhances transparency and encourages purchases. Implementing this Shopify discount percentage display will significantly increase your conversion rates.
Need more help? Leave a comment below!
Watch the video:
{%- doc -%}
This snippet is used to render a product card.
It is used in the product block, featured product block, and the product card block.
@param {product} product_resource - The product to render
@param {boolean} [show_unit_price] - Whether to show the unit price
@param {boolean} [show_sale_price_first] - Whether to show the sale price first
{%- enddoc -%}
{%- liquid
assign show_unit_price = show_unit_price | default: false
assign show_sale_price_first = show_sale_price_first | default: false
assign selected_variant = product_resource.selected_or_first_available_variant
assign price = selected_variant.price
assign compare_at_price = selected_variant.compare_at_price
assign show_compare_price = false
if compare_at_price > price
assign show_compare_price = true
assign discount_percentage = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round
endif
if product_resource == blank and request.design_mode
assign price = 1999
endif
# Checks if product handle matches the closest product's handle (i.e. product page)
# and if the currency code is enabled for product pages
if product.handle == closest.product.handle and settings.currency_code_enabled_product_pages
assign price = price | money_with_currency
assign compare_at_price = compare_at_price | money_with_currency
# Checks if product handle does not match the closest product's handle (i.e. product card)
# and if the currency code is enabled for product cards
elsif product.handle != closest.product.handle and settings.currency_code_enabled_product_cards
assign price = price | money_with_currency
assign compare_at_price = compare_at_price | money_with_currency
else
assign price = price | money
assign compare_at_price = compare_at_price | money
endif
-%}
<div ref="priceContainer">
{% if show_sale_price_first == false and show_compare_price %}
<span role="group">
<span class="visually-hidden">{{ 'content.price_regular' | t }} </span>
<span class="compare-at-price">{{- compare_at_price -}}</span>
<span class="discount-percentage">({{ discount_percentage }}% OFF)</span>
</span>
{% endif %}
{% if show_compare_price %}
<span role="group">
<span class="visually-hidden">{{ 'content.price_sale' | t }} </span>
<span class="price">{{ price | default: ' ' }}</span>
</span>
{% else %}
<span class="price">{{ price | default: ' ' }}</span>
{% endif %}
{% if show_sale_price_first == true and show_compare_price %}
<span role="group">
<span class="visually-hidden">{{ 'content.price_regular' | t }} </span>
<span class="compare-at-price">{{- compare_at_price -}}</span>
<span class="discount-percentage">({{ discount_percentage }}% OFF)</span>
</span>
{% endif %}
{%- if selected_variant.unit_price and show_unit_price %}
{%- liquid
if product.handle == closest.product.handle and settings.currency_code_enabled_product_pages
assign unit_price = selected_variant.unit_price | money_with_currency
elsif product.handle != closest.product.handle and settings.currency_code_enabled_product_cards
assign unit_price = selected_variant.unit_price | money_with_currency
else
assign unit_price = selected_variant.unit_price | money
endif
-%}
{% render 'unit-price', price: unit_price, measurement: selected_variant.unit_price_measurement %}
{%- endif -%}
</div>
<style>
.compare-at-price {
text-decoration: line-through;
opacity: 0.7;
margin-right: 5px;
}
.discount-percentage {
color: #ff0000;
font-weight: bold;
font-size: 0.9em;
}
.price {
font-weight: bold;
color: #000000;
}
</style>