Shopify How to Show Percentage Discount Saved

Q: How do I handle rounding when showing percentage discounts?

In Liquid, use the round filter to avoid decimals like "19.998%." In JavaScript, Math.round() is standard. However, be consistent. If your backend logic rounds up but your display logic rounds down, a customer might see a "1% difference," which can lead to a lack of trust during the final payment step.

Introduction
The Psychology of the “Percentage Saved” Metric
Understanding Platform Constraints and Requirements
Method 1: The Liquid-Based Calculation (Product Page)
Method 2: Dynamic Cart Savings (The AJAX Approach)
Method 3: Shopify Functions and Complex Discount Logic
Method 4: Visualizing Savings in Checkout (Checkout Extensibility)
Choosing the Right Strategy: A Decision Checklist
Implementing Safely: The Nextools Playbook
Leveraging the Nextools App Suite for Visibility
Measuring Impact and Iterating
Nextools Shopify App Suite (Quick Links)
Conclusion
FAQ

Introduction

In the high-stakes world of e-commerce, the distance between a customer adding an item to their cart and completing a purchase is often measured in milliseconds of psychological friction. One of the most common friction points on the Shopify platform is the “visibility gap”—the moment a merchant offers a discount, but the customer fails to grasp its total value. For Shopify Plus merchants, agencies, and developers, the challenge isn’t just applying a discount; it is figuring out how to show the percentage discount saved across the entire journey, from the product page to the final checkout summary.

At Nextools, we specialize in bridging this gap using advanced Shopify Functions and Checkout Extensibility. As specialists in Script-to-Functions migration, we have seen how brittle theme hacks often fail when faced with complex logic like tiered pricing, multi-currency Markets, or stackable discounts. This post is designed for technical leads and growth-minded merchants who need to implement high-performance, future-proof visibility for their savings logic.

Our engineering-minded approach follows a structured workflow: we first clarify the goal and constraints (such as the specific Shopify plan or existing discount stack), confirm platform limits (especially the distinction between what can happen in the theme versus the checkout), choose a durable Functions-first approach, implement safely in a staging environment, and finally measure the impact on Average Order Value (AOV) and conversion rates. By the end of this guide, you will have a blueprint for showcasing value that scales with your store.

To explore how these solutions fit into a broader ecosystem, you can view our complete Shopify App Suite.

The Psychology of the “Percentage Saved” Metric

Before diving into the technical implementation, it is vital to understand why showing a percentage saved is often more effective than showing a raw dollar amount. In behavioral economics, the “Rule of 100” suggests that for products under $100, percentage discounts are perceived as more significant, while for products over $100, numerical dollar amounts feel larger. However, in the context of a total cart value, the percentage saved serves as a shorthand for “deal quality.”

When a customer sees “You saved 20%,” they internalize a universal metric of value that bypasses currency fluctuations—a critical factor for stores using Shopify Markets. If your technical implementation fails to show this percentage clearly at the point of decision (the “Add to Cart” or “Pay Now” buttons), you are essentially asking the customer to do mental math, which is a known conversion killer.

Understanding Platform Constraints and Requirements

A common mistake in the Shopify ecosystem is treating all “discount displays” as the same technical task. In reality, the implementation changes significantly based on where the data is being displayed and what Shopify plan you are utilizing.

Theme-Side Limitations (Liquid and AJAX)

On the product and collection pages, most developers rely on Liquid. While Liquid is powerful for static “compare at” prices, it struggles with dynamic cart-level discounts. If you are using a standard Shopify plan, your theme code cannot “see” the discounts calculated by Shopify’s backend until the cart is updated. This often leads to a “flicker” effect where the price changes after a delay, or worse, the savings percentage only appears once the customer reaches the checkout.

Checkout Extensibility (Shopify Plus)

For Shopify Plus merchants, the transition to Checkout Extensibility is no longer optional—it is a requirement for a modern, secure checkout. Traditional checkout.liquid hacks are being deprecated in favor of UI Extensions. To show a “Total Percentage Saved” in the checkout sidebar, you must now use these extensions. This is where Nextools focuses much of our development, ensuring that the savings displayed are accurate and synchronized with the backend logic.

The Move to Shopify Functions

The most significant shift in the Shopify ecosystem is the move from Shopify Scripts to Shopify Functions. Functions allow for custom discount logic that is executed on Shopify’s infrastructure rather than in a localized script. This is the “gold standard” for calculating percentage savings because the logic is server-side, making it compatible with Shopify POS, the Shop App, and all checkout versions.

Method 1: The Liquid-Based Calculation (Product Page)

The simplest way to show a percentage saved is at the product level. This approach uses the “Compare at price” field. If a product’s compare_at_price is higher than its price, we can calculate the percentage saved using basic math.

The Logic

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

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

The “Gotchas”

While this works for simple discounts, it fails in several scenarios:

Variant Pricing: If different variants have different discount levels, the Liquid must be updated via JavaScript when the user selects a new variant.
Collection-Wide Discounts: If you are using a Shopify Discount (like a 20% off coupon) rather than a “Compare at price,” Liquid will not natively show this on the product page because the discount hasn’t been applied yet.
Rounding Errors: Depending on your currency settings, the difference between 100 and 100.0 in Liquid can result in integers instead of floats, leading to “0%” being displayed incorrectly.

Method 2: Dynamic Cart Savings (The AJAX Approach)

As customers add items to their cart, the “Percentage Saved” needs to reflect the total basket value. This is where many merchants lose clarity. A customer might have one item at 10% off and another at 50% off. Showing a “Total Cart Savings: 22%” can be a powerful motivator to complete the checkout.

To achieve this, you must tap into the Shopify Cart API. When the cart is fetched, Shopify returns a total_discount value. However, it does not return a “Total Percentage Saved.” You must calculate this in your theme’s JavaScript:

fetch('/cart.js')
  .then(response => response.json())
  .then(cart => {
    const totalSavings = cart.total_discount;
    const totalOriginalPrice = cart.total_price + totalSavings;
    if (totalSavings > 0) {
      const percentageSaved = Math.round((totalSavings / totalOriginalPrice) * 100);
      document.querySelector('.cart-savings-label').innerText = `You are saving ${percentageSaved}% today!`;
    }
  });

For merchants looking for a more automated way to manage these types of cart behaviors, including adding companion products or gifts when a certain savings threshold is met, our AutoCart app provides robust logic without custom coding.

Method 3: Shopify Functions and Complex Discount Logic

For enterprise-level stores, “percentage saved” is rarely a simple calculation. You might have:

Tiered discounts (Save 10% on 2 items, 20% on 3 items).
Customer-specific pricing (Wholesale vs. Retail).
Buy One Get One (BOGO) offers.

These require SupaEasy, our Shopify Functions generator. SupaEasy allows you to create complex discount logic that calculates the savings percentage on the fly. Because it runs as a Shopify Function, the calculation is highly performant and secure.

Migrating from Scripts to Functions

If you are currently using Shopify Scripts to calculate and display discounts, the transition to Functions is critical. Scripts are limited to the checkout and often conflict with other apps. Functions, however, integrate directly into the Shopify discount engine. When you use SupaEasy to migrate your scripts, you ensure that the “percentage saved” logic is visible not just in the checkout summary, but potentially across the entire Shopify ecosystem.

Method 4: Visualizing Savings in Checkout (Checkout Extensibility)

The checkout page is the final hurdle. Shopify Plus merchants can use Checkout UI Extensions to place a custom “Savings Summary” block directly above the “Pay Now” button. This is arguably the most effective place to show the percentage discount saved, as it reinforces the value proposition at the moment of highest intent.

Using SupaElements, merchants can create dynamic checkout elements that pull the cart’s discount data and format it into a high-visibility badge. Instead of a small line item that says “-$10.00,” you can display a bold banner: “Total Savings: 15% ($10.00).”

This level of customization was previously only possible with checkout.liquid, which was prone to breaking during platform updates. With SupaElements and Checkout Extensibility, these UI components are upgrade-safe and mobile-optimized by default. You can explore how these elements integrate with our broader Shopify App Suite.

Choosing the Right Strategy: A Decision Checklist

How do you decide which method to use for showing percentage discounts? Use this engineering-minded checklist:

What is your Shopify Plan?
- Standard/Advanced: Use Liquid for product pages and Cart API for cart drawers.
- Shopify Plus: Prioritize Shopify Functions and Checkout UI Extensions.
What is the Discount Source?
- “Compare at price”: Use Liquid or simple JS.
- Automatic Discounts/Coupon Codes: Requires Cart API or Functions.
- Custom Script Logic: Must be migrated to Functions (using SupaEasy).
Where do you want to show the savings?
- Product Page: Liquid/JS.
- Cart Drawer: Cart API + JS.
- Checkout Sidebar: Shopify Plus + Checkout Extensibility.
Are you using Shopify Markets?
- If yes, ensure your calculations account for different currencies and rounding rules. Functions handle this natively, whereas custom JS often requires manual currency conversion logic.

Implementing Safely: The Nextools Playbook

At Nextools, we advise against “live-coding” discount visibility on a production store. One misplaced Liquid tag or a faulty JavaScript calculation can lead to a broken checkout or, worse, displaying incorrect prices to customers.

Phase 1: The Dev Store Sandbox

Always test your “percentage saved” logic in a development or sandbox store. This is especially important for Shopify Functions. Apps like SupaEasy, Multiscount, and HidePay offer free plans for dev stores, allowing you to build and QA your logic without financial risk.

Phase 2: Edge Case QA

Before rolling out, test these scenarios:

The “Zero Savings” Case: Ensure the badge or label disappears entirely if no discount is applied.
The “Stacking” Case: What happens if a customer uses a 10% code on a product already discounted by 20%? Does your percentage calculation show 30%? (Hint: It should follow the mathematical reality of sequential discounts, which is usually less than the sum).
The “Rounding” Case: Does 33.333% show as 33% or 34%? Consistency matters for brand trust.

Phase 3: Rollout and Measurement

Once live, monitor your checkout completion rate. If you see a spike in abandoned checkouts, the way you are displaying the percentage might be confusing. For example, if the product page says “Save 20%” but the checkout says “Save 18%” due to shipping or tax calculations, the customer will feel misled.

Leveraging the Nextools App Suite for Visibility

Beyond just showing a number, showing the right information at the right time is key. Our App Suite is designed to give you total control over the checkout experience.

Multiscount: Perfect for creating tiered “Save more as you buy more” visibility. It handles the complex math of “Buy 3, Save 20%” and can show those tiers clearly on the product page.
HidePay & HideShip: Sometimes, showing a discount percentage is only part of the puzzle. You might want to hide specific shipping or payment methods if a high discount is applied to protect your margins.
Cart Block: If a customer’s savings percentage is too high (perhaps due to a technical error or discount stacking), Cart Block can prevent the checkout from proceeding, acting as a safety net for your store’s profitability.

Measuring Impact and Iterating

The final step in our playbook is measurement. Showing a percentage discount saved is a hypothesis: “Showing the relative value of a deal will increase the likelihood of purchase.”

To validate this:

A/B Test the Copy: Does “You Save 20%” perform better than “20% Off Today”?
Monitor AOV: Does showing the savings percentage encourage customers to add more to their cart to reach a higher tier?
Track Support Tickets: If customers are asking “Why didn’t I get my discount?”, your visibility logic is failing, even if the discount was technically applied.

Nextools Shopify App Suite (Quick Links)

Every successful Shopify implementation requires the right tools. Here is the full Nextools suite to help you customize, optimize, and scale your store logic:

Conclusion

Showing a percentage discount saved is not a decorative choice; it is a fundamental component of Conversion Rate Optimization (CRO). Whether you are a small merchant using Liquid to calculate simple “Compare at” savings or a Shopify Plus enterprise migrating complex Scripts to Functions, the goal remains the same: clarity.

By following the Nextools Playbook—clarifying constraints, understanding platform limits, choosing a durable Functions-first approach, and testing thoroughly—you can turn a simple mathematical calculation into a powerful engine for growth.

As you look to refine your store’s checkout logic, remember that the most successful merchants are those who build for the future of the Shopify platform. Explore our full Shopify App Suite to find the specific tools that will help you bridge the visibility gap and build a more transparent, high-converting checkout experience today.

FAQ

Does showing a percentage discount saved require Shopify Plus?

Not necessarily. You can show a percentage saved on product pages and in the cart using Liquid and JavaScript on any Shopify plan. However, to display this information as a custom UI element within the actual checkout pages (excluding the cart), you must be on Shopify Plus to access Checkout Extensibility.

How do I handle rounding when showing percentage discounts?

In Liquid, use the round filter to avoid decimals like “19.998%.” In JavaScript, Math.round() is standard. However, be consistent. If your backend logic rounds up but your display logic rounds down, a customer might see a “1% difference,” which can lead to a lack of trust during the final payment step.

Can I show percentage savings if I use Shopify Scripts?

Yes, but it is increasingly difficult. Shopify Scripts only run at the end of the journey (the checkout). To show those savings earlier, you often have to “mimic” the Script logic in your theme’s JavaScript, which leads to maintenance headaches. We strongly recommend migrating your logic to Shopify Functions using SupaEasy for native, end-to-end visibility.

Will showing a percentage saved affect my site performance?

If implemented via Liquid or native Shopify Functions, the performance impact is negligible. However, avoid using heavy third-party apps that rely on large JavaScript payloads to “inject” savings badges. Using Checkout UI Extensions and Functions is the most performant way to handle this on the Shopify platform today.