Automation
Designing the Offer Page
The blocks you can add, the text variables each offer fills in, why the buttons are fixed, and the thank-you screen.
The offer page is what your customer sees after paying. You design it once, in Settings → Post-purchase, and the layout applies to every offer. Each offer fills it with its own products, discount and texts.
The blocks
Click Add widget to add a block, drag blocks into order in the sidebar, and click a block to edit it. The preview updates as you go.
| Block | What you can set |
|---|---|
| Banner | A Title, Description and Subtext for each discount type (Percentage, Fixed amount, Buy X Get Y, Free shipping), so each discount type gets its own wording. Shopify requires the banner to name the product and the discount: if the Title and Description together don’t include {{offer_product}} and {{offer_value}} (for Free shipping, the words “free shipping”), customers see the default description instead. Show “Offer 1 of N” progress adds the step counter. |
| Text | Text content, and a Level: large, medium or small heading. An empty Text block isn’t shown. |
| Product card | Headline, Display layout (List or Grid), Show SAVE badge, Show “Picked for you” line and Show product description. |
| Status banner | A message with a Status color (info, success, warning or critical) and an optional icon. If its Text contains {{offer_duration}}, it becomes a countdown, and the offer closes as declined when it reaches zero. On an offer without a countdown timer, that banner isn’t shown. An empty Status banner isn’t shown either. |
| Image | An Image URL: an https link to a .jpg, .png, .gif, .webp, .avif or .svg file, for example from Content → Files in your Shopify admin. The editor warns you about any other link, and customers don’t see it. |
| Buttons | The Charge note under the buttons. Clear it to show no note. |
| Thank-you screen | Headline, Subtext, Show “Added to your order” banner and the Button label. |
The default layout has a banner, the product card, the buttons and the thank-you screen.
Shopify requires every offer page to have one banner at the top, the products, and one pair of Accept and Decline buttons, so the page always keeps them.
- One banner, at the top. The editor keeps it there: it can’t be deleted, moved lower or added twice.
- The products. The last Product card can’t be deleted. You can add a second one.
- One pair of buttons. The Buttons block can’t be deleted or added twice.
When an action would break one of these rules, the editor refuses it and tells you why. A layout saved before these rules is corrected when you open it.
The preview shows the page as customers see it. An empty block reads “Empty Text block — not shown to customers” or “Empty Status banner — not shown to customers”, an image link the checkout won’t show reads “This image link won’t show at checkout”, and prices are in your store’s currency.
Prices and the Pay button are shown in the currency the customer paid in.
Text variables
Use these in the Banner, Text and Status banner blocks. Each offer fills in its own values:
| Variable | Becomes |
|---|---|
{{offer_value}} | The discount value, for example 20. On an offer with no discount, a text using it isn’t shown (a Banner text goes back to its default). |
{{offer_type}} | The discount type: Percentage, Fixed amount, Buy X Get Y or Free shipping |
{{offer_product}} | The name of the product being offered, or the gift for Buy X Get Y |
{{offer_getQuantity}} | How many gifts a Buy X Get Y offer gives, 1 if not set |
{{offer_minQuantity}} | The minimum items in the order, from the offer’s quantity rule, or 1 if the offer has none |
{{offer_duration}} | The live countdown, from the offer’s Duration (minutes) |
Example: Get {{offer_value}}% off {{offer_product}} reads “Get 20% off The Complete Snowboard”.
A text that uses {{offer_duration}} is shown only when the offer has a countdown timer, so customers never see a deadline that isn’t real. Without a timer, the Text block and the Status banner are hidden, a Banner subtext is left out, and a Banner title or description goes back to its default text. An offer with a countdown timer always shows one clock: if none of your texts uses {{offer_duration}}, the banner adds “Offer ends in” with the time left.
The buttons
The buttons read Add to my order · Pay $X and No thanks, complete my order, with the exact total. Before the customer picks a product, the first one reads Select a product first; while Shopify recalculates the total, it reads Calculating total… and can’t be pressed. Shopify’s guidelines ask for a clear “pay now” label with the price, so these texts are fixed. You can change the Charge note under them. It reads “Charged to the card used for this order.” by default.
The thank-you screen
After the last offer the customer sees a short thank-you screen before their Order status page. The defaults are “Thank you! Your order is complete.” and “A confirmation email is on its way.” With Show “Added to your order” banner on, it also confirms what the customer added and their new order total.
Saving
Click Save. The new layout shows in the next checkout. Your saved layout is never replaced by the default: if the editor can’t load it, Save stays disabled until it can.
Next: Analytics →