Shopify Show Discount on Product Page: A Strategy Guide

Table of Contents

1. Introduction
2. The Foundations of Product Page Discounts
3. Native Shopify Methods: The "Compare At" Price
4. Bridging the Gap: Automatic Discounts and Product Page Visibility
5. Bundling with Intention: Displaying Complex Discounts
6. Margin and Operations Check: The "Hidden" Costs of Discounts
7. Performance and Measurement: What to Track
8. Technical Guardrails and Compliance
9. Mobile UX Implications: Keep It Fast and Clear
10. The MBC Bundles Approach: "Bundle With Intention"
11. Conclusion
12. FAQ

Introduction

Imagine a shopper landing on your Shopify store. They’ve seen your social media ads, they like your brand aesthetic, and they are interested in your product. But as they scroll through the product page, the price feels a bit high for a first-time purchase. They hesitate. They wonder if there’s a better deal elsewhere or if they should wait for a holiday sale. This moment of hesitation is where many conversions are lost.

In the world of eCommerce, clarity is the ultimate currency. When you show a discount on the product page, you aren't just lowering the price; you are communicating value, reducing psychological friction, and giving the customer a reason to say "yes" right now. However, many Shopify merchants struggle with the technical side of displaying these discounts or, more importantly, the strategic side of doing it profitably.

This guide is designed for Shopify founders and growing direct-to-consumer (DTC) brands who want to move beyond basic price tags. Whether you have a high-SKU catalog or a boutique store with a few signature items, we will explore how to display discounts effectively while protecting your margins. For proof of how this works in practice, browse our case studies.

At MBC Bundles, we believe that bundling and discounting are not just "set-and-forget" tactics. They are part of a larger commerce system. Our approach follows a clear sequence: establish your foundations, clarify your goals, check your margins, bundle with intention, and constantly reassess your data. By the end of this article, you will have a roadmap for implementing discount displays that feel helpful to your shoppers and healthy for your business.

The Foundations of Product Page Discounts

Before we dive into the "how-to" of Liquid code or app settings, we must address the "where" and the "why." A discount display is only as good as the page it sits on. If your mobile UX is cluttered or your shipping policy is hidden, a "20% Off" badge won't save the sale. That’s one reason a hidden cost of static product pages can underperform.

Why Visibility Matters

Shoppers are conditioned to look for value. When a discount is buried in the checkout or requires a manual code entry that they have to find in an email, you are asking the customer to do extra work. Every extra step is an opportunity for them to abandon their cart.

By making the discount visible on the product page (the PDP), you align with the shopper's mental model: "I see the value, I see the savings, and I know exactly what I’m paying before I hit the button."

The "Foundations First" Audit

Before you change how you show discounts, ensure your store meets these baseline criteria:

• Mobile Speed: Discounts often involve extra scripts or badges. Ensure your theme is optimized for mobile performance so these elements don't cause layout shifts.
• Clear Merchandising: High-quality images and clear descriptions must do the heavy lifting. A discount should enhance a great product, not compensate for a mediocre one.
• Transparent Shipping: High shipping costs are the number one cause of cart abandonment. If you offer a discount on the product page but surprise them with $15 shipping at checkout, the trust is broken.

Key Takeaway: Discounts are a supportive tool, not a fix for poor site foundations. Ensure your mobile UX and core product messaging are solid before focusing on promotional displays.

Native Shopify Methods: The "Compare At" Price

The simplest way to show a discount on a Shopify product page is through the built-in "Compare at price" feature. This creates the classic strikethrough effect that shoppers recognize instantly.

How to Set It Up

1. In your Shopify Admin, go to Products.
2. Click the product you want to edit.
3. In the Pricing section, you will see two fields: "Price" and "Compare at price."
4. Enter the original (higher) price in the Compare at price field.
5. Enter the new (lower) sale price in the Price field.
6. Save the changes.

How It Appears to Shoppers

Most Shopify themes are designed to automatically detect when a "Compare at price" is higher than the "Price." The theme will typically:

• Strike through the original price.
• Display the sale price in a prominent color (often red or bold black).
• Add a "Sale" badge to the product image on the collection page and PDP.

What to Do Next

• Audit your top 10 products to ensure "Compare at" pricing is used consistently.
• Check your collection pages to see if the "Sale" badges are overlapping important product details.
• If you are running a store-wide sale, use the Bulk Editor to update multiple products at once.

Bridging the Gap: Automatic Discounts and Product Page Visibility

A common point of frustration for Shopify merchants is that Automatic Discounts (set up in the Discounts tab) do not show up on the product page by default. They only appear once the item is in the cart or at the checkout.

This creates a "discovery gap." A customer might see a product for $100, not realizing that an automatic "Buy 2, Get 10% Off" discount exists until they are much further along in the journey.

Using Liquid Logic to Show Savings

If you are comfortable with basic theme editing (or working with a developer), you can use Liquid—Shopify’s templating language—to display these discounts dynamically. For example, you can write a script that calculates the percentage saved and displays it as text, such as "You Save 20% ($20.00)."

Example logic (simplified): {% if product.compare_at_price > product.price %} Save {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}% {% endif %}

The Role of Metafields

For more complex offers, such as "Buy this item and get a free gift," you can use Shopify Metafields. Metafields allow you to store extra information about a product that isn't included in the standard fields. You can then pull this "promo text" into a specific block on your product page to ensure the offer is front and center.

What to Do Next

• Identify if your current offers are "Automatic Discounts" or "Compare at" prices.
• If using Automatic Discounts, add a text block or "Announcement Bar" on the PDP to inform shoppers of the deal.
• Test the display on a duplicate theme before making live code changes.

Bundling with Intention: Displaying Complex Discounts

Sometimes, a simple price drop isn't the best way to move inventory or increase Average Order Value (AOV). This is where intentional bundling comes in. At MBC Bundles, we see bundling as a way to provide a clear path to checkout while rewarding the customer for buying more.

Mix & Match Bundles

Instead of a flat discount on one item, you might offer a "Bundle and Save" option. For example, "Pick any 3 items for $50."

• Visibility: This shouldn't just be a small text link. It should be a dedicated section on the product page where shoppers can see the items they are choosing.
• The Benefit: It reduces choice overload by giving the customer a framework (pick 3) while still offering flexibility.

Quantity Breaks (Volume Discounts)

Quantity breaks reward shoppers for buying multiples of the same item.

• Display Style: Use a tiered table or "pill" buttons on the PDP.
  • 1 Unit: $20
  • 2 Units: $35 (Save $5)
  • 3 Units: $45 (Save $15)
• The Psychology: This shifts the customer's mindset from "Should I buy this?" to "How many should I buy to get the best deal?"

Buy X Get Y (BOGO)

BOGO offers are incredibly powerful for moving specific inventory.

• Visibility: The "Free" item should be clearly highlighted. Using a badge that says "Gift with Purchase" or "BOGO" near the "Add to Cart" button can significantly improve the attach rate.

Key Takeaway: Choose the bundle type that matches your goal. Use quantity breaks for consumables (like supplements) and Mix & Match for varied collections (like apparel or accessories).

Margin and Operations Check: The "Hidden" Costs of Discounts

Displaying a discount is the easy part. Ensuring that discount doesn't erode your profitability is where many merchants stumble. Before you make a discount highly visible on your product page, you must run a margin check.

Understanding Your Breakeven

If your gross margin is 50% and you offer a 20% discount, you aren't just losing 20% of your profit—you are losing a significantly larger portion of your bottom line. You also have to factor in:

• Shipping Costs: If a discount lowers the cart value below your free shipping threshold, the customer might abandon the cart.
• Fulfillment Complexity: Bundles that involve multiple separate items can increase shipping weight and packaging costs.
• Return Rates: Heavily discounted items often have higher return rates because the "perceived value" is lower. Ensure your return policy is clear before launching a major sale.

Discount Stacking and Conflicts

One of the most common technical issues in Shopify is "discount stacking." This happens when a customer applies a discount code on top of an already discounted "Compare at" price or an automatic bundle discount.

• The Risk: You could accidentally offer a 40% discount when you only intended 20%.
• The Fix: Carefully review your Shopify discount settings. In the Shopify admin, you can specify whether a discount can be combined with other product discounts, order discounts, or shipping discounts.

What to Do Next

• Calculate your "Land Cost" for each product, including shipping and packaging.
• Set a "Floor Price"—the absolute lowest price you are willing to sell an item for.
• Test your checkout with multiple discount scenarios (e.g., a bundle + a newsletter sign-up code) to see how they interact.

Performance and Measurement: What to Track

Once you have successfully shown your discounts on the product page, how do you know if it's working? You need to look beyond just "Total Sales."

Key Metrics to Monitor

• Average Order Value (AOV): If you are using bundles or quantity breaks, your AOV should ideally trend upward. If it stays flat or drops, your discount might be too aggressive or poorly targeted.
• Conversion Rate (CVR): Does showing the discount on the PDP actually move the needle? Run an A/B test if possible: show the discount to 50% of your traffic and the standard price to the other 50%.
• Revenue Per Visitor (RPV): This is a holistic metric that combines CVR and AOV. It tells you the true value of every person who lands on your site.
• Bundle Attach Rate: If you are offering a "frequently bought together" bundle, what percentage of customers actually add the whole bundle to their cart versus just the single item? For a deeper framework, review these bundle metrics.

One Change at a Time

Avoid the temptation to change your pricing, your bundle app, and your theme layout all in one day. If your sales drop, you won't know which change caused the issue. Implement your discount display, let it run for at least 7–14 days (depending on your traffic volume), and then analyze the data.

Segmentation Matters

A discount that works for a returning VIP customer might be unnecessary for a brand-new visitor who was already convinced by your brand story. Consider using customer tags to show specific discounts only to certain groups.

Key Takeaway: Data over gut feeling. Use AOV and RPV to measure the health of your discount strategy, and always test changes in isolation.

Technical Guardrails and Compliance

As a Shopify merchant, you have a responsibility to keep your store secure, fast, and legally compliant. Showing discounts involves touching several parts of the Shopify ecosystem.

Theme Conflicts and Performance

Some discount apps work by adding "draft orders" or injecting heavy JavaScript into your theme. This can lead to "flashing" prices (where the original price shows for a second before switching to the discount) or slow page loads.

• Best Practice: Always test new discount displays on a duplicate theme. Check your site speed using tools like Google PageSpeed Insights before and after implementation.
• When to bring in help: If you see broken layouts, missing "Add to Cart" buttons, or significant performance regressions, contact a Shopify developer or your app's help center.

Payments and Fraud

Discounts can sometimes be a target for "coupon site" scrapers or fraudulent activity.

• Security: Regularly review your Shopify Admin access and ensure your payment provider is configured to handle the increased volume of a sale period.
• Support: If you notice strange patterns in discount usage or high chargeback rates on discounted orders, contact Shopify Support and your payment gateway immediately.

Legal and Pricing Transparency

In many jurisdictions (including parts of the US and the EU), there are strict laws regarding "strikethrough" pricing. You often cannot list a "Compare at" price unless the item was actually sold at that price for a significant period.

• Compliance: Be honest with your pricing. Avoid "fake" discounts or permanent sales that never end.
• Legal Advice: This guide provides strategic advice, not legal counsel. If you are selling globally or in highly regulated markets, consult with a legal professional to ensure your pricing displays meet consumer protection laws.

Mobile UX Implications: Keep It Fast and Clear

More than 70% of Shopify traffic typically comes from mobile devices. What looks great on a 27-inch desktop monitor can look cluttered and confusing on a 5-inch phone screen.

Optimize the "Fold"

The "above the fold" area (what the user sees without scrolling) is the most valuable real estate on your site.

• Don't hide the price: Ensure the discounted price is immediately visible next to the product title.
• Button Clarity: The "Add to Cart" button should be easy to tap. If a bundle widget or discount table is pushing the button too far down the page, you will lose conversions.

Minimize Pop-ups

Avoid using multiple pop-ups to announce discounts. If a user has to close a newsletter popup, a cookie consent banner, and a "discount code" overlay just to see the product, they will likely leave. Instead, integrate the discount information directly into the page design using badges or clean text blocks.

What to Do Next

• Open your store on an iPhone and an Android device.
• Try to complete a purchase using only one hand.
• If the discount info is hard to read or the buttons are too small, simplify the design.

The MBC Bundles Approach: "Bundle With Intention"

To wrap everything together, let’s revisit the "Bundle With Intention" framework. Showing a discount on your product page is a tactical move, but it should be guided by a strategic journey.

1. Foundations First: Is your product page fast, clear, and trustworthy? Fix the basics before adding the "Sale" tags.
2. Clarify the Goal: Are you trying to clear old inventory? Use a BOGO. Are you trying to lift AOV? Use quantity breaks or Mix & Match.
3. Margin & Ops Check: Will you actually make money on this sale? Factor in shipping, returns, and fulfillment.
4. Bundle With Intention: Choose the right display type (Compare-at price, tiered table, or badge). Keep the value obvious and the path to checkout simple.
5. Reassess and Refine: Use your Shopify analytics to see what’s working. Change one thing at a time and iterate based on what your customers are actually doing—not just what you think they want.

For a real-world example, review the Magnus Luxury Watches case study.

By following this path, you move away from "panic discounting" and toward a sustainable growth strategy. Discounts become a tool for building customer loyalty and increasing the efficiency of your store.

Conclusion

Showing discounts on your Shopify product page is one of the most effective ways to reduce shopper hesitation and drive immediate action. Whether you use native features like "Compare at" pricing or more sophisticated bundling strategies, the goal remains the same: provide clear, undeniable value to your customers.

Key Takeaways:

• Visibility is Key: Don't make customers wait until the checkout to see their savings. Use PDP badges, strikethrough pricing, and tiered tables.
• Strategy Over Tactics: Choose your discount type (BOGO, Quantity Breaks, Mix & Match) based on your specific business goals—like increasing AOV or moving inventory.
• Protect Your Margins: Always run the numbers. A high conversion rate means nothing if your net profit is zero.
• Test and Iterate: Start with a simple setup, measure the impact on your AOV and conversion rate, and refine your approach over time.

Building a successful Shopify store is a marathon, not a sprint. Use discounts intentionally to support your brand’s long-term health, not just a short-term spike in numbers.

If you’re ready to take your discount strategy to the next level, start by auditing your current product pages. Look for the "discovery gaps" where shoppers might be missing out on savings, and then implement the minimal effective change to bridge that gap. At MBC Bundles, we are here to help you navigate this journey with tools and education built for founders, by founders. When you’re ready, install MBC Bundles on Shopify.

FAQ

Why isn't my "Compare at price" showing a strikethrough?

This is usually a theme-specific issue. Most Shopify themes require the "Compare at price" to be higher than the "Price" to trigger the strikethrough effect. If it’s still not showing, check your theme settings under Product Pages or Typography to ensure sale pricing is enabled. If you've customized your CSS, there may be a code conflict hiding the element.

Can I show a percentage discount instead of a dollar amount?

Yes, but this often requires a small change to your theme’s Liquid code. Shopify stores the prices as numbers, so you can use math filters to calculate the percentage (price / compare_at_price) and display it. Many Shopify apps, including MBC Bundles, also offer built-in settings to toggle between "Amount Off" and "Percentage Off" for your bundle displays.

Will showing multiple discounts on one page confuse my customers?

It can. This is known as "choice overload." If you have a "Compare at" price, a BOGO offer, and a quantity break all on the same page, the shopper might feel overwhelmed and leave. We recommend focusing on one primary offer per product page. Use a clear visual hierarchy so the customer knows exactly which deal is the best value.

How do I prevent discount codes from stacking on top of my sale prices?

In your Shopify Admin, go to the Discounts section and click on the specific discount you want to edit. Look for the Combinations setting. Here, you can uncheck the boxes for "Product discounts," "Order discounts," or "Shipping discounts." This ensures that a customer cannot use a 10% off coupon code on an item that is already marked down by 20%. Always test this in your cart before launching.