How to show discount percentage in Shopify

Introduction
Understanding the “Compare at Price” Architecture
How to Show Discount Percentage in Shopify Using Liquid
Moving Beyond the Product Page: The Checkout Barrier
Key Constraints and Platform Limits
Choosing the Right Nextools Solution: A Decision Checklist
Real-World Scenario: The Tiered “Volume” Discount
Technical Implementation: Advanced CSS for Percentage Badges
Handling the “Discount Conflict” Problem
Improving Trust with Precise Language
The Role of AI in Discount Logic
Script-to-Functions Migration: A Strategy for Percentages
Measuring Success and Iterating
Nextools Shopify App Suite (Quick Links)
Conclusion
FAQ

Introduction

In the high-stakes environment of Shopify Plus commerce, visual transparency is often the difference between a completed sale and an abandoned cart. Merchants frequently struggle with a specific technical hurdle: figuring out how to show discount percentage in Shopify consistently across the entire buyer journey. While displaying a “Sale” tag is simple, calculating and showing the exact percentage off—especially when dealing with complex variant pricing, multi-currency Markets, or automatic discounts—requires a more sophisticated approach. At Nextools, we specialize in helping merchants move beyond brittle Liquid hacks and into the robust world of Shopify Functions and Checkout Extensibility.

This guide is designed for Shopify Plus merchants, developers, and agency partners who need to implement reliable discount displays that don’t break during high-traffic events like Black Friday Cyber Monday (BFCM). We will move through the Nextools Shopify App Suite philosophy: clarifying your specific constraints, understanding platform limits, selecting the simplest durable solution (from Liquid to Functions), implementing with a focus on QA, and measuring the performance impact.

Understanding the “Compare at Price” Architecture

The foundation of showing a discount percentage in Shopify is the relationship between two specific data points in the product object: the price and the compare_at_price.

The price is the current amount the customer will pay. The compare_at_price is the original price, used to signify a markdown. When the compare_at_price is higher than the price, Shopify identifies the item as being on sale. However, Shopify does not natively store a “percentage saved” value as a static field. Instead, this must be calculated dynamically on the frontend (Liquid or JavaScript) or via the backend during the checkout process using Shopify Functions.

The Problem with Basic Displays

Most standard themes only show the absolute price difference (e.g., “Save $10”). For high-ticket items or highly competitive niches, a percentage (e.g., “Save 25%”) is often more psychologically effective. The challenge arises when:

Variants have different prices: One size is 20% off, but another is 10% off.
Automatic discounts are applied at checkout: These don’t exist on the product page.
Scripts or Functions are running: Custom logic might change the final price in ways the theme’s Liquid code cannot see until the cart is initialized.

How to Show Discount Percentage in Shopify Using Liquid

For simple sales where the discount is managed directly via the “Compare at price” field in the Shopify admin, Liquid is the most direct method for product and collection pages.

Calculating the Percentage

To display the percentage, you need to perform math within your .liquid templates (typically price.liquid or product-card.liquid). The formula is: ((Compare at Price - Price) / Compare at Price) * 100.

Here is a technical implementation that handles rounding and ensures the discount is only shown if it exists:

{% 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 Variant Complexity

A common mistake when learning how to show discount percentage in Shopify is failing to account for variant shifts. If a user selects a different size or color, the percentage must update without a page refresh. This requires a two-pronged approach:

Liquid for initial load: Provides the SEO-friendly and flicker-free display for the default variant.
JavaScript for interaction: Your theme’s JavaScript (often in global.js or product-form.js) must listen for change events on the variant picker and recalculate the math based on the variant.price and variant.compare_at_price from the JSON object.

Moving Beyond the Product Page: The Checkout Barrier

While Liquid works for the storefront, the Checkout is a different environment entirely. For Shopify Plus merchants, the transition from Shopify Scripts to Shopify Functions has changed how discounts are calculated and displayed.

If you are using a tool like SupaEasy to create complex discount logic, you need to ensure that the percentage reflects accurately in the checkout summary. In the legacy “Checkout.liquid” era, merchants had direct control over the DOM. With Checkout Extensibility, you must use UI Extensions to surface this information.

Why Shopify Functions are the New Standard

Shopify Functions allow us at Nextools to write server-side logic that runs in under 10ms, handling everything from volume discounts to buy-one-get-one (BOGO) offers. When a Function modifies a price, it provides a “Discount Application” object.

To show a percentage here, we recommend using SupaElements. It allows you to drag and drop dynamic elements into the checkout, thank you, and order status pages. Instead of coding a manual calculation for every possible discount combination, you can use dynamic checkout elements to surface the “Total Savings” as a percentage of the initial subtotal.

Key Constraints and Platform Limits

Before choosing a technical path, you must understand where Shopify draws the line.

Shopify Plan Requirements

Basic/Shopify/Advanced: You are largely limited to storefront Liquid and standard “Automatic Discounts.” You cannot modify the checkout logic or add custom UI elements to the checkout page.
Shopify Plus: This is where the Nextools Shopify App Suite shines. Plus merchants have access to Shopify Functions and Checkout Extensibility, which are essential for showing accurate percentages when using complex stackable discounts.

Where Logic Can and Cannot Run

Storefront: Logic runs in the browser. It is great for visual flair but cannot be used for actual price enforcement.
Cart API: This is the bridge. As items are added, the Cart API calculates the subtotal.
Checkout: This is the “source of truth.” Any percentage shown here must be calculated by the Shopify engine. If you use a custom app to generate discounts, the app must “tell” Shopify the reason and value so the percentage can be rendered by the checkout’s native summary.

Currency and Markets

If you use Shopify Markets, the “Compare at price” is converted based on your currency settings. Showing a percentage is actually safer than showing an absolute value in multi-currency setups. “Save 20%” is a universal truth, whereas “Save $15” might convert to an awkward, non-rounded number like “Save €13.42” in another market.

Choosing the Right Nextools Solution: A Decision Checklist

Not every store needs a complex app. Use this checklist to determine your path:

Are your discounts simple “Compare at Price” markdowns?
- Solution: Use Liquid and CSS. No app required for the storefront.
Do you need to show percentages for tiered discounts (e.g., Spend $100, get 10%; Spend $200, get 20%)?
- Solution: Multiscount. This app handles the tier logic via Functions and includes storefront widgets that calculate and show the percentage progress to the user.
Are you migrating from Shopify Scripts and need to show percentage savings for complex BOGO or wholesale logic?
- Solution: SupaEasy. Use the AI Function Generator to create the logic and the Scripts Migrator to ensure your percentages remain consistent.
Do you need to show the percentage saved on the Thank You page or in a custom checkout banner?
- Solution: SupaElements. Use its dynamic elements to pull the discount data and format it as a percentage for the customer.

Real-World Scenario: The Tiered “Volume” Discount

Imagine a merchant selling specialized coffee beans. They want to show a 10% discount if the customer buys 3 bags and a 15% discount if they buy 5 bags.

Step 1: Clarify the Goal

The merchant needs the percentage to appear:

On the product page as a “Volume Pricing” table.
In the cart as a dynamic badge.
In the checkout as a line-item discount.

Step 2: Confirm Limits

Standard Shopify discounts don’t allow “tiered” percentages that update dynamically on the product page without an app. Since the merchant is on Shopify Plus, they can use Functions to ensure the discount is unblockable by “discount code” hunters.

Step 3: Choose the Approach

We would use Multiscount as listed on the Shopify App Store at time of writing. The app utilizes Shopify Functions to apply the discount. It provides a native widget that calculates the percentage based on the quantity in the cart.

Step 4: Implement Safely

We recommend testing this in a development store or a sandbox. You would set up the tiers in the Multiscount dashboard:

Tier 1: Qty 3+ | 10% Off
Tier 2: Qty 5+ | 15% Off The app automatically injects the “Save X%” text into the checkout via its integration with Shopify’s native discount system.

Step 5: Measure

After implementation, the merchant should monitor the Average Order Value (AOV). By showing the percentage savings clearly at the moment of quantity selection, customers are often incentivized to push for the higher tier to “maximize” their discount percentage.

Technical Implementation: Advanced CSS for Percentage Badges

Once you have the Liquid or App logic providing the number, how you show it matters. A poorly styled discount badge can look like a bug.

To make your percentage “pop,” use a combination of absolute positioning and CSS variables. This ensures the badge looks consistent across different product card heights:

.product-card {
  position: relative;
}

.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff4d4d;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85rem;
  z-index: 2;
}

When implementing this, ensure your theme’s “Lazy Load” settings don’t delay the appearance of the badge, as this can lead to Layout Shift (CLS), which negatively impacts SEO and user experience.

Handling the “Discount Conflict” Problem

A major pain point in learning how to show discount percentage in Shopify is the conflict between “Automatic Discounts” and “Discount Codes.” Shopify, by default, often follows a “best discount applies” rule, but they don’t always stack unless specifically configured to do so.

If a customer sees “20% Off” on the product page via a compare_at_price, and then applies a “10% Welcome Code,” they might expect 30% off. However, Shopify’s internal logic might only apply one, or apply them multiplicatively (resulting in 28% off).

At Nextools, we suggest using SupaEasy to manage these interactions. With SupaEasy’s Advanced plan ($99/month as listed on the Shopify App Store at time of writing), you can use the Functions Wizard Creator to define exactly how different discount types interact. This ensures that the percentage you show on the storefront actually matches the math at the end of the checkout.

Improving Trust with Precise Language

Don’t just show a number. Contextualize it. Instead of a raw “20%”, consider:

“You’re saving 20% today”
“Bulk Savings: 15% Applied”
“Member Exclusive: 10% Off”

For Italian merchants specifically, using a tool like Fatturify is crucial when discounts are involved. In Italy, the invoice must clearly state the original price, the discount applied, and the final taxable base. If your storefront shows “20% off” but your invoice doesn’t reflect the same percentage calculation, you could face accounting discrepancies.

The Role of AI in Discount Logic

With the rise of AI, merchants can now generate complex discount rules using natural language. Within SupaEasy, the AI Functions Generator allows a developer to type: “Apply a 15% discount to the ‘Summer’ collection if the customer is tagged ‘VIP’ and has at least 3 items in the cart.”

The AI then generates the necessary Shopify Function code. This code natively reports the discount to the Shopify checkout, allowing the checkout UI to automatically show the percentage to the customer. This removes the manual work of calculating percentages in Liquid and ensures the logic is “locked in” server-side.

Script-to-Functions Migration: A Strategy for Percentages

For those currently using Shopify Scripts to show discount percentages, the clock is ticking. Scripts will eventually be fully deprecated in favor of Functions. The migration isn’t just about moving code; it’s about moving the experience.

Audit your current Scripts: Identify where you are calculating percentages (e.g., “Line Item Scripts”).
Map to Functions: Most line item scripts can be replaced by the cart_transform or product_discounts Functions.
Update UI: Since Scripts could manipulate the cart text directly, you’ll need to move that display logic to Checkout UI Extensions using a tool like SupaElements.
Verify via SupaEasy: Use the migration tools to ensure your logic remains intact during the transition.

Measuring Success and Iterating

Knowing how to show discount percentage in Shopify is only half the battle. You must verify if it actually helps your store.

Nextools Performance Checklist:

A/B Test the Display: Does “20% Off” perform better than “Save $40”? Often, for products under $100, the percentage wins. For products over $100, the absolute dollar amount often wins (The Rule of 100).

Check Mobile Clarity: Ensure the percentage badge doesn’t cover the product image on small screens.

Monitor Checkout Completion: If people add to cart but drop off when they see the discount breakdown, there may be a calculation mismatch.

Verify with Support: Are customers asking “Where is my 10%?” If so, the visual cue isn’t clear enough.

By following the Nextools Shopify App Suite playbook, you move from a “guess and check” method to an engineering-led approach to storefront optimization.

Nextools Shopify App Suite (Quick Links)

Every tool in our suite is designed to handle a specific part of the Shopify logic puzzle. Whether you are hiding shipping methods or building complex tiered discounts, we have a specialized solution:

Conclusion

Showing a discount percentage in Shopify is a fundamental yet nuanced task. It requires a clear understanding of the Liquid backend for the storefront and a strategic transition to Shopify Functions for the checkout. By prioritizing transparency and using the right tools, merchants can reduce friction and provide a more professional shopping experience.

To recap the Nextools engineering workflow:

Clarify your goals: Do you want to show percentages for simple markdowns or complex tiered logic?
Confirm platform limits: Remember that only Plus merchants can fully customize the checkout UI.
Choose the simplest durable approach: Use Liquid for basic needs, but switch to SupaEasy or Multiscount for high-performance, complex scenarios.
Implement safely: Always test your math in a dev environment, especially when multi-currency Markets are active.
Measure and iterate: Use analytics to see if your percentage badges are driving the desired AOV and conversion metrics.

Explore the full potential of your store by visiting the Nextools Shopify App Suite hub to find the perfect tool for your next customization project.

FAQ

Does showing a discount percentage require Shopify Plus?

Showing a percentage on the product or collection page via Liquid does not require Shopify Plus. However, if you want to dynamically show percentage savings within the secure checkout or customize how those percentages are calculated using Shopify Functions, a Shopify Plus plan is required to access Checkout Extensibility.

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

Always use a development store or a Shopify Plus sandbox. You can install apps like SupaEasy for free on development stores. Once your Liquid code or Function logic is ready, create a preview theme to verify the visual display before publishing it to your live audience.

Can I show a discount percentage for Shopify Scripts logic?

Shopify Scripts are being deprecated. While you can still use them currently if you are on Plus, we recommend migrating to Shopify Functions. With Functions, you can use SupaElements to display the savings percentage in the checkout UI, which is the modern, supported method for Checkout Extensibility.

Will showing a percentage conflict with my “Compare at Price”?

It shouldn’t, provided your logic is consistent. If you use a “Compare at Price” for a 20% markdown and then apply a Function-based discount of another 10%, you must decide if the UI should show the cumulative percentage or just the most recent one. Using a centralized app like Multiscount helps manage these stacked calculations and avoids customer confusion.