How to Show Discount Percentage in Shopify Stores

Table of Contents

1. Introduction
2. Foundations First: Preparing Your Store for Discounts
3. Clarify the "Why": Identifying Your Discounting Goal
4. How to Show Discount Percentage in Shopify Using Code
5. When to Use an App Instead of Custom Code
6. Margin and Operations Check: The Hidden Risks of Discounting
7. The Psychology of the "Rule of 100"
8. What Bundling Tools Can and Cannot Do
9. Performance and Measurement: How to Know if It’s Working
10. When to Bring in Professional Help
11. Summary: The Journey to Better Discount Displays
12. FAQ

Introduction

In the world of online shopping, clarity is the ultimate currency. When a shopper lands on your store, they are making a series of micro-decisions every second. They are asking: Is this what I need? Is this a good brand? And, perhaps most importantly, is this a good deal? While showing a "Compare at" price (the crossed-out original price) is a standard practice in eCommerce, it often leaves the customer to do the mental math themselves. By the time they have calculated that they are saving exactly 22%, they might have already lost interest or moved on to a competitor.

Learning how to show discount percentage in Shopify is a subtle but powerful way to reduce cognitive load for your customers. Instead of forcing them to subtract $14.50 from $65.00, you present them with a clear "Save 22%" badge. This immediate visual cue validates their decision to buy and highlights the value of your offer. This guide is designed for Shopify founders and growing DTC brands who want to refine their merchandising, improve their Average Order Value (AOV), and create a more professional shopping experience.

At MBC Bundles, we believe that every element of your store should serve a purpose. We approach discounts and bundles through a specific lens: the "Bundle With Intention" framework. This means we don't just add features because they look good; we implement them because they solve a business problem. In this article, we will walk you through the technical steps of displaying discount percentages, the psychological strategy behind it, and the operational checks you need to perform to ensure your discounts remain profitable.

Our thesis is simple: show value clearly, but only after you have built a foundation of trust. We will follow a responsible journey from checking your foundations and clarifying your goals to performing margin checks, choosing the right implementation method, and finally, reassessing your results based on data.

Foundations First: Preparing Your Store for Discounts

Before we dive into the Liquid code or app settings required to show a discount percentage, we must address the foundation of your store. A "20% Off" badge cannot fix a slow-loading page, blurry product photography, or a confusing checkout process. If your site feels untrustworthy, a high discount percentage might even look suspicious to a savvy shopper.

Clean Merchandising and Trust Signals

Ensure your product pages are optimized. This means having clear, high-resolution images, descriptive titles, and transparent shipping and return policies. When a shopper sees a discount percentage, they should feel it is a reward for their interest, not a desperate attempt to move low-quality inventory.

Mobile UX and Performance

Most Shopify traffic today comes from mobile devices. If you add a custom discount percentage badge that is too large, it might overlap with your product title or hide the "Add to Cart" button on a small screen. Always test your changes on multiple devices. At MBC Bundles, we prioritize clean UX because a bundle or a discount is only effective if the customer can actually see and click the offer without friction.

Transparent Pricing

Before showing a percentage, make sure your "Compare at" prices are accurate and compliant with local consumer protection laws. Artificially inflating an original price to make a discount look larger is a deceptive tactic that can lead to legal trouble and a loss of customer trust.

Key Takeaway: A discount percentage is a visual amplifier. Ensure the product and the store experience it is amplifying are already high-quality and trustworthy.

Clarify the "Why": Identifying Your Discounting Goal

Why do you want to show a discount percentage? The answer will dictate how and where you display it. At MBC Bundles, we encourage merchants to identify their specific objective before making technical changes.

Raising Average Order Value (AOV)

If your goal is to get people to spend more, a discount percentage is often most effective when tied to a threshold. For example, "Buy 3 and Save 15%." Showing that percentage on a bundle page or a quantity break widget tells the customer exactly how much they are gaining by adding more items to their cart.

Moving Stale Inventory

If you have a collection of products that aren't selling as quickly as you’d like, a prominent percentage badge on the collection page can act as a "stop sign" for scrolling shoppers. It draws the eye to products they might have otherwise skipped.

Improving Conversion for First-Time Visitors

For new shoppers who are unfamiliar with your pricing, a percentage provides context. They may not know if $40 is a good price for your organic cotton t-shirt, but they know that "20% Off" represents a limited-time value.

Supporting Gifting and Seasonal Campaigns

During Black Friday or holiday seasons, shoppers are specifically looking for "the best deals." In these high-competition periods, the percentage is often more important than the actual price because it allows for quick comparison across different stores.

How to Show Discount Percentage in Shopify Using Code

For many themes, Shopify does not show the percentage by default; it only shows the "Sale" badge or the two different prices. To get the specific percentage, you usually need to edit your theme's Liquid files.

Note: If you are not comfortable editing code, we recommend testing these changes on a duplicate theme or hiring a Shopify expert.

The Logic Behind the Math

To show a percentage, we need to tell Shopify to perform a calculation based on two pieces of data: the price (what the customer pays now) and the compare_at_price (the original price). The formula is: ((Compare at Price - Price) / Compare at Price) * 100

Step-by-Step Implementation

1. Duplicate Your Theme: Never edit your live theme directly. Go to Online Store > Themes > Actions > Duplicate.
2. Locate the Price Snippet: Most modern Shopify themes (like Dawn or other 2.0 themes) handle pricing in a snippet called price.liquid or within a block in main-product.liquid.
3. Insert the Liquid Logic: You will need to find the section that checks if the product is on sale. This usually starts with something like {% if product.compare_at_price > product.price %}.
4. Add the Calculation Code: Inside that "if" statement, you can add code similar to this: {% assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %} <span>Save {{ savings }}%</span>

Handling Variants with Different Prices

One complexity arises when a product has multiple variants (e.g., Small, Medium, Large) with different prices. If the "Small" is on sale but the "Large" is not, your code needs to be smart enough to show the discount for the selected variant. This often requires additional JavaScript to update the percentage dynamically as the customer clicks different options.

What to do next:

• Identify which theme file controls your product prices.
• Decide if you want the percentage to appear on the Product Page, Collection Page, or both.
• Test the calculation with a product that has a clean discount (e.g., $100 down to $80) to ensure the math is correct.
• Check the mobile view to ensure the "Save X%" text doesn't break your layout.

When to Use an App Instead of Custom Code

While custom code is a "one-and-done" solution, many merchants prefer to install MBC Bundles for several reasons. At MBC Bundles, we see bundling apps as a way to automate this process while adding more strategic depth to the offer.

Automated Calculations

Apps can automatically calculate and display savings across your entire site without you ever touching a line of Liquid code. This is particularly helpful for stores with thousands of SKUs where manual updates are impossible.

Dynamic Bundling and Quantity Breaks

If you want to show a discount percentage that changes based on how many items are in the cart (e.g., 10% off for two items, 20% off for three), code becomes very complex. MBC Bundles on Shopify is built to handle this logic out of the box. It can display the "potential" savings on the product page, which encourages the user to add more to their cart to "unlock" the higher percentage.

Visual Consistency

Apps often provide a suite of design tools that allow you to match the "Save %" badge to your brand's colors and fonts perfectly. This ensures that the discount doesn't look like an afterthought but a core part of your brand identity.

Margin and Operations Check: The Hidden Risks of Discounting

Before you broadcast a "30% Off" message across your store, you must confirm that your business can actually afford it. This is a critical step in the "Bundle with Intention" approach, and it connects closely with how to price bundle deals.

Calculating Net Profit

A 20% discount on the gross price does not mean a 20% hit to your profit; it is often much more. You must account for:

• Cost of Goods Sold (COGS): What you paid for the item.
• Shipping Costs: Are you offering free shipping on top of the discount?
• Transaction Fees: Credit card and Shopify fees are usually calculated on the total checkout price.
• Returns: Discounted items still cost money to process if they are returned.

Inventory Constraints

Showing a high discount percentage will likely increase your velocity of sales. Do you have enough stock to handle the surge? If you run out of stock but the "Save 40%" badge is still live, you are creating a frustrating experience for shoppers and potentially hurting your SEO if pages bounce.

Discount Stacking and Conflicts

One of the biggest operational "red flags" in Shopify is discount stacking. If you have a site-wide 10% discount and a "Buy 2 Get 20% Off" bundle, can a customer combine them? If they can, you might end up selling a product at a 30% discount, which could put your margins in the red. Always test your checkout flow with multiple codes and automated discounts to see how they interact.

Caution: Always perform a "Worst Case Scenario" math check. If a customer uses every available discount plus free shipping, are you still making money on that order?

The Psychology of the "Rule of 100"

When deciding how to show discount percentage in Shopify, it’s helpful to understand the "Rule of 100." This is a classic merchandising principle that helps you choose between showing a dollar amount or a percentage.

• If the product price is under $100: A percentage usually sounds more impressive. For a $20 item, "20% Off" sounds better than "$4 Off," even though they are the same value.
• If the product price is over $100: A dollar amount often sounds more significant. For a $500 item, "$100 Off" sounds more substantial than "20% Off."

By understanding this, you can tailor your display. Some merchants choose to show both, but if space is limited, choose the one that creates the strongest perceived value for that specific price point.

What Bundling Tools Can and Cannot Do

As a senior eCommerce writer at MBC Bundles, I often see merchants treat bundles and discount displays as a "magic button" for sales. It is important to have realistic expectations.

What Bundling Tools Can Do:

• Improve Perceived Value: They make a "good deal" look like a "great deal."
• Reduce Friction: They group relevant products together, so the customer doesn't have to search.
• Lift AOV: They provide a clear incentive to add one more item to the cart.
• Simplify Decisions: Curated bundles reduce choice overload by telling the customer "these go together."

What Bundling Tools Cannot Do:

• Replace Product-Market Fit: If no one wants your product at full price, they probably won't want it at 20% off either.
• Fix Poor Traffic Quality: If you are sending the wrong people to your store, a discount badge won't convert them.
• Guarantee Revenue Lifts: While they often improve conversion, the result depends on your execution, branding, and niche.
• Fix Unclear Policies: If your shipping takes 3 weeks and isn't mentioned until the very end, a discount won't stop them from abandoning the cart.

Performance and Measurement: How to Know if It’s Working

You have implemented the code or the app, and the percentages are live. Now what? You must measure the impact of this change. If you want a broader benchmark, compare your results against our AOV benchmark vs mix match adopters.

Key Metrics to Track

1. Average Order Value (AOV): Has the presence of the percentage encouraged people to buy higher-priced items or more items per order?
2. Conversion Rate (CR): Are more people moving from the product page to the checkout now that the value is clearer?
3. Add-to-Cart Rate: This is often the first metric to move. A clear "Save %" badge should theoretically increase the number of people who add the item to their cart.
4. Revenue Per Visitor (RPV): This is the ultimate metric. It combines conversion and AOV to tell you if the discount is actually making your traffic more valuable.

One Change at a Time

Don't launch a new theme, a new discount percentage badge, and a new shipping policy all on the same day. You won't know which change caused the move in your data. Change the discount display, wait at least a week (or until you have enough statistical significance), and then analyze the results.

Segmentation Matters

Check your data by device. If your conversion rate went up on desktop but down on mobile, your percentage badge might be covering up important information on smaller screens. Similarly, look at new vs. returning customers. Returning customers might not need the percentage as much as new visitors who are still evaluating your brand's value.

When to Bring in Professional Help

ECommerce moves fast, and it’s easy to get overwhelmed by the technical side of Shopify. Here is when you should stop DIY-ing and call in a specialist.

Theme Conflicts and Performance

If you add custom Liquid code and your site suddenly slows down or your "Add to Cart" button stops working, you likely have a theme conflict. Always test on a duplicate theme. If you can't resolve the issue, contact the Help Center. A slow store will cost you more in lost sales than a developer will cost in fees.

Payments and Security

If you are experimenting with discounts and notice strange patterns in your orders—such as the same customer using a code dozens of times or orders coming in at $0.00 when they shouldn't—contact Shopify Support immediately. Review your admin access settings and ensure your payment provider is correctly configured to handle the types of discounts you are offering.

Legal and Compliance

If you are selling in regions with strict pricing laws (like the EU's Price Indication Directive), showing a "Compare at" price or a discount percentage has specific legal requirements regarding how long the "original" price must have been active. Consult with a legal professional or a compliance specialist to ensure your display is lawful.

Summary: The Journey to Better Discount Displays

Showing a discount percentage is a small change that can yield significant results if done with intention. Let’s recap the journey:

• Foundations: Ensure your site is fast, trustworthy, and mobile-friendly before adding visual "noise."
• Goal Clarity: Decide if you are trying to move inventory, raise AOV, or simply clarify value for new visitors.
• Margin Check: Verify that the discount doesn't eat your profit, especially when combined with shipping and fees.
• Implementation: Use Liquid code for simple needs or a bundling app like MBC Bundles for dynamic, strategic discounting.
• Measurement: Track AOV and Conversion Rate to ensure the change is actually helping your business.

"A discount is not a strategy in itself; it is a tool to facilitate a strategy. By showing the percentage, you are simply making the value of your strategy more accessible to the customer."

At MBC Bundles, we are committed to helping Shopify merchants grow sustainably. For proof, browse our case studies. We encourage you to start simple. Choose your most popular product, implement a clear "Save %" badge, and watch how your customers react. Once you have mastered the basics, you can move on to more advanced tactics like Mix & Match bundles or quantity breaks that use these same percentage signals to drive even higher growth.

FAQ

How do I show the discount percentage on the collection page?

To show the percentage on a collection page, you need to edit the product-card.liquid or main-collection-product-grid.liquid file in your theme. You will use the same Liquid math logic used on the product page: subtract the price from the compare_at_price, divide by the compare_at_price, and multiply by 100. This allows customers to see the savings immediately as they browse your catalog.

Will showing a discount percentage slow down my Shopify store?

If implemented correctly using Liquid (Shopify’s server-side language), there is virtually zero impact on page load speed. Liquid calculations happen before the page is sent to the user's browser. However, using heavy third-party apps or poorly written JavaScript to calculate percentages can lead to "layout shift" or slower load times. Always prioritize native Liquid or high-performance apps.

Can I show a discount percentage for Shopify Bundles?

Yes, and it is highly recommended. For bundles, the percentage is often the primary reason a customer chooses the bundle over individual items. Bundling apps usually provide an automated way to show "Save X% when you buy this set." If you are building a custom bundle, you will need to sum the individual product prices and compare them to the bundle's total price to calculate the percentage.

What is the best way to handle discount stacking with percentages?

The best way is to use Shopify’s native "Discount Combinations" settings. You can specify whether a percentage-based automated discount can be combined with other product discounts or shipping discounts. To avoid "double-discounting" that kills your margins, we recommend being conservative: allow a discount to combine with free shipping, but rarely with another percentage-off code. Always test your combinations in the checkout before going live.