How to Shopify Show Percentage Discount

Introduction
The Foundations of Percentage Discounts in Shopify
Implementing Basic Liquid Percentage Displays
Moving Beyond Liquid: The Era of Shopify Functions
Advanced Use Case: Tiered and Volume Discounts
Showing Discounts in the Checkout (Checkout Extensibility)
Choosing the Right Tool: A Decision Checklist
Step-by-Step Implementation via the Nextools Playbook
Technical Nuances: Multi-Currency and Rounding
Protecting Margins with Validation
Summary Checklist for Merchants
Nextools Shopify App Suite (Quick Links)
FAQ

Introduction

Modern Shopify merchants, particularly those on Shopify Plus, face a growing technical challenge: the transition from legacy liquid-hacks and Shopify Scripts to the rigid but powerful world of Shopify Functions and Checkout Extensibility. As the platform evolves, the simple request to shopify show percentage discount has moved from a basic theme edit to a complex logic requirement involving multi-currency Markets, B2B pricing, and advanced discount stacking. At Nextools, we specialize in bridging this gap by providing engineering-minded tools that allow developers and agencies to implement sophisticated checkout logic without the overhead of building custom apps from scratch.

This guide is designed for Shopify Plus merchants, technical agencies, and independent developers who need to implement reliable, performance-oriented discount displays across the product page, cart, and checkout. Whether you are migrating from Ruby Scripts or building a new headless storefront, understanding how to calculate and display these percentages accurately is critical for maintaining customer trust and conversion rates.

At Nextools, we believe in a structured workflow for any merchant implementation:

Clarify the goal and constraints: Understand the Shopify plan, checkout type, and existing discount stack.
Confirm platform limits: Recognize what Shopify Functions can and cannot do compared to theme-level Liquid.
Choose the simplest durable approach: Prioritize native Functions and robust apps like those in the Nextools Shopify App Suite over brittle JavaScript workarounds.
Implement safely: Utilize dev stores and staging environments for QA.
Measure impact: Track AOV and checkout completion to ensure the discount visibility actually aids the bottom line.

The Foundations of Percentage Discounts in Shopify

In the Shopify ecosystem, “showing a percentage discount” usually refers to the visual gap between a product’s current price and its compare_at_price. While this sounds simple, the implementation varies wildly depending on where you want the information to appear—on the product detail page (PDP), the collection grid, or deep within the checkout process.

The Role of Compare-At Price

The compare_at_price is the original price of a product before a discount was applied at the product level. Shopify uses this field natively to show “Sale” badges. However, Shopify does not natively calculate the percentage of that sale in a way that is automatically injected into every theme’s Liquid files.

For many merchants, displaying “Save 20%” is significantly more compelling than just showing two different prices. This psychological trigger is essential for high-volume stores, but it requires a programmatic calculation to ensure accuracy, especially when dealing with variant-specific pricing or quantity-based discounts managed through tools like Multiscount.

Native Limits and Technical Constraints

Before implementing any solution, you must identify your technical boundaries.

Theme Liquid: Great for PDP and collection pages, but has no impact on the actual price charged at checkout.
Shopify Functions: The modern way to handle logic. Functions allow you to calculate discounts on the fly based on cart attributes, customer tags, or volume, but they require a Plus plan for full checkout customization.
Market Complexity: If you sell in multiple currencies, a simple Liquid calculation might fail if it doesn’t account for currency conversion or rounding rules set in Shopify Markets.

Implementing Basic Liquid Percentage Displays

For the majority of theme-based displays, Liquid is the standard. If you are an agency developer, you likely handle this within product-card.liquid or product-template.liquid.

The Mathematical Logic

The formula for a percentage discount is: ((Compare At Price - Current Price) / Compare At Price) * 100

In Liquid, you must be careful with filters to ensure you aren’t dealing with string values and that the rounding is handled gracefully. A common approach is:

{% 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 %}

Challenges with Variants

A common pitfall occurs when a product has multiple variants with different price points. If the “Small” shirt is $10 (was $20) but the “Large” shirt is $15 (was $20), a static Liquid calculation based on product.compare_at_price_max will show an incorrect percentage once the user selects a specific variant.

To solve this, developers must use JavaScript to listen for variant changes. When a new variant is selected, the script should pull the specific variant’s price and compare_at_price from the JSON object available on the page and recalculate the percentage dynamically. This is where many “out of the box” themes fail, and where a custom implementation or a specialized app like SupaElements becomes necessary to maintain UI consistency.

Moving Beyond Liquid: The Era of Shopify Functions

While Liquid handles the “look” of a discount on the front end, it does nothing to “apply” the discount or show complex logic (like “Buy 3, Save 15%”) in the checkout. For Shopify Plus merchants, the deprecation of Shopify Scripts means migrating to Shopify Functions.

Why Functions Matter for Discounts

Shopify Functions are backend pieces of code that run on Shopify’s infrastructure, not the browser. This makes them faster and more secure than legacy apps that relied on the Script Editor. If you want to shopify show percentage discount based on the contents of a user’s cart—such as tiered pricing or bundle discounts—Functions are the only future-proof way to do it.

At Nextools, we developed SupaEasy specifically to help merchants manage this transition. SupaEasy acts as a Function generator, allowing you to create complex discount logic (and the associated UI labels) without writing raw Rust or AssemblyScript code.

The Problem with Script Migration

Many Plus merchants are still running Ruby Scripts that handle “Line Item” discounts. These scripts are often used to show a “10% off” message next to a line item in the cart. As Shopify moves toward Checkout Extensibility, these scripts must be replaced. The challenge is ensuring the “Savings” message remains visible to the customer during the transition.

When using the Nextools Shopify App Suite, you can deploy Function-based discounts that automatically interact with the Checkout UI, ensuring that the percentage saved is clearly communicated to the buyer at every step of the funnel.

Advanced Use Case: Tiered and Volume Discounts

Static “Sale” prices are one thing, but dynamic percentage discounts based on volume are another. High-growth stores often use tiered pricing to increase Average Order Value (AOV).

Implementing Volume Logic

Suppose you want to offer:

Buy 2, save 10%
Buy 5, save 20%
Buy 10, save 30%

Showing these percentages clearly on the product page is vital. Using Multiscount, you can create these tiers and have the app automatically display the percentage savings in a dedicated widget. This removes the need for manual Liquid calculations for every product and ensures the logic is synced perfectly with the checkout price.

Pricing Constraints for Tiered Apps

When choosing a tool for this, consider the cost and features. For example, Multiscount offers:

Free Dev Plan: Free for development and Plus sandbox stores.
Premium: $8.99/month (as listed at the time of writing) for unlimited discounts and 5 product tiers.
Advanced: $15.99/month (as listed at the time of writing) for up to 12 tiers and POS support.

By offloading this logic to a specialized app, you ensure that the percentage shown is always the percentage applied, reducing support tickets regarding “missing” discounts.

Showing Discounts in the Checkout (Checkout Extensibility)

For years, the Shopify checkout was a “black box.” You could show a total discount at the bottom, but showing a per-item percentage discount was difficult without custom CSS or heavy Scripts. With Checkout Extensibility, Plus merchants can now use UI Extensions to inject custom components.

Using SupaElements for UI Clarity

If your goal is to shopify show percentage discount specifically within the checkout headers or next to line items, SupaElements provides the necessary framework.

Rather than hiring a developer to build a custom React-based UI Extension, you can use SupaElements to:

Create Static Elements: Highlight a “You are saving 15% on this order” banner at the top of the checkout.
Dynamic Branding: Ensure your sale colors match your brand identity throughout the shipping and payment steps.
Actionable Automations: Use “SupaActions” to trigger specific UI changes when certain discount thresholds are met.

Plans for SupaElements are structured to be accessible:

Premium: $29/month (as listed at the time of writing) for checkout and thank you page branding.
Advanced: $49/month (as listed at the time of writing) for dynamic elements and priority support. (Note: This is free for SupaEasy Advanced users).

Choosing the Right Tool: A Decision Checklist

When a client or your internal team asks to show percentage discounts, use this checklist to determine the best path forward:

Is it a simple “Sale” price?
- Solution: Use Liquid in your theme. It’s free, fast, and works on all plans.
Is it a volume-based or tiered discount?
- Solution: Use Multiscount. It handles the math and the display widget automatically.
Are you on Shopify Plus and migrating from Scripts?
- Solution: Use SupaEasy. It allows you to recreate Script logic using Functions without deep coding knowledge.
Do you need to hide or show specific payment/shipping methods based on the discount percentage?
- Solution: Use HidePay or HideShip. For instance, you might want to hide “Express Shipping” if a user is already using a “Free Shipping + 20% Off” heavy discount code to protect your margins.
Do you need to block certain items from being discounted?
- Solution: Cart Block can prevent checkout if certain discount conditions are met that shouldn’t apply to specific high-margin or limited-edition items.

Step-by-Step Implementation via the Nextools Playbook

To ensure a “percentage discount” project doesn’t break your checkout or confuse customers, follow our engineering-minded workflow.

1. Clarify Goals and Constraints

Does the merchant want to show the percentage on the product card, the cart drawer, or only at the final checkout step? If they are using Shopify Markets, will a “20% off” look different in EUR vs. USD due to rounding? Always define these edge cases first.

2. Confirm Platform Limits

Remember that standard Shopify accounts cannot modify the checkout UI. If you are not on Plus, your ability to shopify show percentage discount is limited to the PDP, Collection, and Cart pages. If you are on Plus, you have the full power of Checkout Extensibility and Shopify Functions.

3. Choose the Simplest Durable Approach

Avoid “hacky” JavaScript that scrapes the DOM to find prices. This is slow and often breaks when the theme is updated. Instead, use native Liquid for theme displays and official apps for logic. For example, if you need to add a “Gift with Purchase” when a 50% discount is applied, use AutoCart rather than writing a custom theme script.

4. Implement Safely

Never push discount logic directly to a live store.

Create a Development Store.
Install the Nextools Shopify App Suite tools.
Configure your discount rules.
Test across multiple devices and currencies.
Use a staging theme to preview the UI changes.

5. Measure and Iterate

Once live, monitor your conversion rate. Sometimes, “Save $20” performs better than “Save 20%.” Use Shopify’s analytics to see which discount communication style resonates most with your audience. If you notice an increase in cart abandonment at the shipping stage, you might need to use ShipKit to offer dynamic shipping rates that complement your percentage discounts.

Technical Nuances: Multi-Currency and Rounding

A significant issue when trying to shopify show percentage discount in international stores is the “Rounding” feature in Shopify Markets.

If a product is $100 and you offer a 15% discount, the price is $85. In a different market, after currency conversion, the original price might be €92.43. If Shopify rounds that to €95, a flat 15% discount will result in a messy decimal.

To maintain a clean “Save 15%” UI, you must ensure your Liquid code or your app logic (like SupaEasy) is aware of the presentment_currency. At Nextools, we recommend using apps that are built specifically for the “New Shopify” architecture, as they handle these multi-market calculations natively, preventing the “penny gap” where the percentage shown doesn’t perfectly match the math on the screen.

Protecting Margins with Validation

Showing a big percentage discount can sometimes attract unwanted behavior, such as bot-driven bulk purchases or “discount stacking” where customers combine multiple codes in ways you didn’t intend.

Using Cart Block for Security

If you are running a high-stakes sale (e.g., Black Friday), you can use Cart Block to validate the checkout. For example, you can set a rule that says: “If a 50% percentage discount is applied, the cart cannot exceed 5 units of this specific SKU.” This protects your inventory while still allowing you to market the heavy discount to genuine customers.

Cart Block plans (as listed at the time of writing):

Premium: $3.99/month for unlimited validation rules.
Advanced: $5.99/month for targeting specific markets.
Ultimate: $7.99/month (Plus only) to block specific payment methods or discount codes based on cart logic.

Summary Checklist for Merchants

To successfully show and manage percentage discounts:

Verify if the discount is product-level (Compare-at) or cart-level (Functions).
Implement Liquid code for “Save X%” on the PDP and Collection pages.
Use JavaScript to ensure percentage labels update when variants change.
Use Multiscount for tiered or volume-based percentage savings.
For Shopify Plus, migrate legacy Scripts to SupaEasy to ensure discounts stay active.
Enhance checkout visibility with SupaElements UI components.
Test multi-currency rounding to ensure “15% off” doesn’t display as “14.8% off” in other markets.
Use Cart Block to prevent discount abuse.

The goal of showing a percentage discount is to provide clarity and incentive. By using a structured approach and the right set of tools from the Nextools Shopify App Suite, you can build a robust, high-converting discount strategy that works for both your customers and your bottom line.

Nextools Shopify App Suite (Quick Links)

FAQ

Does showing a percentage discount require Shopify Plus?

Displaying a percentage discount on your product or collection pages using Liquid does not require Shopify Plus. Any Shopify plan can use the compare_at_price logic. However, if you want to apply and display complex, dynamic percentage discounts inside the checkout (via Shopify Functions or Checkout UI Extensions), you generally need a Shopify Plus plan to access those advanced customization features.

How do I ensure the percentage discount is accurate for variants?

The most reliable method is to use a combination of Liquid for the initial page load and JavaScript for variant selection. Your theme’s JavaScript should listen for the change event on the variant picker. When changed, it should grab the new variant’s price data and re-run the calculation. Alternatively, apps like Multiscount handle this dynamic display automatically, ensuring the customer always sees the correct saving for their selected option.

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

Yes, and it is highly recommended as Shopify is moving toward Checkout Extensibility. You can use SupaEasy to migrate your Ruby-based logic into Shopify Functions. This allows you to maintain your “Percentage Off” logic while gaining the performance and security benefits of the new platform. SupaEasy even offers an AI Functions Generator to help translate legacy logic into modern Functions.

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

Always use a development store or a Shopify Plus sandbox store to test new discount logic. At Nextools, we offer free development plans for our entire App Suite. You can install the apps, configure your percentage discount rules, and walk through the entire checkout process. Only after you have verified the math, the UI display, and the multi-currency behavior should you replicate those settings on your live production store.