How to Display Discount on Product Page Shopify for More Sales

Table of Contents

1. Introduction
2. The Psychology of Visual Savings
3. Foundations: The Native Shopify Way
4. Technical Mechanics: Liquid vs. JavaScript
5. Scenario: When Shoppers "Bounce" from the Product Page
6. Advanced Display: Percentages and Badges
7. The Role of Bundling in Discount Display
8. When to Bring in Professional Help
9. Performance and Measurement: Is It Working?
10. Responsible Discounting: Trust + Compliance
11. Mobile UX: Where Discounts Go to Die
12. Discount Stacking and Conflicts
13. Summary of the "Bundle With Intention" Journey
14. Conclusion
15. FAQ

Introduction

Imagine a shopper landing on your Shopify store. They like your product, the photos are crisp, and the description is compelling. But there’s a subtle friction point: they aren’t sure if the price they see is a good value. They know a sale is happening because of your header banner, but the product page itself doesn't confirm the savings. This moment of hesitation is where many sales are lost.

Learning how to display discount on product page Shopify stores effectively is about more than just changing a price; it’s about visual communication. It’s the digital equivalent of a "Sale" tag in a physical boutique—it provides immediate context and psychological validation for the purchase. This guide is written for Shopify founders and growing direct-to-consumer (DTC) brands who want to turn that hesitation into a "Add to Cart" click.

At MBC Bundles on Shopify, we believe that discounts and bundles should feel like a helpful service to the shopper, not a high-pressure tactic. Our approach to displaying discounts follows a responsible journey: start with strong foundations, clarify your specific goals, check your margins and operations, choose the right discount type, implement the simplest effective setup, and then reassess based on data.

The Psychology of Visual Savings

Before we touch a single line of code or install an app, we must understand why displaying discounts matters. Seeing a "Compare-at Price" (the original price of an item displayed next to its current sale price) triggers what psychologists call "anchoring." The higher original price serves as a mental anchor, making the current sale price feel significantly more valuable.

However, transparency is the key to trust. If a discount is hidden until the checkout page, the customer may feel uncertain about the final cost, leading to high cart abandonment rates. By displaying the discount directly on the product page, you improve the Conversion Rate (the percentage of visitors who complete a purchase) and reduce the mental load on your customers.

Key Takeaway: Clear discount displays reduce the "cognitive friction" of shopping. When a customer doesn't have to do math to understand their savings, they are more likely to move toward the checkout.

Foundations: The Native Shopify Way

The most reliable way to show a discount is by using Shopify’s built-in "Compare-at Price" feature. This is a foundational step that every merchant should master before moving to complex apps or custom code.

Setting Up the Compare-at Price

In 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."

• Price: This is what the customer will actually pay (the sale price).
• Compare-at price: This is the original, higher price you want to show as a strikethrough.

When these are filled out correctly, most Shopify themes will automatically display the old price with a line through it next to the new price.

Why the Native Method Wins

Using the native "Compare-at price" ensures that your discounts are reflected accurately across your entire ecosystem—from your Facebook and Google shopping feeds to your internal analytics. It’s clean, it’s fast, and it doesn't require any external scripts that might slow down your site.

What to Do Next:

• Audit your top 10 products to ensure the Compare-at price is active if they are on sale.
• Verify that your theme settings (under Online Store > Themes > Customize) are set to show sale badges.
• Check your product grid on mobile to ensure the prices aren't overlapping or becoming unreadable on smaller screens.

Technical Mechanics: Liquid vs. JavaScript

When you want to go beyond a simple strikethrough—perhaps you want to show a "Save 20%" badge or a "You save $15" label—you have to choose how that information is rendered.

Liquid (Server-Side)

Liquid is Shopify's templating language. When a customer requests your product page, Shopify’s servers calculate the math (Original Price - Sale Price = Savings) and send the finished HTML to the browser.

• Pros: It’s incredibly fast and great for SEO (Search Engine Optimization) because the search engines see the discount information immediately.
• Cons: It requires a basic understanding of code to modify your theme files.

JavaScript (Client-Side)

Some apps use JavaScript to change the price on the page after it has already loaded.

• Pros: Easy to install without touching code.
• Cons: It can cause a "flicker" where the customer sees the old price for a split second before it switches to the sale price. This can sometimes feel "glitchy" to a skeptical shopper.

Caution: Always prioritize Liquid-based displays when possible. If you must use a JavaScript-based app, ensure it is optimized for performance to prevent your site speed from dropping.

Scenario: When Shoppers "Bounce" from the Product Page

If you notice high traffic but low "Add to Cart" rates, your discount display might be the culprit.

The Scenario: You are running a storewide 20% off sale using an "Automatic Discount" in Shopify. However, because Automatic Discounts are applied at checkout, your product pages still show the full price. Shoppers see the price, think it's too high, and leave (or "bounce") before ever seeing the discount in their cart.

The Solution: You need to bridge the gap between the product page and the checkout. Since Shopify doesn't natively show "Automatic Discounts" on the product page, you should:

1. Add a clear announcement bar at the top of the site.
2. Use a small snippet of text near the "Add to Cart" button that says: "20% discount applied automatically at checkout!"
3. Better yet, use the "Compare-at Price" for the duration of the sale so the visual savings are immediate and undeniable.

Advanced Display: Percentages and Badges

Percentages often feel "bigger" than dollar amounts for lower-priced items, while dollar amounts feel more significant for high-ticket items. This is known as the "Rule of 100." If a product is under $100, show the percentage (e.g., 25% off). If it's over $100, show the dollar amount (e.g., $50 off).

How to Add a Percentage Badge (Plain English)

To show a percentage badge, you or a developer would edit the price.liquid or card-product.liquid file in your Shopify theme. The code essentially tells the store: "Take the Compare-at price, subtract the current price, divide by the Compare-at price, and multiply by 100 to get a percentage."

This creates a dynamic badge that updates automatically whenever you change your prices. It’s a powerful way to show value without manual updates for every product.

What to Do Next:

• Decide if your products benefit more from "Dollar Off" or "Percentage Off" messaging.
• Test a "Sale" badge color that contrasts with your brand colors to make it pop (e.g., if your site is blue and white, a soft orange or red badge can draw the eye).
• Ensure badges don't cover up important product details or "lifestyle" portions of your photos.

The Role of Bundling in Discount Display

Bundling is one of the most effective ways to raise your Average Order Value (AOV). AOV is the average dollar amount a customer spends every time they place an order. Instead of discounting a single item, you offer a discount when multiple items are bought together.

How MBC Bundles Approaches Display

At our website, we focus on making these multi-product discounts clear on the product page. Whether it’s a "Frequently Bought Together" section or a "Mix & Match" offer, the "Intentional Bundling" approach ensures the customer sees exactly how much they are saving by adding that extra item.

For example, if a customer is looking at a skincare cleanser, a bundle display might show the cleanser plus a moisturizer and toner. The display should clearly show:

• The individual prices.
• The combined total if bought separately.
• The new, lower "Bundle Price."
• The total savings (e.g., "Save $12 when you buy the set").

Inventory and Operations Check

Before launching a bundle discount, you must ensure your operations are ready.

• Inventory: Does your system track the individual items within the bundle? If you sell out of the cleanser, can the bundle display automatically hide itself?
• Shipping: Will the bundle fit in your standard packaging, or will it trigger a higher shipping tier?
• Margins: Are you still profitable after the discount? A 20% discount on a bundle might move more units, but if your margin is only 25%, you’re leaving very little room for overhead and marketing costs.

When to Bring in Professional Help

While Shopify is designed to be user-friendly, certain customizations require a professional touch.

• Theme Conflicts: If you add a discount display and your "Add to Cart" button stops working or the page layout breaks, stop immediately. Test your changes on a "Duplicate Theme" first. If you aren't confident in the code, hire a Shopify developer.
• Performance Regressions: If your "Time to Interactive" (how long it takes for a user to actually use the page) increases significantly after adding a discount app, you may need a developer to optimize the script loading.
• Legal & Compliance: Different countries have different laws regarding "original prices." For example, some regions require the "Compare-at price" to have been the active price for a certain number of days before a sale. Always consult with a legal professional or compliance specialist to ensure your pricing transparency meets local consumer laws.
• Payments & Security: If you experience issues with discounts not applying correctly at checkout, or if you see suspicious order patterns, contact Shopify Support immediately.

Performance and Measurement: Is It Working?

You shouldn't just "set and forget" your discount displays. You need to measure their impact using clear bundle metrics.

Key Metrics to Track

1. Add-to-Cart Rate: Does showing a "20% Off" badge increase the number of people putting the item in their cart?
2. Checkout Completion: Are people dropping off at the checkout because the discount they saw on the product page disappeared or changed?
3. Revenue Per Visitor (RPV): This is the total revenue divided by the number of visitors. It’s a holistic way to see if your discounts are actually making you more money or just eating your margins.
4. Attach Rate: For bundles, this is the percentage of customers who add the suggested bundle versus just the single item.

The "One Change at a Time" Rule

To truly understand what works, avoid changing your badge color, your discount amount, and your bundle type all in the same week. Change one element, measure it for at least 7–14 days (depending on your traffic volume), and then decide if it’s an improvement.

Key Takeaway: Data is better than a "hunch." Use Shopify’s built-in reports to see how your sale items perform compared to full-price items.

Responsible Discounting: Trust + Compliance

One of the quickest ways to ruin a brand's reputation is through "deceptive pricing." This includes things like:

• Fake Scarcity: "Only 2 left!" when you actually have 500 in stock.
• Hidden Fees: Showing a massive discount on the product page but adding "handling fees" at the very end of the checkout.
• Bait-and-Switch: Showing a discount for a variant that is out of stock to get people to click.

At MBC Bundles, we advocate for "Bundle with Intention." This means your offers should be honest and easy to understand. If a discount is only for a specific color or size, state that clearly on the product page. If a bundle requires three items to trigger a discount, make that requirement bold and obvious.

Mobile UX: Where Discounts Go to Die

More than 70% of Shopify traffic often comes from mobile devices. A discount display that looks beautiful on a 27-inch desktop monitor might be a disaster on a 5-inch phone screen.

Common Mobile Pitfalls:

• Overlap: The "Sale" badge covers the product's face or the price.
• Font Size: The "You Save $X" text is so small it’s unreadable.
• Button Crowding: The bundle offer is so large it pushes the "Add to Cart" button two scrolls down the page.

Test your product pages on an actual mobile device—not just the "Mobile View" in the Shopify customizer. Try to navigate the site with one thumb. If the discount information is hard to see or makes the page feel cluttered, simplify it.

Discount Stacking and Conflicts

One of the most common technical headaches for Shopify merchants is "Discount Stacking." This happens when a customer tries to use a discount code on top of an already discounted "Compare-at price" or a bundle deal.

Shopify has improved this with "Discount Combinations," but you must still be careful.

• Check your settings in Discounts > Combinations.
• Decide if you want customers to be able to "stack" an email signup code on top of a sale price.
• Test the end-to-end flow: Add a sale item to the cart, apply a bundle, and then try a discount code at checkout. If the final price is $0 or negative (it happens!), you need to adjust your rules.

Summary of the "Bundle With Intention" Journey

To wrap up, let’s revisit the responsible journey for displaying discounts on your Shopify product pages:

1. Foundations First: Ensure your product descriptions are clear, your images are high-quality, and your shipping policies are transparent. Use the native "Compare-at Price" as your primary tool.
2. Clarify the Goal: Are you trying to move old inventory? Are you trying to introduce a new product? Choose a display style that matches the goal (e.g., a "Clearance" badge vs. a "New Launch Bundle").
3. Margin & Operations Check: Calculate your "Break-even Point." Ensure your fulfillment team can handle the increased volume or the complexity of bundles.
4. Bundle with Intention: Choose the right type (Quantity Breaks, BOGO, and Mix & Match). Keep the value obvious and the path to checkout short.
5. Reassess and Refine: Look at your AOV and conversion rates. Listen to customer feedback. If people keep asking "Is this on sale?", your display isn't clear enough.

Takeaway: Your product page is a conversation. A well-displayed discount is your way of telling the customer, "I value your business, and I've made it easier for you to say yes."

Conclusion

Displaying a discount on your Shopify product page is a powerful lever for growth, but it must be pulled with care. By moving from the "Foundations" of native pricing to the "Intention" of strategic bundling, you create a shopping experience that feels rewarding rather than overwhelming.

Remember to:

• Use the Compare-at Price for clean, fast strikethroughs.
• Prioritize Liquid-based code or high-performance apps for badges.
• Keep Mobile UX at the forefront of every design decision.
• Monitor your margins as closely as you monitor your sales.

At the MBC Bundles team, we're here to help you navigate these choices. Our tools are designed to integrate seamlessly with your Shopify store, allowing you to create bundle offers that are as visually clear as they are profitable. Start simple, measure your results, and always put the customer’s experience first.

Ready to see how intentional bundling can transform your store? Explore your options, test your displays, and start building with MBC Bundles on Shopify today.

FAQ

How do I show a percentage discount instead of just a strikethrough price?

To show a percentage discount, you typically need to edit your theme's Liquid code (usually in price.liquid or product-card.liquid). You calculate the percentage by taking the difference between the compare_at_price and the price, dividing it by the compare_at_price, and multiplying by 100. Many modern Shopify themes now include a setting in the "Theme Customize" area to toggle between showing the "Amount Saved" or "Percentage Saved" without needing to code.

Why is my "Compare-at Price" not showing up on my product page?

There are three common reasons:

1. Price Logic: The "Compare-at Price" must be higher than the "Price." If it's lower or equal, Shopify will not display it.
2. Theme Settings: Your theme may have the sale labels or strikethrough prices turned off in the settings. Go to Online Store > Themes > Customize and check the product page/collection page settings.
3. Variant Selection: If your product has variants (like sizes or colors), make sure you have set the "Compare-at Price" for each specific variant, not just the main product template.

Will adding discount badges and bundle displays slow down my store?

If you use Shopify’s native "Compare-at" features, there is zero impact on speed. If you use a third-party app to display dynamic badges or "Frequently Bought Together" bundles, there can be a slight impact. To minimize this, choose apps that are "Built for Shopify," use Liquid for rendering when possible, and avoid using multiple apps that perform the same function. Always test your site speed on Google PageSpeed Insights before and after installing a new tool.

Can I show a discount on the product page for a discount code?

Standard Shopify discount codes do not automatically show up on the product page because they are only validated at the checkout stage. To show these savings earlier, you have two options:

1. Manual Labels: Use a text block or announcement bar to tell customers to "Use code SAVE20 for 20% off."
2. Automatic Discounts: Use Shopify's "Automatic Discounts" feature and use the "Compare-at Price" to manually reflect that discount on the product page so the customer sees the value immediately.