How do I show discounted prices on product and collection pages?

Updated Sep 10, 20263 min read

Turn on Live pricing. Shopify discounts only change the price at the cart and checkout, so a shopper browsing your store sees the full price. Live pricing rewrites the price shown on your product, collection and home pages in the shopper's browser, so they see the campaign price with the original struck through — without touching your product's Compare-at price or your theme code.

What has to be true

Live pricing needs all four of these:

Live storefront prices is enabled in Hype → Settings.
A live pricing schema exists for your theme. This is the list of CSS selectors that tells Hype which element on each page holds the price. Hype can generate it with Auto set-up with AI in Settings, or it can be written by hand in Settings → Live pricing schema.
Live pricing is enabled on the campaign itself — open the campaign's menu on the Campaigns page and choose Enable live pricing.
The campaign is Active.

Which campaigns can use it

Live pricing is offered on three discount types only: Multi products discount, Order discount and Volume discount. It is not offered on Gift with purchase, Cart goals or Multiple discounts campaigns, because there is no single per-product price to show.

Only one Automatic campaign can have live pricing on at a time. Turning it on for a second automatic campaign turns it off for the first.

Who sees the discounted price

Public campaign — every visitor sees the rewritten price.
Link campaign — only visitors who arrived through your campaign link. The link is remembered for the rest of the session and across pages, so they keep seeing it as they browse.
Public campaign with a discount code — nobody sees it while browsing. The storefront has no way to know the shopper has your code until they enter it at checkout, so no price is rewritten and no campaign blocks render. See Should I use a code, a link, or an automatic discount?.

Collection pages

Product and collection pages are configured separately in the schema: a product-page entry for the product page and a product-card entry for the cards in a collection or home-page grid. If prices change on product pages but not on collection pages, the product-card entry is missing or its selectors do not match your theme. Contact support with your store URL and we will correct the schema.

Two things that break it

Changing theme. The schema is a set of CSS selectors for one theme. A new theme, or a big edit to the current one, can move the price element and stop the rewrite. Hype warns in Settings when the schema was generated against a different theme than the one selected.
Uninstalling the app. Uninstalling deletes your store's data, including the schema. If you are pausing for a season, cancel the subscription from the Plan page instead of uninstalling — see Uninstalling Hype.

Was this article helpful?

Still stuck?

Ask a follow-up and we'll see it came from “How do I show discounted prices on product and collection pages?”.

Opens chat with your question and a link to this article.