The Order Confirmation element lets you add an order confirmation to your website or funnel page. This is useful when you're taking orders on a previous page and want a confirmation page as the next funnel step. When you add this element, you'll see a range of customisation options on the right-hand side of the builder.

General Settings

Element Name

In General Settings, you'll first see the Element Name/Title. By default, this will be the name of the element you're working on. You can keep it as-is or change it. Renaming the element is particularly handy when building funnel pages with multiple elements, as it makes identification much easier.

Background Colour

To change the background colour of your order confirmation element, select the colour icon and pick a colour from the available options. If the colour you want isn't there, you can add a custom one by entering the colour code in the field provided and clicking Add Colour.

Typography Type

The Typography Type dropdown lets you choose the font for your order confirmation element. You can use the headline or content font you've set up in settings, or select a custom font. If you go with a custom font, click Default Font to browse the available options.

Order Heading Mobile and Desktop Font Size

Adjust the font size of your order heading for mobile and desktop separately, either by dragging the size bars or typing a value directly into the field.

Order Heading Mobile and Desktop Font Weight

Adjust the font weight for the order heading independently for mobile and desktop to keep your design consistent and readable across devices.

Sub-Text Mobile and Desktop Font Size

Adjust the font size of your sub-text for mobile and desktop by dragging the size bars or typing a value into the field.

Sub-Text Mobile and Desktop Font Weight

Modify the font weight for the sub-text to give the right emphasis to important details. This can be adjusted independently for mobile and desktop views.

Colour Options

  • Order Heading Text Colour: You can only edit the Order heading text colour here
  • Headline Text Colour: You can only edit the Headline text colour here
  • Product Detail Text Colour: You can only edit the colour of the Product detail (Dynamic Item) here.
  • Total Text Colour: You can only edit the Total text colour here
  • Shipping Address Colour: If you have a shipping address on this page, you can only edit the colour here.

Spacing Options

There are various spacing options available to adjust your content layout.

  • Padding Left, Right, Top, and Bottom: These options use toggle bars to move the content left, right, up, or down depending on which bar you select.

Advanced Settings

Visibility

Choose whether this element appears on mobile devices only, desktop only, or both, by clicking the relevant icon to highlight it.

Toggle Order Title

Choose whether to show or hide the form field for the "Order title."

Order Title Text

Edit the description shown in the Order title (Order Confirmation) form field here.

Select Item Text

Edit the description of your Item from this field.

Select Price Text

Customise the appearance of the price text to match your page's design by adjusting the font style, size, and colour.

Toggle Total

Choose whether to show or hide the form field for the "Total" text.

Total Text

Edit the description shown in the Total form field here.

Toggle Shipping Details

Choose whether to show or hide a form field for "Shipping details."

Shipping Details Title

Edit the description shown in the Shipping Details Title form field here.

CSS Selector

To copy the Custom CSS, click the "Copy" icon on the right-hand side of the reference code.

Customising the Order Confirmation element gives you full control over how purchase details are displayed. With options to adjust fonts, colours, and layout, you can create a confirmation page that fits your brand while keeping things clear and easy for customers to review their orders.