Shopify Show Discount Price on Product Page

Table of Contents

1. Introduction
2. The Strategy Behind Showing Discounts Early
3. Method 1: The Native Shopify "Compare-at Price"
4. Method 2: Displaying Automatic Discounts Before Checkout
5. Method 3: Intentional Bundling and Volume Discounts
6. What Bundling and Discount Tools Can and Cannot Do
7. Understanding Shopify’s Discount Mechanics
8. Mobile UX and Performance Considerations
9. Measuring Success: Metrics That Matter
10. Managing Complex Store Operations
11. Summary of the Intentional Discount Journey
12. FAQ

Introduction

Imagine a shopper landing on your store after clicking an ad that promised a 20% discount. They find the product they love, but the price they see is the full retail amount. There is no strikethrough, no "sale" badge, and no mention of the discount until they reach the final step of the checkout. In those few seconds of uncertainty, most shoppers will bounce. They feel misled, or at the very least, confused.

Transparency is the bedrock of eCommerce trust. For Shopify merchants—whether you are a new founder launching your first line or a high-growth DTC brand managing a massive catalog—learning how to properly show a discount price on the product page is a fundamental conversion optimization step. It bridges the gap between a customer’s interest and their decision to click "Add to Cart."

In this guide, we will explore the technical and strategic ways to display discounts early in the customer journey. We will cover native Shopify settings, Liquid code adjustments, and intentional bundling strategies. At MBC Bundles, we believe that discounts should not be used as desperate pressure tactics. Instead, they should be part of a "Bundle with Intention" approach: a responsible journey that starts with solid foundations, clarifies the "why" behind the offer, protects your margins, and uses the right tools to create a seamless shopping experience.

The Strategy Behind Showing Discounts Early

Before diving into the "how-to," we must address the "why." Showing a discounted price on the product page serves a specific psychological purpose. It provides immediate gratification and validates the shopper's choice. However, a discount is only effective if the rest of your store’s foundation is secure.

If your product pages are slow, your shipping policy is hidden, or your mobile UX is cluttered, a discount badge will not save the sale. We recommend a phased approach to pricing transparency:

1. Foundations First: Ensure your product images are high-quality and your "Add to Cart" button is easy to find.
2. Clarify the Goal: Are you trying to move old inventory, or are you trying to increase the Average Order Value (AOV)?
3. Margin Check: Calculate your cost of goods sold (COGS) and shipping. A 20% discount that results in a net loss is not a growth strategy; it’s a liability.
4. Implement with Intention: Choose the clearest way to display the discount that fits your brand aesthetic.
5. Reassess: Use data to see if the visual discount actually improved your conversion rate.

Key Takeaway: A discount is a communication tool. Use it to signal value clearly and early, but only after you have confirmed that the underlying transaction is profitable for your business.

Method 1: The Native Shopify "Compare-at Price"

The most straightforward way to show a discount price on the product page is by using Shopify’s built-in "Compare-at price" feature. This is the "original" price that appears with a strikethrough next to the current, lower price.

How to Set It Up

Within your Shopify Admin, navigate to Products and select the item you wish to discount. In the Pricing section, you will see two fields: "Price" and "Compare-at price."

To show a discount, the "Compare-at price" must be higher than the "Price." For example, if the item normally costs $50 and you want to sell it for $40, you enter 50 in the Compare-at field and 40 in the Price field.

Why This Works

Most Shopify themes are pre-configured to recognize this data. When the system sees a Compare-at price, it automatically applies a strikethrough to the old price and highlights the new price in a different color (often red or bolded). This creates an immediate visual "anchor," showing the customer exactly how much they are saving without requiring them to do any math.

Limitations to Consider

The Compare-at price is a static field. It works perfectly for store-wide sales or permanent markdowns, but it does not account for dynamic discounts like "Buy 2, Get 1 Free" or tiered pricing based on what else is in the cart.

What to do next:

• Audit your top 10 best-sellers.
• Ensure every sale item has an accurate Compare-at price.
• Check your mobile view to ensure the strikethrough price doesn't crowd the actual price.

Method 2: Displaying Automatic Discounts Before Checkout

One of the most common frustrations for Shopify merchants is that "Automatic Discounts" created in the Discounts tab do not show up on the product page by default. Shopify typically calculates these discounts at the checkout stage.

If a shopper sees a $50 price tag on the product page but expects a 10% automatic discount, they might leave before they ever see the $45 price in the checkout. To fix this, you can use Liquid (Shopify’s templating language) or metafields to pull that information forward.

Using Liquid to Show Savings

If you are comfortable with minor theme adjustments, you can display the exact dollar or percentage amount a customer saves. This involves adding a small snippet of code to your product-template.liquid or main-product.liquid file.

The logic looks like this: if the Compare-at price is greater than the current price, subtract the price from the Compare-at price and display the result. You can also calculate the percentage by dividing the savings by the original price.

The Metafield Approach

For more complex offers—like a discount code that is only valid for a specific collection—you can use Shopify Metafields. Metafields allow you to store extra information on a product page. You could create a metafield called "Discount Note" and type in "Use code SAVE10 for 10% off." Then, you can set your theme to display this metafield right below the price.

Caution: If you are not confident in editing your theme’s code, always test changes on a duplicate theme first. Major errors in Liquid can break your product page layout or prevent the "Add to Cart" button from functioning. If you need support, visit the help center.

Method 3: Intentional Bundling and Volume Discounts

Bundling is perhaps the most effective way to show a discounted price while simultaneously increasing your AOV. Instead of just discounting a single item, you offer a reduced price when items are purchased together.

Mix & Match Bundles

A Mix & Match offer allows customers to choose their favorite variants to create a custom set. For example, "Pick any 3 candles for $45 (Regularly $60)." In this scenario, the product page should clearly display the "Bundle Price" versus the "Individual Price."

At the MBC Bundles team, we prioritize a clean UX for these offers. The goal is to reduce choice overload. If you have a high-SKU catalog, presenting a curated bundle with a single, clear discounted price is often more effective than asking the customer to hunt for individual discounts.

Quantity Breaks (Volume Discounts)

Volume discounts reward customers for buying more of the same product. "Buy 1 for $20, or 3 for $50." To make this work on the product page, you should use a tiered pricing table. This table shows the "Price Per Unit" dropping as the quantity increases.

When implementing volume discounts, it is vital to check your margins. If your shipping costs increase significantly with weight, a volume discount might eat into your profits faster than expected.

What to do next:

• Identify products that are frequently bought in multiples.
• Calculate the shipping cost for a single unit vs. a three-pack.
• Implement a simple quantity break display on the product page to see if the "Price Per Unit" visual increases your AOV.

What Bundling and Discount Tools Can and Cannot Do

As you look for ways to show discounted prices, it is helpful to understand the boundaries of what technology can achieve for your store.

What They Can Do

• Improve Perceived Value: They make the "deal" feel tangible and immediate.
• Reduce Friction: By showing the price early, you eliminate the "sticker shock" at checkout.
• Simplify Decisions: Curated bundles help shoppers who are overwhelmed by too many choices.
• Move Inventory: Highlighting a discount on specific SKUs can help clear warehouse space.

What They Cannot Do

• Fix Product-Market Fit: No amount of discounting will make people buy a product they don't want or need.
• Replace Poor Traffic: If the people visiting your site aren't your target audience, a "Sale" badge won't convert them.
• Guarantee Revenue Lifts: While discounts often improve conversion rates, they can lower overall profit if not managed carefully.
• Fix Unclear Policies: If your shipping and returns are confusing, shoppers will still abandon their carts regardless of the price.

Understanding Shopify’s Discount Mechanics

To display prices accurately, you must understand how Shopify handles the math behind the scenes. There are three primary types of discount mechanics you will encounter:

1. Fixed Amount vs. Percentage

A fixed amount ($10 off) is often better for high-ticket items, whereas a percentage (10% off) often feels more significant for lower-priced items. When showing these on a product page, the visual "Save $X" or "X% Off" badge should match the math of the Compare-at price exactly.

2. Buy X, Get Y (BOGO)

BOGO offers are harder to display on a single product page because they depend on a second item being in the cart. The most effective way to show this is through a "Gift with Purchase" callout or a bundle builder that visually adds the "free" or "discounted" item to the set as the customer shops.

3. Discount Stacking and Conflicts

This is a common "red flag" area. Shopify has specific rules about which discounts can be combined. For example, if you have an automatic 10% discount running and a customer enters a code for 15% off, they might not "stack" unless you have explicitly enabled that in your settings.

If your product page promises a discount that disappears at checkout because of a conflict, you will likely face a customer support headache. Always test your checkout flow from start to finish before announcing a major sale.

Mobile UX and Performance Considerations

More than half of all Shopify traffic typically comes from mobile devices. This means your discounted price display must be "mobile-first."

• Speed is King: Heavy apps or complex scripts that "inject" prices onto the page can slow down your site. A one-second delay in load time can significantly drop your conversion rate.
• Visual Hierarchy: On a small screen, the discounted price should be the most prominent text. Don't hide the savings in a small font or a hover-over effect.
• Avoid "Clutter": Multiple badges (e.g., "Sale," "New," "Best Seller," "Free Shipping") can overwhelm the user. Stick to the most important message: the value they are getting right now.

Key Takeaway: Test your product page on an actual smartphone, not just a desktop "mobile view" emulator. Ensure the "Save" badge doesn't overlap with the product image or the "Add to Cart" button.

Measuring Success: Metrics That Matter

Showing a discount is an experiment. To know if it's working, you need to track specific metrics in your Shopify Analytics.

• Conversion Rate (CR): Does the visual strikethrough price lead to more completed purchases?
• Average Order Value (AOV): If you are using bundles or quantity breaks to show discounts, is your AOV increasing?
• Add-to-Cart (ATC) Rate: Are more people starting the journey because the price looks more attractive?
• Revenue Per Visitor (RPV): This is the ultimate metric. It balances conversion and AOV to tell you if your discount strategy is actually making you more money.

We recommend making "one change at a time." If you change your product images, your shipping price, and your discount display all at once, you won't know which one actually moved the needle.

Managing Complex Store Operations

As your store grows, showing a simple discount becomes more complex. You may need to navigate different regions, currencies, or legal requirements.

Shopify Markets and Currency

If you sell internationally using Shopify Markets, remember that discounts must be calculated across different currencies. A "$10 off" discount in the US might need to be rounded differently in the UK or Europe to look "clean" to the customer.

Legal and Pricing Transparency

In many jurisdictions, there are strict laws regarding "Compare-at" pricing. You generally cannot list an "original" price that the product was never actually sold at for a significant period. Doing so can lead to legal complications and a loss of consumer trust.

When to Bring in Help

If you find yourself struggling with any of the following, it may be time to consult a professional:

• Theme Conflicts: If your price display looks broken or disappears on certain browsers, contact a Shopify developer.
• Security & Fraud: If you notice an unusual amount of high-value orders using stacked discounts, review your Shopify fraud analysis and payment provider settings.
• Compliance: If you are unsure about the pricing laws in the countries where you sell, consult with a legal professional or a tax specialist.

Summary of the Intentional Discount Journey

To successfully show a discount price on your Shopify product page, follow this structured path:

• Audit your Foundations: Is the product page clean, fast, and trustworthy?
• Define Your Goal: Are you clearing stock or building AOV?
• Check Your Math: Ensure the discount doesn't delete your profit margins after shipping and COGS.
• Choose Your Method: Use Compare-at prices for simple sales, or Liquid/metafields for more dynamic offers.
• Optimize for Mobile: Make sure the discount is the first thing a mobile shopper sees.
• Test and Iterate: Monitor your RPV and AOV, then adjust.

"A discount is not just a lower price; it is a signal of value. When that signal is clear, consistent, and honest, it becomes one of the most powerful tools in your merchandising toolkit. Bundling with intention ensures that every discount serves both the customer's wallet and the brand's long-term health."

Showing a discount price on your product page is about more than just changing a number in the admin. It’s about creating a cohesive, transparent experience that respects the shopper’s time and budget. By starting simple—perhaps with a clear Compare-at price—and then moving into more strategic territory like intentional bundling, you can build a store that grows sustainably.

If you are ready to move beyond simple markdowns and explore how volume discounts or Mix & Match bundles can transform your store’s performance, we invite you to look at how these elements fit into your overall merchandising strategy with our case studies. Start small, measure your results, and always keep the customer’s experience at the center of your decisions.

FAQ

How do I show a percentage off badge on my Shopify product page?

Most modern Shopify themes include a "Sale" badge by default when a "Compare-at price" is set. To show the exact percentage (e.g., "Save 20%"), you may need to edit your theme’s Liquid code. You can calculate this by taking the difference between the Compare-at price and the current price, dividing it by the Compare-at price, and multiplying by 100. Many merchants also use apps to automate these badges across thousands of products.

Why is my discounted price not showing up on the product page?

There are three common reasons: 1) The "Compare-at price" is not higher than the "Price." 2) You are using an "Automatic Discount" which Shopify only calculates at the checkout stage. 3) Your theme's code has been customized and is no longer pulling the pricing data correctly. First, check your product settings in the Shopify Admin. If those are correct, try viewing your store in a "fresh" or "default" theme to see if it is a theme-specific issue.

Can I show different discount prices to different customers?

Yes, but this typically requires using customer tags and specialized logic. For example, you can create a "VIP" tag and use Liquid code in your theme to display a lower price specifically for logged-in customers with that tag. This is a great way to reward loyalty without devaluing your brand for first-time visitors. Alternatively, some bundling and wholesale apps can manage these tiered pricing displays for you.

Will showing a discount price slow down my site's loading speed?

If you use native Shopify features like the Compare-at price, there is zero impact on speed because the data is served directly by Shopify. However, if you use multiple third-party apps that use JavaScript to "inject" or "calculate" prices on the fly, you might see a slight delay or a "flicker" where the original price shows for a split second before the discount appears. To avoid this, look for "Built for Shopify" tools that prioritize performance and clean integration, and try MBC Bundles on Shopify.