How to Effectively Shopify Show Percentage Discount

Table of Contents

1. Introduction
2. The Psychology of Savings: Why Percentages Matter
3. Foundations First: The Native Shopify Method
4. Moving Beyond the Basics: Customizing the Display
5. Bundling with Intention: The Strategic Path
6. Managing Discount Stacking and Conflicts
7. Mobile UX: Where and How to Show the Discount
8. What Bundling Tools Can and Cannot Do
9. Measuring Success: Moving Beyond the "Feel-Good" Metric
10. When to Bring in Professional Help
11. Summary of the "Bundle with Intention" Path
12. FAQ

Introduction

Walking through a physical store, your eyes are naturally drawn to the bright red tags announcing "20% Off." This visual cue instantly signals value, triggering a psychological response that encourages you to stay longer and look closer. In the digital world of Shopify, this experience translates to the "percentage discount badge" or the strike-through price. While it seems like a simple visual element, knowing how to Shopify show percentage discount across your store is one of the most effective ways to communicate value quickly.

For many Shopify merchants—whether you are a new founder launching your first line of skincare or a growing DTC (Direct-to-Consumer) brand managing a catalog of hundreds of home goods—the goal is often the same: increasing Average Order Value (AOV). AOV is simply the average amount a customer spends every time they place an order. Showing a clear percentage discount helps bridge the gap between "just browsing" and "adding to cart" by making the savings tangible and immediate.

At MBC Bundles, we see discounts as a powerful tool, but one that must be used with precision. Our approach is grounded in what we call "Bundling with Intention." This means that before you add a single discount badge to your site, you should have a solid foundation in place: a clear offer, transparent shipping policies, and a fast mobile experience.

In this guide, we will walk you through the technical steps of displaying percentage discounts on Shopify, the strategic thinking behind which discounts to show, and how to ensure your promotions actually improve your bottom line without eroding your brand value. We’ll cover everything from the native "Compare at price" feature to more advanced bundling strategies that can help you move inventory and delight your customers.

The Psychology of Savings: Why Percentages Matter

Before we dive into the "how-to," we need to understand the "why." Why do some stores show a dollar amount off while others show a percentage? This isn't a random choice; it’s a strategic decision based on the "Rule of 100."

The Rule of 100 suggests that for products priced under $100, a percentage discount (e.g., 25% off) typically feels more significant to the shopper than a dollar amount (e.g., $5 off). Conversely, for products priced over $100, a numerical dollar amount (e.g., $50 off) often carries more perceived weight than a percentage (e.g., 10% off).

Reducing Choice Overload

When you show a clear percentage discount, you are helping the customer make a decision. In eCommerce, "choice overload" occurs when a shopper is presented with too many options or too much data, causing them to freeze and leave the site without buying anything. By highlighting a "20% Savings" on a bundle or a specific product, you provide a clear reason to choose that item over another.

Improving Discovery

Discounts aren't just about price; they are about discovery. A percentage badge can guide a customer's eyes toward new arrivals or slow-moving inventory you want to clear. It acts as a visual signpost in a crowded collection page.

Key Takeaway: Percentages provide an immediate "mental shortcut" for shoppers to calculate value. Use them when the numerical percentage sounds larger than the actual dollar amount saved.

Foundations First: The Native Shopify Method

The most common way to Shopify show percentage discount is by using the "Compare at price" feature. This is the foundation of Shopify pricing. It allows you to show a strike-through price (the original price) alongside the current sale price.

Setting Up Compare at Prices

To do this, you don't need any apps or code. You simply go into your Shopify Admin, select a Product, and under the Pricing section, enter the original price in the "Compare at price" field and the new, lower price in the "Price" field.

While this shows the two prices, many themes do not automatically calculate and display the percentage saved (e.g., "Save 20%"). Most modern Shopify themes (like Dawn or other Online Store 2.0 themes) have a setting within the Theme Customizer to "Show savings" or "Show sale badge."

The "Foundation Check" Scenario

Imagine a merchant who is seeing high traffic on their product pages but very few "Add to Cart" actions. Before jumping into complex discount codes, they should check if their "Compare at price" is actually visible.

If the customer sees a product for $40 but doesn't realize it used to be $60, they might think the price is high. By simply enabling the sale badge in the theme settings to show "Save 33%," the merchant provides the missing context needed to trigger a purchase.

What to Do Next:

• Audit your top 10 products: Ensure "Compare at prices" are set if you are running a sale.
• Navigate to your Theme Customizer: Look under "Product Grid" or "Product Page" settings for a toggle that says "Show sale badge" or "Show discount percentage."
• Test on Mobile: Ensure the badge doesn't cover up important product imagery or the product title.

Moving Beyond the Basics: Customizing the Display

Sometimes, the native theme settings aren't enough. You might want a badge that says "You Save 15%" instead of just "Sale." This is where a small amount of "Liquid" code (Shopify's templating language) comes in.

Calculating the Percentage via Code

If your theme doesn't support percentage displays out of the box, you can manually calculate it in your code files (usually price.liquid or product-card.liquid). The math is simple: ((Compare at Price - Price) / Compare at Price) * 100.

In Liquid, it looks something like this: {{ product.compare_at_price_max | minus: product.price | times: 100 | divided_by: product.compare_at_price_max }}%

Caution with Theme Edits

Editing your theme code can significantly impact your store’s performance or layout if not done correctly. Small syntax errors can break your entire product page.

Red Flag: If you are not confident in editing Liquid files, do not experiment on your live theme. Always create a duplicate of your theme first and test the changes there. If the code feels overwhelming, consider hiring a Shopify developer or using a dedicated app that handles badge customization.

Bundling with Intention: The Strategic Path

Once your foundations are solid, you can move into more advanced ways to Shopify show percentage discount. This is where bundling becomes a powerful tool for sustainable growth. At MBC Bundles, we believe bundling should feel like a helpful suggestion to the shopper, not a high-pressure sales tactic.

Identify the Goal

Why are you offering a discount?

1. To Raise AOV: Encourage them to buy three instead of one.
2. To Move Inventory: Discount a slow-moving item when paired with a bestseller.
3. To Simplify Gifting: Create a "Starter Kit" where the total price is 15% lower than buying items individually.

Choose the Right Bundle Type

Different goals require different mechanics:

• Quantity Breaks (Volume Discounts): Show a tiered percentage discount. "Buy 2, Save 10% | Buy 3, Save 20%." This is excellent for consumables like coffee, vitamins, or skincare.
• Mix & Match: Allow customers to build their own box. As they add items, show a progress bar or a dynamic percentage discount that increases as the cart grows.
• Buy X Get Y (BOGO): A classic "Buy one, get one 50% off." This is highly effective for apparel or accessories.

The Profitability Check

A common mistake merchants make is offering a 20% discount across the board without calculating their "Contribution Margin"—the money left over after all variable costs (COGS, shipping, pick-and-pack fees, and marketing) are paid.

If your product costs $10 to make and sells for $20, a 20% discount ($4) leaves you with $6. If your shipping costs $5, you are only making $1 per unit. In this scenario, you should instead test a "Quantity Break" where the 20% discount only kicks in if they buy three items, as shipping three items is usually much cheaper per unit than shipping one.

What to Do Next:

• Identify your "Hero Product" (your bestseller).
• Create a simple "Frequently Bought Together" bundle using an app like try MBC Bundles on Shopify.
• Clearly display the percentage savings on the product page right next to the "Add to Bundle" button.

Managing Discount Stacking and Conflicts

One of the most frustrating experiences for a shopper is trying to use a discount code only to find it doesn't work with the items already in their cart. This often happens because of "discount stacking" rules.

How Discounts Work in Shopify

Shopify has specific rules about how discounts interact. By default, many automatic discounts (like those created by bundling apps) cannot be combined with manual discount codes unless you specifically enable "Combinations" in the Shopify admin.

If you are running a "Storewide 10% Off" automatic discount and a customer tries to use a "WELCOME20" code they got from your newsletter, Shopify might only apply one of them, leading to confusion at checkout.

Preventing Surprises

1. Clear Communication: If your bundles are already discounted, state clearly on the page: "Not valid with other offers."
2. Test the Flow: Regularly perform test orders. Add a bundle to your cart, then try to apply a separate discount code. See what happens.
3. App Settings: If you use MBC Bundles, check the Discount Stacking settings in the help center to ensure the behavior matches your expectations (e.g., the app can allow or disallow additional codes).

Takeaway: Transparency at the cart level prevents "Cart Abandonment"—when a shopper leaves because the final price didn't match their expectations.

Mobile UX: Where and How to Show the Discount

Most of your customers are likely shopping on their phones. On a small screen, real estate is limited. If you have five different "20% OFF" badges, a "Free Shipping" banner, and a chat popup, the customer can't even see the product.

The Mobile Hierarchy

• Product Grid: Use a small, clean "Save X%" badge in the corner of the image. Avoid covering the product's main features.
• Product Page (PDP): The discount should be near the price and the "Add to Cart" button. It should be bold but not flashing or distracting.
• Cart Page: This is the most important place to show the "Total Savings." Instead of just showing the final price, show: "You saved $12.50 (15%) today!" This reinforces the positive feeling of the purchase.

Performance Matters

Every image badge and script you add to your store can slow it down. A slow store kills conversion rates. If you are using an app to Shopify show percentage discount, ensure it is optimized for performance and doesn't cause "layout shift" (where the page jumps around as it loads).

What Bundling Tools Can and Cannot Do

It is important to have realistic expectations when implementing discount displays and bundling strategies.

What They Can Do:

• Improve Perceived Value: They make a $50 purchase feel like a "win" because the customer saved money.
• Reduce Friction: Pre-made bundles with visible discounts save the customer the time of hunting for individual items.
• Lift AOV: They provide a logical reason for the customer to spend more than they originally intended.
• Move Specific Inventory: You can use high-percentage discounts to clear out last-season stock.

What They Cannot Do:

• Replace Product-Market Fit: If no one wants your product at $50, they probably won't want it at $40 either.
• Fix Poor Traffic Quality: If you are sending the wrong people to your site, no amount of discounting will make them buy.
• Fix Unclear Shipping/Returns Policies: If a customer is worried they can't return a bundle, they won't buy it, regardless of the discount.
• Guarantee Revenue Lifts: Every store is different. What works for a luxury watch brand (where discounts might hurt brand image) won't work for a bulk snack brand.

Measuring Success: Moving Beyond the "Feel-Good" Metric

Seeing your "Sales" number go up feels great, but is your profit going up? To truly understand if your percentage discounts are working, you must track specific metrics.

Key Metrics to Track

1. Average Order Value (AOV): Is this higher when you show percentage discounts on bundles compared to when you don't?
2. Conversion Rate: Are more people finishing the checkout process?
3. Revenue Per Visitor (RPV): This is one of the most important "truth" metrics. If you have 1,000 visitors and make $1,000, your RPV is $1. If you add a discount and your sales go to $1,100 but your margins drop, did you actually win?
4. Bundle Attach Rate: What percentage of orders contain a bundle? This tells you if your "intentional" bundling is actually relevant to your shoppers.

The "One Change" Rule

When optimizing your store, only change one thing at a time. If you change your theme, launch a 20% discount, and start new Facebook ads all in the same week, you won't know which one caused your sales to go up (or down).

Test your percentage discount display for two weeks, look at the data, then make your next move.

When to Bring in Professional Help

Running a Shopify store involves many moving parts. Sometimes, you need to step back and ask for help to avoid costly mistakes.

• Theme and Code Issues: If your discount badges are appearing in the wrong place or breaking your mobile layout, and you’ve already tried the theme settings, contact a Shopify developer. Performance regressions can hurt your SEO and user experience.
• Payments and Security: If you notice strange discount patterns or think someone is exploiting your discount codes (e.g., "stacking" them in ways you didn't intend), contact Shopify Support and review your payment provider's fraud settings.
• Legal and Compliance: Different regions have different laws regarding "Original Price" and "Sale Price" transparency. In some countries, you cannot claim a "Compare at" price unless the item was actually sold at that price for a specific period. If you are unsure about pricing laws in your market (like the EU's Omnibus Directive), consult a legal professional or a compliance specialist.

Summary of the "Bundle with Intention" Path

Successfully showing percentage discounts on Shopify isn't about the biggest badge or the deepest discount. It's about a clear, intentional journey.

1. Foundations First: Ensure your product images are high-quality, your shipping is transparent, and your theme is mobile-responsive. Use native "Compare at" prices first.
2. Clarify the Goal: Are you trying to clear old stock, or get people to try a new product?
3. Margin & Ops Check: Do the math. Ensure the 15% or 20% discount doesn't leave you with zero profit after shipping and ads.
4. Bundle with Intention: Use tools like MBC Bundles to create logical pairings. Show the percentage savings clearly at the point of decision.
5. Reassess and Refine: Watch your Revenue Per Visitor. If the discount isn't moving the needle, try a different offer or a different display style.

Final Thought: Your store is a living system. Every discount you show communicates something about your brand. By being intentional and focused on value—rather than just "slashing prices"—you build a store that customers trust and return to.

FAQ

How do I show a percentage discount instead of just a sale price on Shopify?

Most modern Shopify themes have a built-in setting for this. Go to your Online Store > Themes > Customize. Navigate to a product page or your collection list settings and look for a checkbox labeled "Show savings percentage" or "Show sale badge." If your theme doesn't have this, you may need to use a small Liquid code snippet to calculate the percentage (Compare at Price minus Price, divided by Compare at Price) or use a dedicated bundling and discounting app that provides custom badges.

Why is my "Compare at price" not showing up on my store?

There are usually three reasons for this. First, ensure the "Compare at price" is higher than the "Price" field in your product settings. Second, check if your theme settings are configured to display strike-through pricing. Finally, ensure you are not using an automatic discount that overrides the product price at the checkout level only; strike-through prices usually need to be set at the individual product/variant level to appear on the product page.

Can I show different percentage discounts for different customer groups?

Yes, but this requires more than basic Shopify settings. You can use Shopify Markets to show different prices/discounts based on geographic location, or use "Customer Segments" in the Shopify admin to create specific discount codes for VIPs. For a more automated approach, certain apps allow you to display specific "Volume Discounts" or bundles only to logged-in customers or specific tagged groups, ensuring your percentage discounts are targeted and effective.

Does showing a percentage discount slow down my site's mobile performance?

If you are using native Shopify fields (like Compare at price), there is zero impact on performance. If you are using a third-party app to inject badges, "Buy One Get One" popups, or countdown timers, it can potentially slow down your site. To maintain a fast mobile UX, choose apps that are "Built for Shopify" and optimized for speed. Always test your site speed using tools like PageSpeed Insights after adding new visual discount elements.