How to Show Percentage Discount in Shopify to Boost AOV

Table of Contents

1. Introduction
2. Why Percentage Discounts Matter for Your Store
3. Method 1: Using Shopify Native "Compare-at Price"
4. Method 2: Creating Automatic Percentage Discounts
5. Method 3: Calculating Percentage Savings via Liquid Code
6. Method 4: The Strategic Approach—Bundling with Intention
7. How Bundling Tools Enhance the Experience
8. The Technical Reality of Discounts in Shopify
9. Measuring Success: What to Track
10. When to Bring in Help
11. Summary of Best Practices
12. FAQ

Introduction

You have done the hard work of sourcing quality products, building a brand identity, and driving traffic to your Shopify store. However, getting a visitor to the site is only half the battle. The second half is communicating value quickly enough to encourage an "Add to Cart" action. One of the most effective ways to signal immediate value is through visual price cues—specifically, showing a percentage discount.

Whether you are a new Shopify founder looking to clear initial inventory or a growing DTC brand aiming to reward loyal customers, understanding how to show percentage discount in Shopify is a fundamental merchandising skill. A simple "Sale" tag is often not enough; shoppers want to know exactly how much they are saving relative to the original price.

In this guide, we will walk through the various methods of displaying percentage discounts, from native Shopify settings and manual "Compare-at" prices to more advanced automated strategies and intentional bundling. At MBC Bundles, we believe that discounts should never be a "set it and forget it" tactic. Instead, they should be part of a broader, intentional commerce system.

We will cover the technical steps for the Shopify admin, the liquid code logic for custom displays, and, most importantly, the strategic framework we call the "Bundle with Intention" approach. This ensures your discounts support long-term profitability rather than just a temporary spike in numbers.

Why Percentage Discounts Matter for Your Store

Before we dive into the technical "how-to," it is vital to understand the "why." In eCommerce, the psychology of pricing is everything. A percentage discount (e.g., 20% OFF) often performs differently than a fixed amount discount (e.g., $10 OFF).

According to the "Rule of 100," if a product is priced under $100, a percentage discount usually feels larger to the consumer. If a product is over $100, a fixed dollar amount often feels more significant. For example, 20% off a $25 t-shirt sounds better than $5 off, even though the math is identical.

By showing a percentage discount clearly on your Product Detail Pages (PDP) or collection pages, you reduce the cognitive load on the shopper. They do not have to do the mental math; you have already presented the value proposition clearly.

Key Takeaway: Percentage discounts provide immediate context for value. Choose them when the numeric value of the percentage sounds more impressive than the numeric value of the currency discount.

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

The most direct way to show a discount in Shopify is by using the "Compare-at price" field. This is a built-in feature that allows you to show the original price crossed out next to the current sale price.

How to Set It Up

1. From your Shopify Admin, go to Products.
2. Click on the product you wish to discount.
3. In the Pricing section, you will see two fields: Price and Compare-at price.
4. Set the Compare-at price to the original (higher) price.
5. Set the Price to the new (lower) sale price.
6. Click Save.

How It Displays

Most Shopify themes are programmed to recognize when a "Compare-at price" is higher than the "Price." When this happens, the theme typically displays a "Sale" badge and shows the old price with a strikethrough.

However, many basic themes only show the prices, not the calculated percentage. To show the specific percentage (e.g., "Save 15%"), you may need to look into your theme's "Product Grid" or "Product Page" settings. If your theme doesn't support a percentage calculation out of the box, you may need a small code snippet or a specialized app.

Method 2: Creating Automatic Percentage Discounts

If you want the discount to be applied at checkout without the customer entering a code, you should use Shopify’s Automatic Discounts feature. This is particularly useful for store-wide sales or category-specific promotions.

Steps for Desktop

1. Go to Discounts in your Shopify admin.
2. Click Create discount.
3. Select Amount off products or Amount off orders.
4. Under Method, select Automatic discount.
5. Give the discount a title (this is what customers will see in their cart).
6. In the Value section, select Percentage and enter the value.
7. Choose whether it applies to specific collections or products.
8. Set Minimum purchase requirements if necessary (e.g., "Spend $50 to get 10% off").
9. Set the Active dates and click Save.

Steps for Mobile

1. Open the Shopify App and tap the Grid/Menu icon.
2. Tap Discounts.
3. Tap the + button to create a new discount.
4. Select your discount type and ensure Automatic discount is selected.
5. Enter the percentage value and select the applicable products.
6. Tap Save.

Considerations for Automatic Discounts

Automatic discounts are excellent for reducing friction, but Shopify currently limits you to one active automatic discount at a time per order unless you have configured "Discount Combinations." If you have multiple promotions running, ensure they are set to "Combine" in the settings, or you may find that customers are unable to get the deal they expected.

What to do next:

• Audit your current promotions to ensure no two automatic discounts are competing.
• Test the customer journey from cart to checkout to see exactly how the percentage is labeled.
• If the discount only applies to a specific collection, clearly state that on the product page to avoid confusion.

Method 3: Calculating Percentage Savings via Liquid Code

If your theme only shows the "Price" and "Compare-at price" but you want to explicitly display the text "Save X%," you can use a small piece of Liquid (Shopify’s templating language).

Disclaimer: Before making changes to your theme code, always create a duplicate of your theme. If you are not comfortable with HTML/Liquid, we recommend reaching out to a Shopify Expert.

The Logic

To calculate the percentage, we take the difference between the original price and the sale price, multiply by 100, and divide by the original price.

{% if product.compare_at_price > product.price %}
  {% capture discount %}
    {{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%
  {% endcapture %}
  <span class="discount-badge">Save {{ discount }}</span>
{% endif %}

This snippet checks if there is a "Compare-at price" higher than the current price. If there is, it does the math, rounds it to the nearest whole number, and displays "Save X%."

Where to Place the Code

You would typically place this in your product-thumbnail.liquid, card-product.liquid, or main-product.liquid files, depending on your theme's structure. Placing it near the price display ensures that the shopper sees the savings immediately.

Method 4: The Strategic Approach—Bundling with Intention

At our approach is to see discounts as a tool, not a crutch. While a simple 10% off code is fine, it doesn't necessarily change the behavior of the shopper in a way that grows your business long-term. This is where the "Bundle with Intention" framework comes into play.

Instead of just showing a percentage discount on a single item, you can use percentage discounts to drive higher Average Order Value (AOV) through bundling.

The Five-Step Journey

1. Foundations First: Before applying discounts, ensure your site basics are solid. Is your mobile UX fast? Are your shipping and return policies clear? A 50% discount won't fix a broken checkout or a slow-loading page.
2. Clarify the "Why": Why are you showing this percentage discount? Are you trying to move old stock? Are you trying to get people to buy three items instead of one? Are you trying to introduce a new product line?
3. Margin & Operations Check: This is the most critical step. A 20% discount on a bundle of three items might leave you with a 5% net margin after shipping and ads. However, a 20% discount on a bundle of three items might leave you with a 20% net margin because shipping costs are consolidated. Always check your math before launching.
4. Bundle with Intention: Choose the right mechanic for the goal.
   • Quantity Breaks (Volume Discounts): "Save 10% on 2, 20% on 3." This shows a progressive percentage discount that encourages bulk buying.
   • Mix & Match: Let the customer build their own set and see the percentage savings update in real-time.
   • Buy X Get Y (BOGO): A "Buy One Get One 50% Off" is essentially a 25% discount on the total pair, but it feels more exciting to the shopper.
5. Reassess and Refine: Don't let your bundles grow stale. Look at your "Attach Rate" (how often the bundle is bought compared to the single item) and adjust the percentage to find the sweet spot between conversion and profit.

How Bundling Tools Enhance the Experience

Standard Shopify features are great for basic price changes, but as your store grows, you might need more flexibility. This is where bundling apps become essential.

What Bundling Tools Can Do

• Improve Perceived Value: They can dynamically calculate and display "You Save 22%" as customers add items to a bundle.
• Reduce Friction: They allow customers to add multiple items to the cart with a single click, with the percentage discount already applied.
• Support Gifting: Bundles are naturally giftable. Showing a "Bundle & Save 15%" badge makes the gift feel like a smarter purchase.
• Move Inventory: You can bundle a slow-moving SKU with a best-seller, using a percentage discount to incentivize the pairing.

What Bundling Tools Cannot Do

• Fix Product-Market Fit: If no one wants the product at full price, a 10% bundle discount likely won't change that.
• Guarantee Revenue Lifts: While they often improve AOV, the quality of your traffic still determines your total revenue.
• Replace Clear Policies: Shoppers still need to know how to return a bundle. If your return policy is confusing, the discount won't overcome that lack of trust.

The Technical Reality of Discounts in Shopify

Understanding how the "plumbing" works prevents messy checkouts and customer service headaches.

Discount Mechanics

• Percentage vs. Fixed: Percentages are relative; fixed amounts are absolute.
• Proportional Application: If a 10% discount is applied to a whole order, Shopify spreads that discount across every line item. This is important for your accounting and for processing returns on individual items.
• Inventory Tracking: In a bundle, inventory must be tracked for each individual component. Ensure your bundling solution syncs correctly so you don't oversell a specific variant.

Discount Stacking and Conflicts

One of the most common issues in Shopify is "Discount Stacking." This happens when a customer tries to use a coupon code on top of an automatic discount.

• The Default Rule: Traditionally, Shopify allowed only one discount per order.
• Modern Shopify: You can now allow discounts to combine. For example, a customer could use a "Percentage Off Products" discount AND a "Free Shipping" discount.
• The Danger: If you aren't careful, a customer could stack a 20% welcome code on top of a 20% automatic bundle discount, leaving you with a 40% total discount that might eat your entire profit margin.

Mobile UX Implications

Most Shopify traffic is mobile. A percentage discount badge that looks great on a 27-inch monitor might cover the product image on a 5-inch phone screen.

• Speed: Ensure your discount badges or bundle widgets are lightweight.
• Placement: Keep "Save X%" text near the "Add to Cart" button.
• Clarity: Use high-contrast colors (like red or green text on a white background) so the discount stands out immediately.

Measuring Success: What to Track

If you implement a way to show percentage discounts, how do you know it's actually working? Avoid looking only at total revenue. Instead, focus on these metrics:

• Average Order Value (AOV): If you are using percentage discounts for bundles or quantity breaks, your AOV should ideally trend upward.
• Conversion Rate: Does showing "20% OFF" increase the percentage of visitors who complete a purchase?
• Revenue Per Visitor (RPV): This is the ultimate metric. It combines conversion and AOV. Even if your conversion rate stays the same, an increase in AOV means a higher RPV.
• Attach Rate: For bundles, what percentage of customers are choosing the discounted bundle versus the single, full-priced item?
• Discount-to-Revenue Ratio: How much of your gross sales are being "given away" in discounts? If this number is too high, you may need to reconsider your base pricing or lower the discount percentage.

Scenario: If shoppers add one item and bounce, audit your cart friction and shipping clarity first. Then, test a simple "Buy 2 and save 10%" percentage discount. This specifically targets the "one and done" behavior and encourages a higher AOV.

When to Bring in Help

ECommerce is a multidisciplinary field. You don't have to be a coder, a lawyer, and an accountant all at once.

Theme and Performance Issues

If you try to add Liquid code to show percentage discounts and your site layout breaks, or if your page load speed drops significantly, do not panic.

• What to do: Revert to your duplicate theme.
• Who to call: A Shopify Expert or a dedicated Shopify developer can help you implement clean, performant code that doesn't drag down your SEO.

Legal and Compliance Guardrails

Many regions, particularly the EU (under the Omnibus Directive) and parts of the US (like California), have strict laws about "Reference Pricing."

• The Rule: You generally cannot show a "Compare-at price" or a percentage discount unless the product was actually sold at that higher price for a significant period recently.
• What to do: Review your pricing history.
• Who to call: Consult with a legal professional or a compliance specialist to ensure your "Save X%" claims are transparent and legal.

Payments and Security

If you notice unusual discounting patterns or a surge in orders using suspicious combinations of codes, it could be a sign of "coupon scraping" or fraud.

• What to do: Check your Shopify admin for discount usage limits.
• Who to call: The help center and your payment provider (e.g., Shopify Payments, PayPal) if you suspect fraudulent activity or chargeback risks.

Summary of Best Practices

Showing a percentage discount is more than just a technical step; it is a communication strategy. By following a structured approach, you can ensure that your discounts work for you, not against you.

• Foundation: Ensure your store is fast, mobile-friendly, and trustworthy.
• Psychology: Use the Rule of 100 to decide between percentages and fixed amounts.
• Clarity: Ensure the "Save X%" text is prominent and easy to read.
• Margins: Always calculate your net profit after the discount and shipping costs.
• Bundling: Use percentage discounts to reward customers who buy more, not just those who buy one.
• Testing: Change one variable at a time (e.g., change 10% to 15%) and measure the impact on RPV.

At the end of the day, a discount is a conversation between you and your customer. When you show a percentage discount with intention, you are telling the customer: "I value your business, and I'm willing to give you a better deal if you find more value in my store."

We encourage you to start simple. Use the native "Compare-at" price first. Once you see a baseline of success, explore the world of automated discounts and strategic bundling to truly scale your Shopify store’s potential.

FAQ

How do I show a percentage discount on the collection page?

Most Shopify themes require a small change to the card-product.liquid or product-grid-item.liquid file to show the percentage. You will need to use Liquid code to subtract the current price from the "Compare-at" price, divide by the "Compare-at" price, and multiply by 100. Many modern themes now include this as a toggle in the Theme Customizer under "Product Cards."

Can I show different percentage discounts for different customer groups?

Yes, but this typically requires Shopify Plus (via Scripts) or a specialized app. You can create "Customer Segments" in Shopify and then create a discount code or automatic discount that only applies to that specific segment (e.g., "First-time buyers" or "VIPs"). The percentage will then only be visible or applicable to those users when they are logged in.

Will showing a percentage discount slow down my site?

If you use native Shopify features like "Compare-at" prices or automatic discounts, there is zero impact on site speed. If you use a heavy, poorly-coded third-party app to display "Save X%" bubbles, it might add a few milliseconds to your load time. Always test your site speed on tools like Google PageSpeed Insights before and after adding new visual elements.

Does the percentage discount apply to shipping costs too?

By default, Shopify discounts (both fixed and percentage) apply only to the products in the cart, not the shipping. However, when creating a discount in the admin, you can choose "Free Shipping" as the discount type, or you can use a "Shipping Discount" if you are using Shopify's more advanced discount functions. Generally, merchants prefer to keep product discounts and shipping discounts separate to protect their margins.