⚠️   Shopify Scripts will no longer be supported as of June 30, 2026  ⚠️   read the Shopify article 

Shopify Show Discount Percentage: A Technical Guide

23 May 2026
Shopify Insights

Table of Contents

  1. Introduction
  2. Understanding the Logic: Why Percentages Matter
  3. Core Constraints: Shopify Plan and Implementation Paths
  4. Method 1: Theme Liquid (The Classic Approach)
  5. Method 2: Checkout Extensibility (For Shopify Plus)
  6. Method 3: Shopify Functions (Advanced Discount Logic)
  7. Rounding Logic and Currency Conversion
  8. Choosing the Right Tool: The Nextools Decision Matrix
  9. Script-to-Functions Migration: Modernizing Your Discounts
  10. Implementation Workflow: The Nextools Playbook
  11. Advanced Scenario: Hiding Elements Based on Percentages
  12. Improving the User Experience with Urgency
  13. Internationalization: Percentages in Every Language
  14. Nextools Shopify App Suite (Quick Links)
  15. Conclusion
  16. FAQ

Introduction

Modern e-commerce is no longer about simply setting a price; it is about communicating value instantly. For Shopify merchants, particularly those on Shopify Plus, the transition from legacy Liquid hacks and Shopify Scripts to the new world of Shopify Functions and Checkout Extensibility has created a technical gap. Many teams struggle to consistently display discount percentages across the entire customer journey—from the product page to the final checkout summary—especially when dealing with complex stacking logic or multi-currency Markets.

At Nextools, we specialize in bridging this gap. Since our founding in 2022, we have focused on building high-performance tools that leverage Shopify Functions to solve real-world checkout challenges. Whether you are a Plus merchant migrating away from brittle Scripts or an agency developer looking for a more durable way to handle discount visibility, this guide provides the engineering-minded framework you need. We help merchants navigate the Nextools Shopify App Suite to implement logic that is both future-proof and performance-oriented.

This article is designed for Shopify Plus merchants, technical leads, and developers. We will explore how to calculate and display discount percentages using Liquid, how to handle the limitations of the new Checkout Extensibility framework, and how to use Shopify Functions to manage advanced discount scenarios. Our approach follows a strict professional playbook: clarify your specific constraints, understand platform limits, choose the simplest durable solution, implement safely in a staging environment, and measure the impact on your Average Order Value (AOV).

Understanding the Logic: Why Percentages Matter

Before writing a single line of code, it is vital to understand why “shopify show discount percentage” is a more complex requirement than it appears. A discount percentage is not a static value; it is a calculated relationship between a “Compare at” price and a “Price,” or between a subtotal and a dynamic discount applied via a Function or Script.

In a standard Shopify setup, the “Compare at” price is often used to represent the original MSRP. However, as stores grow into international markets using Shopify Markets, currency conversion and rounding rules can cause the calculated percentage to fluctuate. Furthermore, when dynamic discounts (like tiered pricing or “Buy X Get Y”) are introduced, a simple Liquid calculation on the product template is no longer sufficient because the discount is only calculated once the item is in the cart.

For high-volume merchants, the goal is clarity. If a customer sees “20% Off” on a collection page but the checkout only shows a dollar amount, the cognitive load increases, often leading to cart abandonment. Providing a consistent visual anchor—the percentage—throughout the funnel is a proven method for maintaining price perception.

Core Constraints: Shopify Plan and Implementation Paths

The method you choose to show discount percentages depends heavily on your Shopify plan and your specific technical debt.

1. Shopify Plan (Plus vs. Non-Plus)

Shopify Plus merchants have access to Checkout Extensibility and the ability to deploy custom Shopify Functions. This allows for the injection of UI components (like discount badges) directly into the checkout header or line items. Standard merchants are generally limited to theme-side Liquid changes and cannot modify the internal checkout logic as deeply.

2. Checkout Extensibility

With the deprecation of checkout.liquid, merchants must now use UI Extensions to show custom data in the checkout. If you need to display a total savings percentage at the bottom of the checkout, you must use a tool that supports these extensions. Our SupaElements app is designed specifically for this, allowing merchants to brand and customize the checkout UI without managing a custom app infrastructure.

3. Where Logic Runs

It is important to distinguish between “Display Logic” and “Calculation Logic.”

  • Display Logic: Happens in the browser or via Liquid. It visualizes data that already exists.
  • Calculation Logic: Happens on the server side via Shopify Functions. This is where the actual discount is applied.

If you are using SupaEasy to create complex discount logic, you need to ensure your theme or checkout UI can “read” the result of that function to display the percentage accurately.

Method 1: Theme Liquid (The Classic Approach)

For simple “Sale” prices, Liquid remains the most efficient way to display a discount percentage on the Product Detail Page (PDP) and Collection pages. This does not require an app, but it does require careful handling of variants.

The Basic Math

To calculate the percentage, you subtract the current price from the compare-at price, multiply by 100, and divide by the compare-at price.

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

Handling Price Variants

A common mistake is failing to account for products where variants have different prices. If the “Compare at” price varies across sizes or colors, using product.compare_at_price will only pull the price of the first available variant.

To solve this, developers should use product.compare_at_price_max or loop through variants to find the specific discount for the selected item. When the customer changes a variant via a dropdown, your theme’s JavaScript must recalculate this percentage dynamically.

Limitations of Liquid

Liquid is “server-side rendered” before the page reaches the user. It cannot “see” discount codes that a customer might apply later, nor can it calculate tiered discounts (e.g., “Spend $100, Save 10%”) that depend on the total cart value. For those scenarios, we move to the checkout environment.

Method 2: Checkout Extensibility (For Shopify Plus)

Shopify Plus merchants often need to show a “Total Savings” percentage in the checkout sidebar. Since the transition to Checkout Extensibility, you can no longer just drop a script into the checkout. You must use UI Extensions.

At Nextools, we suggest using SupaElements for this purpose. Within the app, you can create dynamic elements that appear in the order summary. These elements can be programmed to look at the totalLineItemsPrice and the totalDiscounts to display a string such as: “You are saving 15% on this order!”

Why Use UI Extensions Over Scripts?

  • Performance: UI Extensions are sandboxed and do not block the main thread, leading to faster checkout loads.
  • Security: They are more secure as they do not allow arbitrary JavaScript to access sensitive customer data.
  • Maintenance: They are designed to be durable. Unlike the old checkout.liquid hacks, they won’t break when Shopify updates the checkout core.

When using the Nextools Shopify App Suite, you can deploy these UI elements as “static” (always there) or “dynamic” (only appearing when a certain discount threshold is met).

Method 3: Shopify Functions (Advanced Discount Logic)

If your discount logic is more complex than a simple “Compare at” price—for example, if you are running a “Buy 3, Get 20% Off” promotion—you should be using Shopify Functions.

Shopify Functions have replaced the logic previously handled by Shopify Scripts. They allow you to write custom backend logic that Shopify executes during the discount calculation phase. Using SupaEasy, you can generate these functions without writing Rust or hosting your own app.

Displaying Percentages for Tiered Discounts

If you use Multiscount to set up tiered discounts, the app handles the heavy lifting of calculating the percentage. For example, if a merchant wants to show a “Progress Bar” on the cart page that says “Add $20 more to reach a 20% discount,” this requires the app’s storefront widget to communicate with the cart’s subtotal.

This is a critical point in the Nextools Playbook: Choose the simplest durable approach. If a merchant only needs a basic sale badge, Liquid is enough. If they need a global, stackable tiered discount system that shows percentage savings in real-time, an app like Multiscount is the engineering-correct choice.

Rounding Logic and Currency Conversion

When you show a discount percentage, “Shopify Markets” introduces a significant technical hurdle: currency conversion and rounding.

Imagine a product priced at $100 with a $20 discount (20%). If that store sells in Euro and the exchange rate is 0.92, the price becomes €92.00. However, if the merchant has set up “Rounding Rules” to make all prices end in “.99”, the price might become €91.99. Suddenly, the math (92 - 73.59) / 92 might result in 19.999% or 20.01%.

Best Practices for Accuracy:

  1. Floor vs. Round: In most cases, it is safer to use the floor filter in Liquid to avoid over-promising a discount. Showing “19%” is better than showing “20%” and having the customer see “19.9%” at checkout.
  2. Market-Specific Logic: Ensure your percentage calculation uses the money filters that are aware of the current currency.
  3. Consistency: Use the same rounding logic in your theme as you do in your SupaEasy custom functions to ensure the percentage doesn’t “flicker” as the customer moves through the checkout.

Choosing the Right Tool: The Nextools Decision Matrix

With so many ways to show a discount percentage, how do you choose? Follow this checklist:

  • Is the discount based on the individual product’s “Compare at” price?
    • Solution: Use Liquid in your theme. It is free, fast, and does not require an app.
  • Is the discount dynamic (e.g., “Buy X, Get Y” or “Spend $N”)?
    • Solution: Use SupaEasy to create the Function and Multiscount to display the tiers on the storefront.
  • Do you need to show the percentage inside the Shopify checkout UI (Plus only)?
    • Solution: Use SupaElements to inject a custom UI extension.
  • Are you trying to migrate away from an old Shopify Script that calculated percentages?
    • Solution: Use the Scripts Migrator inside SupaEasy to convert your logic into a modern Shopify Function.
  • Do you need to block certain high-percentage discounts from being used by bots?
    • Solution: Use Cart Block to set validation rules that prevent checkout if a discount exceeds a certain percentage.

Script-to-Functions Migration: Modernizing Your Discounts

For years, Shopify Plus merchants used “Scripts” (Ruby-based) to calculate percentages and line-item discounts. With Shopify announcing the sunsetting of Scripts in favor of Functions, many developers are facing a deadline.

The “Show Discount Percentage” logic in Scripts was often complex because it had to handle edge cases like shipping rates and payment method restrictions. When migrating to Functions, you separate these concerns.

  • Use HidePay to hide payment methods based on the discount percentage applied.
  • Use HideShip to hide free shipping if the discount is too deep.
  • Use SupaEasy to handle the core discount calculation.

This modularity is the hallmark of the Nextools Shopify App Suite. Instead of one massive, brittle Ruby script, you have several specialized Functions that are easier to test, debug, and maintain.

Implementation Workflow: The Nextools Playbook

At Nextools, we don’t just provide apps; we provide a methodology for implementation. When a merchant asks us how to “shopify show discount percentage” for a complex sale, we follow these five steps:

1. Clarify the Goal + Constraints

We ask: Are we showing this on a single product or the whole cart? Does it apply to all Markets? Are we on Shopify Plus? Are there existing discount codes that might conflict? We also check if Formify is being used to collect extra data that might influence the discount (e.g., a “member ID” that grants a higher percentage).

2. Confirm Platform Capabilities + Limits

We determine if the requirement can be met by Liquid or if it requires Checkout Extensibility. We verify if the merchant is using a “Draft Order” workflow, which can sometimes bypass Function logic.

3. Choose the Simplest Durable Approach

We prioritize Functions-first for logic. For example, if a merchant wants to translate the “Save X%” text into multiple languages, we would suggest CartLingo to handle the checkout translations accurately and with AI support.

4. Implement Safely

Never deploy discount logic directly to a live store. We always recommend using a development or staging store. Use SupaEasy in the “Free Dev Store” tier to build and test the Function logic until the percentage display is perfect.

5. Measure Impact and Iterate

After launch, monitor your analytics. Is the “Save X%” badge increasing the click-through rate on collection pages? Is the total savings percentage in the checkout reducing cart abandonment? Use these insights to tweak your tiers in Multiscount or your messaging in SupaElements.

Advanced Scenario: Hiding Elements Based on Percentages

Sometimes, showing a discount percentage isn’t enough; you might need to change the checkout behavior based on how high that percentage is. For example, if a customer is getting a 50% discount, you might want to:

  • Disable specific expensive shipping methods using HideShip.
  • Disable “Buy Now, Pay Later” options using HidePay to protect margins.
  • Add a “No Returns” attribute to the order using AttributePro.

By connecting these tools, the discount percentage becomes a trigger for a much wider range of automated business logic. This is the power of an integrated suite over standalone, one-off apps.

Improving the User Experience with Urgency

If you are showing a discount percentage, adding a time-based element can increase conversion. Using Hurry Cart, you can show a countdown timer alongside the discount percentage. This creates a powerful “FOMO” (Fear Of Missing Out) effect: “Save 20% – Offer expires in 05:00.”

When the timer hits zero, you can use SupaEasy logic to automatically expire the discount, ensuring your margins are protected and your site’s credibility remains intact.

Internationalization: Percentages in Every Language

For global merchants, “Save 20%” doesn’t work everywhere. In some markets, the percentage comes after the number, or a different word for “Save” is preferred. Using CartLingo, you can manually or via AI translate these strings throughout the checkout. This ensures that the “shopify show discount percentage” effort isn’t wasted on customers who cannot understand the promotion in their native language.

Nextools Shopify App Suite (Quick Links)

To implement the strategies discussed in this guide, explore the following tools in our suite:

Conclusion

Showing a discount percentage on Shopify is a task that ranges from a simple Liquid snippet to a complex multi-app integration involving Shopify Functions and Checkout Extensibility. By following the Nextools engineering playbook, you ensure that your implementation is not just visually appealing but technically sound and scalable.

Key Takeaways Checklist:

  • Audit your current discounts: Are they based on “Compare at” prices or dynamic cart logic?
  • Check your plan: Are you on Plus? If so, prioritize SupaElements for checkout UI.
  • Handle variants correctly: Ensure your Liquid or JavaScript accounts for price differences across sizes/colors.
  • Account for Markets: Factor in currency conversion and rounding rules to avoid percentage “flicker.”
  • Migrate from Scripts: If you are using legacy Ruby scripts, start moving to SupaEasy Functions now.
  • Test in Staging: Always validate that the percentage shown on the PDP matches the final math at the order status page.

At Nextools, we believe in building tools that empower merchants to customize their checkout without the overhead of custom app development. Whether you need to hide a shipping method when a discount is too high or translate your savings badges for a global audience, the Nextools Shopify App Suite provides a robust framework to build upon. Start by identifying your primary constraint today and choose the simplest durable path forward.

FAQ

Does showing a discount percentage require Shopify Plus?

Displaying a percentage on the Product Detail Page (PDP) using Liquid does not require Shopify Plus. However, if you want to display dynamic discount percentages or custom UI elements within the actual checkout pages, you will need Shopify Plus to access Checkout Extensibility and Shopify Functions. Tools like SupaElements are specifically built to leverage these Plus-only features.

How do I test my discount percentage logic without affecting live customers?

We always recommend using a Shopify development store or a Plus sandbox store. All Nextools apps, including SupaEasy and Multiscount, offer a “Free Dev Store” plan. This allows you to build your logic, verify the percentage calculations, and perform QA across different currencies and devices before pushing the changes to your production environment.

Can I migrate my existing Shopify Scripts to Functions to show discounts?

Yes. Shopify has announced that Scripts will be sunset, and Functions are the replacement. Using SupaEasy, you can use the Scripts Migrator or the AI Functions Generator to recreate your discount logic. This is a safer and more performant way to handle discount visibility and ensures your store is ready for the future of Shopify’s checkout.

Why does the percentage on my product page sometimes differ from the checkout?

This is usually caused by “Rounding Rules” in Shopify Markets or by tax-inclusive pricing settings. If your theme calculates a percentage based on rounded numbers but the checkout uses raw decimal values, a small discrepancy can occur. To fix this, ensure your theme’s Liquid logic uses the same round or floor filters as your backend Functions logic. You can use SupaEasy to ensure consistent calculation logic across the board.

SupaEasy is a product built & designed by Nextools

Company

SupaEasy

Legal

Follow Us

© [2024] website by Nextools. All Rights Reserved. PIVA: 16711981007

Try it now