How do I customise the post-purchase page?
What you can change in the post-purchase editor, from widgets and text to buttons, discounts and the preview.
Each product in a post-purchase funnel has its own page design. To open the editor, go to the funnel's post-purchase step and click Edit on the product. The editor opens full screen as Customize Post-Purchase Offers, with a sidebar on the left and a live preview on the right.
Click Save to keep your changes or Cancel to leave without saving.
Previewing on desktop and mobile
Use the desktop and mobile buttons in the top bar to switch the preview between a desktop and a mobile width.
Widgets
The sidebar lists the page's Current Widgets from top to bottom. You can:
- drag a widget by its handle to reorder it;
- use Hide widget / Show widget to take it off the page without deleting it;
- use Remove widget or Duplicate widget.
The Upsell Product widget (the product card with the buttons) can't be removed if it's the only one.
Under Add Widgets you can add:
| Widget | What you can set |
|---|---|
| Text | Heading and Body |
| Timer | Heading, Body, Minutes and Background Color |
| Image | The image, Alt Text, Width, Height, Alignment, Top Padding and Bottom Padding |
| Text & Image | Text, an image, Image Alt Text, Image Position, Image Width Value and Unit, Content Alignment, Top Padding and Bottom Padding |
Placeholders in text
In Text and Text & Image headings you can use:
{first-name}: the buyer's first name, or "Valued Customer" if it isn't known;{discount}: the offer's saving. While the price is still calculating, a phrase like "for{discount}OFF!" is removed rather than shown half-empty.
The timer
The timer counts down from the number of Minutes you set and stops at 00:00. Nothing expires when it reaches zero, and the buyer can still accept the offer.
Text styling limits
Text is styled with the editor's toolbar, but the post-purchase page only supports a few styles. Font sizes map to six sizes between 9px and 24px. Only four text colours carry over: black, amber (#b88700), green (#0ca127) and red (#e22222). Any other colour shows in the default text colour.
The Upsell Product widget
The product card has five sections.
Product Selection
- Purchase Option: Sell as both subscription and onetime, Sell as subscription only or Sell as onetime only. This is locked when the product has only one way to buy it.
- Replace upsell with item in original order: see Replacing a product with an upsell.
Discount
- Discount Name, Discount Value and Discount Type (% Off or Fixed).
- Apply to subscriptions. This only discounts the first subscription order, not the renewals.
Buttons
- Purchase Button Text and its Style (Link or Button).
- Decline Button Text and its Style.
- Hide price in accept button, which removes the "· $22.00" amount from the accept button.
Product Details
- Product Title, Offer Description and Price. In Price,
{product_compare_at_price}shows the original price struck through, and only when it's higher than the offer price.{product_price}shows the offer price. - Show reviews, with Use custom reviews to set Number of stars and Number of reviews yourself. Reviews otherwise come from Loox. See What the buyer sees.
- Show quantity selector, with a Preset quantity as the starting value. The buyer can then change the quantity with − and + buttons.
The page never offers the exact variant the buyer just bought, whatever Hide if in original order is set to.
Product Image
Product image slider only changes the editor preview. On the live page, thumbnails always show under the main image. See Product images.
What you can't change
- The order of the money lines (Subtotal, Shipping, Taxes, Total) and when they appear. These follow the rules in What the buyer sees.
- The page's fonts and base colours, which come from your Shopify checkout branding.