How to Show Percentage Discount Saved in Shopify
Who this is for
Merchandising, marketing, and theme-adjacent ops teams who promised a visible savings percentage on product pages or in checkout.
Shopify has two different 'percentage saved' surfaces, and they are easy to mix up. Compare-at prices drive sale badges and 'you save X%' on product and collection pages through your theme. Discount codes do not write that badge; they appear as a discount line in cart and checkout. If a campaign promised a visible percentage saved, decide which surface you mean, configure it on purpose, and test both — otherwise customers see a sale price with no badge, or a badge that does not match the code they were emailed.
When to use this
- Marketing wants product cards to show 'save 20%' during a sale.
- A discount code applies in checkout but the product page still looks full price.
- Compare-at prices are set but the theme is not showing a savings badge.
- You need to explain to CX why a code does not change the product-page price.
- You are QA'ing BFCM creative against the live storefront.
Step-by-step workflow
- 1
Separate compare-at sales from discount codes
A compare-at price is catalog data: Shopify themes can calculate (compare-at − price) / compare-at as a percentage. A discount code is a checkout adjustment. Do not expect a code named SAVE20 to stamp 20% on the product page.
- 2
Set compare-at prices when you want a product-page percentage
For a merchandised sale, set compare-at above the current price on the products that should show savings. Confirm the theme's sale badge or savings text is enabled (Dawn and most OS 2.0 themes have a setting). Preview a collection card and a product page.
- 3
Use a discount code when the price should stay until checkout
If the offer is a code (email, influencer, recovery), leave the product price as-is. The percentage saved appears on the discount line in cart and checkout after the code is applied. Tell CX and creative that product pages will not show the code savings until the customer adds a code.
- 4
Test the mixed case: sale price plus a code
If compare-at sales and a code can stack, the product-page percentage and the checkout percentage will not match. Either block the combination in discount combination rules or document the stacking math in the campaign brief.
- 5
Capture screenshots for the launch packet
Store a product-page screenshot, a cart screenshot with the code applied, and the checkout discount line. If creative promised a specific 'You save 20%' treatment, the screenshots are the acceptance test.
Percentage-saved display QA
Offer: [NAME] Intended surface: [product page compare-at / checkout code / both] Product page: [ ] Compare-at set on target SKUs [ ] Theme sale badge or savings percent visible [ ] Percentage matches (compare-at − price) / compare-at Cart / checkout: [ ] Code applies as a discount line [ ] Amount matches the campaign math [ ] Stacking with compare-at sale is allowed or blocked on purpose Owner: [NAME] Date: ___________
Frequently asked questions
How do I show percentage discount saved in Shopify?
For product pages, set a compare-at price higher than the current price and enable your theme's sale or savings badge. For codes, the percentage appears as a discount line in cart and checkout after the customer applies the code. Those are two different systems.
Why doesn't my discount code show 'you save X%' on the product page?
Discount codes are not product prices. Shopify does not rewrite the product page when a code exists in Admin. Customers see code savings after they apply the code in cart or checkout, unless you add custom theme or app logic.
How do I calculate the percentage saved from compare-at price?
Percentage saved = (compare-at price − current price) / compare-at price. If compare-at is $50 and price is $40, savings are 20%. Themes typically round this for the badge. Keep compare-at honest; inflated compare-at prices create CX and advertising-compliance risk.
Can checkout show the percentage as well as the amount off?
Checkout shows the discount as a money amount on a discount line. Showing an extra '20% saved' label in checkout requires checkout customization (Shopify Plus extensibility or an app). For most stores, the product-page compare-at badge plus the checkout discount line is enough if both are QA'd.