How to Show Discount on Product Page Shopify Correctly

Table of Contents

1. Introduction
2. The Foundation: Why Visual Discounts Matter
3. The Shopify Native Approach: Compare-at Prices
4. Going Beyond the Basics: Custom Liquid Logic
5. The Challenge of Automatic Discounts
6. Strategic Bundling: Showing Value Through Grouping
7. Choosing the Right Discount Mechanic
8. Performance and Mobile UX Implications
9. Measurement: Is Your Discount Display Working?
10. When to Bring in Help
11. The MBC Bundles "Bundle With Intention" Checklist
12. Summary and Next Steps
13. FAQ

Introduction

Shoppers do not like surprises at checkout, especially when those surprises involve the final price. When a customer lands on your store, they are looking for value, clarity, and a reason to trust your brand. If you are running a promotion but the savings aren’t visible until the very last step of the transaction, you are likely leaving money on the table. Learning how to show discount on product page Shopify effectively is about more than just changing a font color; it is about reducing cognitive load and building immediate price transparency.

This guide is designed for Shopify founders and growing Direct-to-Consumer (DTC) brands who want to move beyond basic price tags. Whether you are managing a high-SKU catalog or a boutique store with curated gift sets, understanding the technical and psychological aspects of discount displays is a competitive necessity.

At MBC Bundles, we believe that every element on your product page should serve the customer journey. We follow a "Bundle with Intention" approach: start with solid foundations, clarify your goals, verify your margins, choose the right strategy, and constantly reassess based on data. This article will walk you through exactly how to display discounts while maintaining a clean, high-converting store.

The Foundation: Why Visual Discounts Matter

Before we touch a single line of code or install an app, we must understand the objective. Showing a discount on the product page serves several key functions:

• Immediate Value Perception: It tells the shopper exactly how much they are saving without requiring them to do mental math.
• Reduced Cart Abandonment: When users see the "final" price early, they are less likely to experience "sticker shock" at checkout.
• Trust and Transparency: Clearly marked "Compare-at" prices signal that your sale is legitimate and time-sensitive.
• Conversion Momentum: Highlighting savings creates a psychological "nudge" that encourages the user to move to the next stage of the funnel.

However, displaying a discount is not a cure-all. It cannot replace product-market fit or fix a website that loads too slowly. It is a supportive tool within your broader commerce system.

The Shopify Native Approach: Compare-at Prices

The most straightforward way to show a discount on the product page is by using Shopify’s built-in "Compare-at price" feature. This is the "Foundations First" step for any merchant.

How it Works

In your Shopify Admin, every product variant has two primary price fields:

1. Price: What the customer pays now.
2. Compare-at price: The original price (the "Was" price).

When the Compare-at price is higher than the Price, Shopify themes (like Dawn or Sense) automatically trigger a "Sale" badge and show a strikethrough on the original price.

Practical Scenario: The Seasonal Sale

If you are running a sitewide clearance, you should audit your product CSVs. If a shirt was $50 and is now $35, ensure the "Price" is $35 and the "Compare-at price" is $50. If you leave the Compare-at price empty, the customer only sees $35, and the "value" of the $15 saving is completely lost.

Key Takeaway: Always use the native Compare-at price field for static discounts. It is the most performance-friendly method because it requires zero extra JavaScript and is easily indexed by search engines.

Going Beyond the Basics: Custom Liquid Logic

Sometimes, a simple strikethrough isn't enough. You may want to show the specific percentage saved (e.g., "Save 20%") or the exact dollar amount (e.g., "Save $15.00"). This requires a small amount of Liquid, Shopify’s templating language.

Displaying Savings Percentages

To show a percentage discount on the product page, you need to calculate the difference between the two price fields. In your price.liquid or main-product.liquid file, the logic generally looks like this:

Save {{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price }}%

This tells the system: "Take the old price, subtract the new price, multiply by 100, and divide by the old price."

What to do next:

• Backup your theme: Before editing any code, always duplicate your live theme.
• Test on Mobile: Ensure the "Save X%" text doesn't overlap with your "Add to Cart" button on smaller screens.
• Check Rounding: Use the | round filter in Liquid to avoid showing messy decimals like "Save 19.333%".

The Challenge of Automatic Discounts

A common point of friction for Shopify merchants is that Automatic Discounts (created in the Discounts section of the admin) do not show up on the product page by default. They are only calculated once an item is in the cart or at the checkout stage.

This creates a "transparency gap." A customer sees a $100 item on the product page, but your marketing promised 20% off. They don't see the $80 price until they are halfway through checkout. This confusion often leads to abandonment.

How to Bridge the Gap

1. On-Page Messaging: Use a "Product Page Banner" or an announcement bar to state: "20% off applied automatically at checkout!"
2. Theme App Blocks: Many modern "Built for Shopify" apps allow you to drag and drop a "Discount Message" block directly onto your product page that dynamically calculates what the price will be.
3. Metafields: For high-volume stores, you can use Metafields to store "Promotional Text" for specific products, ensuring the discount is mentioned right next to the price.

Strategic Bundling: Showing Value Through Grouping

One of the most effective ways to show a discount on the product page is through bundling. Instead of just discounting a single item, you show the customer a higher value proposition by grouping related products.

If you want a real-world example, see the Sony World case study.

1. Mix & Match

This allows customers to build their own "kit." For example, "Pick any 3 items for $60 (Save $15)." This type of discount should be displayed as a progress bar or a clear "Value Header" on the product page. It reduces choice overload by giving the customer a goal to hit for a specific saving.

2. Quantity Breaks (Volume Discounts)

This is the "Buy More, Save More" model. On the product page, you show a pricing table:

• Buy 1: $20
• Buy 2: $18 each (Save 10%)
• Buy 3: $15 each (Save 25%)

This clearly communicates the discount levels before the customer even clicks "Add to Cart."

3. Buy X Get Y (BOGO)

If you are offering a free gift or a Buy One Get One deal, the product page should clearly feature a badge or a dedicated section explaining the offer. If the "Y" item is added automatically, make sure the price of that item shows as "$0.00" or "FREE" to emphasize the savings.

Margin & Operations Check: Before launching a bundle-based discount, verify your shipping weights. Adding a "Free Gift" might push a package into a higher shipping tier, eating into the profit you gained from the increased AOV.

Choosing the Right Discount Mechanic

Not all discounts are created equal. Depending on your goal, you should choose a display method that matches your customer's intent.

Performance and Mobile UX Implications

Adding discount badges and custom logic can impact your store's performance if not handled correctly. A "heavy" app that uses slow JavaScript to change prices after the page loads can cause a "flicker" (Flash of Unstyled Content). This is where the price starts at $50 and jumps to $40 after a one-second delay. This looks unprofessional and can confuse customers.

Best Practices for Mobile UX:

• Keep it clean: Don't let a "SALE" badge cover the product image.
• Prioritize the "Final" Price: On mobile, the discounted price should be the largest font, while the original price should be smaller and greyed out.
• Speed Matters: Use apps that are built for Shopify and utilize App Blocks. These are designed to load more efficiently within Shopify's framework.

Measurement: Is Your Discount Display Working?

Don't just "set it and forget it." To understand if your method of showing discounts is effective, you need to track specific metrics.

• Average Order Value (AOV): Are people adding more to their cart because the discounts are visible?
• Conversion Rate: Did showing the percentage off on the product page reduce the "bounce rate"?
• Add-to-Cart (ATC) Rate: If this increases but checkout completion stays the same, your discount might be clear, but your shipping costs might be the hidden hurdle.
• Revenue Per Visitor (RPV): This is the ultimate metric. It combines conversion and AOV to show the true value of your pricing strategy.

One Change at a Time: If you decide to change from showing "Save $10" to "Save 20%," do not also change your product images or theme colors at the same time. You need to know exactly which change caused the shift in data.

When to Bring in Help

eCommerce can get complicated quickly. While many merchants can handle basic "Compare-at" prices, certain situations require professional eyes.

Theme Conflicts and Performance

If you notice your site speed dropping significantly after adding custom discount logic or if your prices are "flickering," it is time to test on a duplicate theme. If the issue persists, consult a Shopify developer or an agency. If you need implementation guidance, check the Help Center. Poor performance can hurt your SEO and frustrate mobile users.

Legal and Compliance Guardrails

In many regions, there are strict laws regarding "Compare-at" pricing. For example, in the European Union, the Omnibus Directive requires that the "original" price shown must be the lowest price the item was sold for in the last 30 days.

Caution: We strongly recommend consulting with a legal or compliance specialist to ensure your pricing transparency meets local consumer protection laws. Misleading "original" prices can lead to significant fines.

Payments and Security

If you are using third-party scripts to manipulate checkout prices, ensure they do not interfere with your payment gateway's security protocols. If you ever see discrepancies between the price shown on the product page and the price charged at checkout, contact Shopify Support and your payment provider immediately to investigate potential sync issues or fraud risks.

The MBC Bundles "Bundle With Intention" Checklist

Before you go live with a new way to show discount on product page Shopify, run through this checklist:

1. Foundations First: Is my store mobile-friendly and fast? Are my shipping and return policies clear?
2. Clarify the "Why": Am I trying to clear old stock (deep single-item discount) or raise AOV (bundle discount)?
3. Margin Check: After the discount and shipping, is this sale still profitable? (Remember to account for the cost of goods sold and payment processing fees).
4. Bundle with Intention: Have I chosen the simplest effective setup? Does the offer make sense for the products being grouped?
5. Reassess: Have I set a date to review the analytics (e.g., 14 days after launch)?

Summary and Next Steps

Showing discounts effectively on your Shopify product pages is a balance of technical execution and psychological merchandising. By making savings obvious and transparent, you reduce the friction between "browsing" and "buying."

• Use native Compare-at prices for the best performance and basic "Was/Is" pricing.
• Use Liquid logic to display percentage or dollar savings for extra impact.
• Leverage Bundling (Mix & Match, Quantity Breaks) to show deeper value while protecting your margins.
• Monitor Mobile UX to ensure that your badges and savings text don't clutter the shopping experience.

"A discount is only as good as the customer's ability to see it. If they have to search for the value, the value doesn't exist to them."

Your next step should be a quick audit of your top-selling products. Do they clearly show the value of any active promotions? If not, start with the native Shopify Compare-at fields today. As your strategy matures, explore how structured bundling through MBC Bundles can take your AOV to the next level by making "saving more" the easiest choice for your customers.

FAQ

How do I show a percentage discount instead of just a sale badge?

You can achieve this by modifying your theme's Liquid code (usually in the price.liquid or card-product.liquid snippets). By calculating the difference between the compare_at_price and the price, you can output a "Save X%" string. Many modern themes also offer this as a built-in setting within the Theme Customizer under "Product Cards" or "Price."

Why isn't my discount showing on the product page?

The most common reason is that you have applied an "Automatic Discount" in the Shopify admin rather than setting a "Compare-at price" on the product itself. Automatic discounts are calculated at the cart or checkout level. To show these on the product page, you need to use an app that supports frontend messaging or manually add text/badges to your product description.

Can I show different discounts for different customer groups?

Yes, but this typically requires using Shopify Plus (via B2B features) or a third-party app. You can use customer tags (e.g., "Wholesale" or "VIP") to trigger different pricing logic on the product page. This is a great way to show exclusive discounts without devaluing your brand for the general public.

How long does it take to see an impact from showing discounts?

While some stores see an immediate jump in Add-to-Cart rates, we recommend running a pricing display change for at least 7 to 14 days. This allows you to collect enough data to account for weekly traffic fluctuations and ensure that the change is actually improving your Revenue Per Visitor (RPV) rather than just temporarily boosting volume at the expense of profit.