The Order Confirmation element allows you to add an order confirmation to your website/funnel page. This is useful when taking orders on a previous website/funnel page and having a confirmation page be your next funnel step. When you add this element, you will notice a variety of customization options on the builder’s right-hand side.

General Settings #

Element Name #

In General Settings, you will first see the Element Name/Title. By default, this value will be the name of the element you are working on. You have the option to keep this element name the same or change the name. Changing the name of the element is useful when creating funnel pages with multiple elements, providing easy identification.

Background Color #

To modify the background color of your order confirmation element, select the color icon and choose a color from the available options. If your desired color is not present, you can also add custom colors by entering the color code in the provided space and clicking Add Color.

Typography Type #

The Typography Type dropdown will allow you to select the font you would like to use for your order confirmation element. You can choose from the headline or content font you set up in settings or select the custom font. If selecting a custom font, you will be able to click Default Font and choose from a variety of different font options.

Order Heading Mobile and Desktop Font Size #

You can adjust the mobile and desktop font sizes of your order heading by adjusting the size bars or typing a number into the given field.

Order Heading Mobile and Desktop Font Weight #

Adjust the font weight for the order heading separately for mobile and desktop to ensure readability and consistency in design.

Sub-Text Mobile and Desktop Font Size #

You can adjust the mobile and desktop font sizes of your sub-text simply by adjusting the size bars or typing a number into the given field.

Sub-Text Mobile and Desktop Font Weight #

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

Color Options #

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

Spacing Options #

To adjust your content, there are various spacing options available.

Padding Left, Right, Top, and Bottom: The Padding Left, Right, Top, and Bottom options use toggle bars to move the content either to the left, right, top, or bottom, depending on the selected toggle bar.

Advanced Settings #

Visibility #

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

Toggle Order Title #

You can decide to show a form field for the “Order title,” or you can hide it.

Order Title Text #

Here, you can edit the description in the Order title (Order Confirmation) form field.

Select Item Text #

You can edit the description of your Item from this field.

Select Price Text #

Customize the appearance of the price text to match your page’s design by adjusting the font style, size, and color.

Toggle Total #

You can decide to show a form field for the “Total” text, or you can hide it.

Total Text #

Here, you can edit the description in the Total form field.

Toggle Shipping Details #

You can decide to show a form field for “Shipping details,” or you can hide it.

Shipping Details Title #

Here, you can edit the description in the Shipping Details Title form field.

CSS Selector #

If you need to copy the Custom CSS, just click on the “Copy” icon on the right side of the reference code.

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

Frequently Asked Questions #

What is the Order Confirmation element used for? #

It adds an order confirmation to a website or funnel page, which is ideal as the next step after a customer places an order on a previous page so they can review their purchase details.

Can I customize which details appear on the confirmation? #

Yes. Using the Advanced Settings you can toggle the Order Title, Total, and Shipping Details on or off, and edit the text for each of those fields.

How do I change the colors of individual confirmation elements? #

Under Color Options you can independently set colors for the order heading, headline, product detail, total, and shipping address text.

Can I set different font sizes for mobile and desktop? #

Yes. Both the order heading and sub-text have separate font size and font weight controls for mobile and desktop views to keep your design readable on every device.

How do I adjust the spacing around the confirmation content? #

Use the Padding Left, Right, Top, and Bottom toggle bars under Spacing Options to position the content within the element.

Can I hide the confirmation on certain devices? #

Yes. The Visibility option lets you make the element visible on mobile, desktop, or both by clicking the corresponding icon.