How do I show the discounted price (crossed-out original price) on my Shopify product page?

What "show the discounted price" means

A shopper opens a $80 jacket. You run 25% off. You want the page to say $80 crossed out, then $60, before the shopper adds anything to the cart.

Shopify gives you two separate tools, and they behave differently:

• A discount (code or automatic) takes money off in the cart and at checkout. The product page still shows $80.
• A sale price (compare-at price) changes the price the page shows. The product itself now costs $60.

Everything below is checked against Shopify's help pages on November 7, 2026.

Route 1: set a compare-at price (no app)

A compare-at price is the original price Shopify shows crossed out next to the real price. You set it on the product, not in the Discounts area (Shopify's sale price help page). These are the desktop steps.

1. From your Shopify admin, go to Products and click the product you want to put on sale.
2. To edit one variant, find the Variants section and click the variants link, then pick the variant.
3. In the Price section, click Compare at.
4. In the Compare-at price field, enter the original price, for example 80.
5. In the Price field, enter the new price, for example 60. The compare-at value must be higher than the price, or no sale price shows.
6. Click Save, then open the product page and check the crossed-out price.

To change many products, use Shopify's bulk edit for variants or products. When the sale ends, clear Compare at and put the old value back in Price.

Every way to get the price on the page

• Compare-at price. Use it when you want the lower price to be the product's price on every shopper's page. You edit each product or variant, and you undo the edit when the sale ends. Checkout shows only the sale price, and a compare-at price is not a discount.
• Automatic discount plus words. Keep the discount, and announce it in a banner or announcement bar: "25% off applied in your cart". Nothing on the page changes, and the shopper sees the price drop in the cart and at checkout.
• A Shopify Partner. Shopify's own suggestion is to hire a Partner to build a custom solution.
• An app that calculates the price. Discount Genie does this inside blocks you place in your theme, covered next, including exactly what it does not do.

Show the calculated price with Discount Genie

Discount Genie is a Shopify discount app by Shopstack, built on Shopify Functions. It has theme blocks you place on the product page. As of November 7, 2026, the Discount Banner and Discount Badge blocks are included with Discount Genie's paid plans.

A block does the sale-price math itself and writes the result into its own text. It sits near your theme's price, so your theme's price stays as it is. Follow these steps.

1. Create the real discount first. In Shopify admin, open Discount Genie, click Discounts, then under Create discounts like a Genie click Product or Order (create your first discount). Under Value, choose Percentage or Fixed amount, and click Save. This discount is what takes the money off in the cart and at checkout.
2. Open the Discount Genie app once from Shopify admin so your store's block access refreshes.
3. Go to Online Store > Themes and click Customize on your theme.
4. Use the template selector at the top to open your default product template.
5. In the section where the block should appear, ideally just below the price, click Add block, open the Apps tab, and pick Discount Banner (product page) or Discount Badge (product, collection, search and home pages).
6. Under Discount type, choose Percentage off or Amount off. In Discount value, enter the same number as your discount, for example 25.
7. For a percentage with a cap, enter the same cap in Discount capped value. It only works with Percentage off.
8. In Heading, type your text with variables, for example Sale: {price.slashed} {discounted.price}. The variables are {price}, {price.slashed}, {discounted.price}, {savings.amount}, {min.price} and {max.price}.
9. Use Products included in offer, Collections included in offer, Start date and end date and Time zone to show the block only where and when the discount runs. For the Badge, Position can be Over the price or Under the price. Click Save.
10. Open a product page, switch variants, and compare the block with the cart (show your discount on your store).

Four limits decide whether this fits:

• You type the numbers. The block does not read your Discount Genie discount. It calculates from the type, value and cap you enter in the block. If you change the discount, change the block too.
• Your theme's price element is unchanged. The block adds its own price text beside it. If you need the theme's own price number to change, use a compare-at price.
• Percentage and fixed amount only. These two, with the optional cap, are what the Banner and Badge calculate. No block here calculates a Buy X Get Y or tiered order price.
• One discount per block. The block does not know about other discounts in the cart, so it shows only the discount you typed in.

Other blocks do the same math for their own content. The Volume Table and Volume Break Widget calculate a price for each quantity break, and Add-ons calculates a price for each add-on product. Volume tiers have their own steps in the quantity breaks guide.

Discount Genie's paid plans include theme blocks. New stores pay $0.99/mo for the first 3 months on any monthly paid plan, then Core $29.99, Growth $59.99, Pro $79.99 or Scale $99.99 a month. The plan offered depends on the store's Shopify plan.

Worked examples

The block takes the price of the variant the shopper selects, and applies the discount you typed in.

• 25% off an $80 jacket. 25% of $80 is $20. The block shows $80 crossed out, $60, and $20 savings.
• 25% off with a $15 cap. 25% of $80 is $20, which is over the cap, so the discount is $15. The block shows $65. On a $40 item, 25% is $10, under the cap, so it shows $30.
• $10 off (Amount off). An $80 item shows $70. A $6 item shows $0, because the price never goes below zero.
• Two variants. The jacket is $80 in size M and $120 in size L, at 25% off. The block shows $60 for M and $90 for L as the shopper switches.
• A price range. Variants from $80 to $120 at 25% off: {min.price} shows $60 and {max.price} shows $90, so a heading like From {min.price} reads "From $60".

Setups to copy

• Sitewide 25% automatic discount. An Order discount in Discount Genie with Automatic discount and Percentage 25. A Discount Banner block on the product template: type Percentage off, value 25, heading Now {discounted.price}, was {price.slashed}.
• $10 off one collection. A Product discount with Fixed amount 10 on the collection. A Discount Badge: Amount off, value 10, Collections included in offer set to that collection, Position Under the price.
• Clearance with no app. Compare-at price on each clearance product, then a collection of those products. Shoppers see both prices on product and collection pages, and checkout charges the sale price.

Test it before launch

1. Product page. Open a product in the offer. Check that the crossed-out price equals your normal price.
2. Variants. Switch to a variant with a different price. Check that the new price updates.
3. Cart. Add the product. The cart total should equal the price the block showed.
4. Outside the offer. Open a product that is not in the offer, and check the block is hidden.
5. Mobile. Check the block on a phone, where you set mobile alignment.

Compare-at price vs Discount Genie blocks

Related

• Show your discount on your store (Discount Genie docs)
• Discount banner block (Discount Genie docs)
• Quantity breaks and spend more, save more on Shopify
• Cap a Shopify discount at a maximum amount
• Combine and stack discounts on Shopify
• Black Friday 2026 discount checklist for Shopify
• Best Shopify discount apps (2026)