The Order Summary shows the buyer what they’re paying for: the items, quantities and total, updating live as they change their selection, pick variants or tick an order bump. Use it on the checkout page, and again on the thank you page as the order confirmation.
New to the editor? Start with the Page Builder overview.
Add the element
-
Open the step and click the container or row cell that should hold it
-
Click the Order Summary widget in the elements panel
Its contents are generated from the order, so the internal structure is fixed, you style it (fonts, spacing, borders, backgrounds) and configure the options below.
Options
-
Show product images: thumbnails next to each line, worth it when the products are visual
-
Allow discount codes: adds a code field inside the summary. This is where buyers redeem coupons, so if you run discounts, this is the switch
-
Show/hide header and show/hide total: trim the summary down when it sits inside an already-labeled section
-
Collapsible and is open by default: let buyers fold the summary away. On mobile, collapsible and closed by default saves a full screen of scrolling before the payment form
On the thank you page
Drop the same element on the thank you page and it renders the completed order, the confirmation buyers screenshot and refer back to. Every option above works there too, except discount codes, the order is already paid.
Preview and test
Preview the checkout, change quantities, pick variants and tick the order bump, the summary should track every change. If you enabled discount codes, apply one in a test payment and confirm the total updates before charging.
Keep learning
-
Page Builder overview: the map of the whole editor and every element
-
Product Lists: what feeds the summary’s line items
-
Order Bump: the add-on that appears in the summary when ticked
-
Payment Form: the element that charges the summarized total
-
Want a full checkout already assembled? Clone a funnel from Templates
Questions? Reply below or ask in Ask the community.
Missing an editor feature? Suggest it in Feature requests — the most-voted requests shape the roadmap.