How To Show Sale Discount Percentage In Shopify - Horizon Theme

How To Show Sale Discount Percentage In Shopify – Horizon Theme

Posted on by Foysal

Want to boost your Shopify store’s sales by highlighting discounts? In this step-by-step tutorial, you’ll learn how to display sale discount percentages on your products using the Horizon Theme. This simple yet powerful trick helps create urgency, improves conversions, and enhances the shopping experience for your customers.

✨ Benefits of Showing Discount Percentages:
✅ 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:
✔ 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

📌 #Tags:
#ShopifyTutorial #HorizonTheme #ShopifyDiscount #EcommerceTips #IncreaseSales #ShopifyHacks #Dropshipping #OnlineStore #ShopifyThemes #DigitalMarketing

💡 Pro Tip: Combine discount badges with countdown timers for even better results!

👍 Like, Subscribe & Hit the Bell Icon for more Shopify tips & tricks! 🛒✨

🔗 Links & Resources Mentioned: (Add any relevant links here)

Let’s make your store more profitable—watch now! 🎥👇

If you want to enhance your Shopify store by showing customers exactly how much they’re saving with a discount percentage, this guide will walk you through the necessary code changes. Below, we’ll compare the old vs. new code, highlighting the exact lines that were modified.

🔍 Before & After: Key Changes

📜 Original Code (Before Changes)

The original code displays a product’s original price (compare-at price) and sale price, but it doesn’t show the discount percentage.

Relevant Parts of Old Code:

liquid

{% if show_sale_price_first == false and show_compare_price %}
  <span role="group">
    <span class="visually-hidden">{{ 'content.price_regular' | t }}&nbsp;</span>
    <span class="compare-at-price">{{- compare_at_price -}}</span>  <!-- Line ~40 -->
  </span>
{% endif %}

🛠 Modified Code (After Changes)

We’ll now add a discount percentage next to the compare-at price.

1️⃣ Added Discount Calculation (New Lines ~10-11)

liquid

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  <!-- NEW LINE -->
endif

✅ What this does:

  • Calculates the discount percentage using:
    (Compare Price - Sale Price) ÷ Compare Price × 100
  • Rounds the result to a whole number (e.g., 25% instead of 25.5%).

2️⃣ Displayed Discount Percentage (Lines ~42 & 60)

liquid

<span class="compare-at-price">{{- compare_at_price -}}</span>
<span class="discount-percentage">({{ discount_percentage }}% OFF)</span>  <!-- NEW LINE -->

✅ What this does:

  • Shows the discount next to the crossed-out original price (e.g., ~~$100~~ (50% OFF)).
  • Appears in two places (to support different price display layouts).

3️⃣ Added CSS Styling (New Section at End of File)

liquid

<style>
  .discount-percentage {
    color: #ff0000;  /* Red for emphasis */
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 5px;
  }
</style>

✅ What this does:

  • Makes the discount percentage stand out in bold red.
  • Adjusts spacing for a clean look.

📊 Summary of Changes

ChangeLocationTypePurpose
Discount CalculationLines ~10-11New LogicComputes % saved
Discount Display (x2)Lines ~42 & 60New HTMLShows discount next to original price
CSS StylingEnd of fileNew StylingMakes discount visually appealing

🎯 Final Result

Before:
💲 $50 ~~$100~~ (No discount % shown)

After:
💲 $50 ~~$100~~ (50% OFF) 🎉

🚀 Why This Matters

  • Boosts conversions by making discounts more visible.
  • Improves transparency—customers see exactly how much they save.
  • Minimal code changes—just 4 key additions for a big impact.
{%- 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 }}&nbsp;</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 }}&nbsp;</span>
      <span class="price">{{ price | default: '&nbsp;' }}</span>
    </span>
  {% else %}
    <span class="price">{{ price | default: '&nbsp;' }}</span>
  {% endif %}

  {% if show_sale_price_first == true and show_compare_price %}
    <span role="group">
      <span class="visually-hidden">{{ 'content.price_regular' | t }}&nbsp;</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>
Our Services
Subscribe to Our YouTube Channel