Offer page design

By default the offer uses the extension's built-in page, which works out of the box. It opens with the order-confirmation strip: a green tick, "Order complete" and a link to the order confirmation page. The customer first sees that their order has been placed. The link only opens the order confirmation page; it never accepts or declines the offer. The header shows only the shop logo.

The offer follows below: the context pill above the headline, the headline with its subline, then the offer area built around the product image. The compact context card ("Your order includes") shows the trigger product for every campaign type. Together with the plus sign and the offer card, it forms a visual bundle. When the context card is hidden in a Shopping Experiences layout, the offer card stands alone at the same width and minimum height. The offer card shows the product image, the price (with discount row and savings when discounted), tax note and benefit list, the accept button with the price on it and the decline button; the reassurance strip sits below. On mobile the actions stay pinned to the bottom of the screen. When the offer product or the trigger product is a variant, its option values (e.g. Colour: Red | Size: XL) appear on the corresponding card under the product name. Product images fit the available space, and long product names wrap onto additional lines. Rounded corners follow your theme's settings. You do not need to design anything to go live.

The built-in offer page: order-confirmation strip, context label, headline, context card, offer card with image gallery, and reassurance strip.

On mobile the actions stay pinned to the bottom of the screen.

The built-in page is not a Shopping Experience layout and cannot be edited in the Shopping Experiences editor. If you want control over the look, assign the extension's Post-purchase offer layout from Shopping Experiences to the campaign on its Offer tab, under Offer page layout.

Product images and gallery

When the offered product has several images, the offer card shows all product images with thumbnails, swipe gestures and a zoom view. On phones the product photos are larger, and the offer card stays the same height while customers browse the gallery.

Built-in page vs. Shopping Experience layouts

• Default offer page: The built-in recommended add-on offer. Not editable in Shopping Experiences.
• Post-purchase offer: The same offer, rendered through a Shopping Experience. Editable in Shopping Experiences.

Designing a custom layout

1. In Content → Shopping Experiences, create a layout of type Post-purchase offer or use the layout that ships with the extension.
2. Add the Post-purchase offer element somewhere on it. That element renders the live product, price and the buttons for accepting and declining the offer for the current order. Everything else (text, images, headings) is yours to arrange around it.
3. Open the campaign and choose this layout on the Offer tab, under Offer page layout.

The "Post-purchase offer" element options

Select the element in the editor to configure how it renders. The options are grouped by the page's sections:

• Heading – Show context pill: Default: On.
• Heading – Show subline: Default: Off.
• Context card – Show context card: The left-hand card showing the trigger product for this offer, for every campaign type. Hiding it also hides the plus sign, and the offer card stands alone. Default: On.
• Offer card – Show recommendation badge: Default: Off.
• Offer card – Show short benefit: Default: Off.
• Offer card – Show discount row: Default: On.
• Offer card – Savings display:Amount and percentage or Amount only. Default: Amount and percentage.
• Offer card – Show tax note: Default: On.
• Offer card – Show benefit checklist: Default: On.
• Below the offer – Show reassurance strip: Default: On.

The recommendation badge ("Fits your order"), the subline, and the short benefit are disabled by default. The built-in page has no switches for them; in a Shopping Experiences layout, the Show recommendation badge, Show subline, and Show short benefit options bring them back. Existing layouts keep their saved settings.

Good to know

• Assign it on the campaign. A Post-purchase offer layout is connected to the offer by choosing it on the campaign's Offer tab, under Offer page layout. Its own Layout assignment dialog in Shopping Experiences does not apply (it shows a note saying so) – categories and shop pages are not how an offer layout is used.
• Product blocks show the offer product. Blocks such as cross-selling, buy box, product description and reviews, or a mapped product image render the exact product issued with the offer, exactly as on that product's own detail page.
• Design tip: prefer cross-selling or a hand-picked product slider over a category Product listing block – an offer page has no category for a listing to show.
• The trigger product is shown for every campaign type. For a product trigger with a fixed product or Dynamic Product Group source, it is the ordered variant of the trigger product. For category, manufacturer and any-order campaigns, it is the highest-value matching product line. For cross-selling, it is the product whose cross-selling supplied the offer, even if that differs from the campaign's configured trigger product. The same product supplies %product% in the Storefront text fields. Turn off Show context card in an assigned Shopping Experiences layout to show the offer card on its own. Older offers issued before this update can also lack a trigger-product card.
• Block margins in the layout editor. The extension controls the offer content's top and side spacing, so the content aligns with the same page edges as every other shop page. Of the block's margin settings in the layout editor, only the bottom margin applies.