The Order Summary element in ClickFunnels is a versatile tool designed to display a breakdown of the customer’s order outside of the Checkout Element. While the Checkout Element includes an order summary component within its layout, the standalone Order Summary Element allows you to place the order details separately on the page. This feature is especially useful on store checkout pages where you may want to display a summary of products added to the cart in a distinct location. In this article, you'll learn how to add and configure the Order Summary element on a page..png "image(182).png")
Requirements
An active ClickFunnels account.
A “Checkout” element in the page.
Note:
The Order Summary element is compatible only with the (Smart) Checkout element and does not function with the legacy checkout element.
When the Order Summary element is added to a page, it automatically hides the built-in order summary component within the Checkout element upon page load. This allows the standalone Order Summary element to function as an independent, dynamic extension of the embedded summary, providing flexibility in placement while preserving full functionality.
Adding an Order Summary Element in the Page Editor
Inside the page editor, add a Section where you want to place the element.
Add a Row within that section.
Click the orange + Plus or Add New Element button inside the row to insert a new element.
From the Checkout category, select the Order Summary element.
.png "image(183).png")
Once the Order Summary element is added, you can customize its appearance to fit your page design.
Important:
The Order Summary Element is exclusively available for use on Store and Funnel pages in ClickFunnels, where products can be added and managed. It cannot be used in the Blog or Course Editor, as these do not support product integration.
Customizing Order Summary Element
When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the gear ⚙️ icon or click directly on the element to open its' settings panel.
Top Margin
The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.
Styles
The linked Checkout element controls the styles for the Order Summary, ensuring a cohesive look. To make style adjustments, you’ll need to edit the Checkout element's general settings. Click on the “Edit“ option to view the style properties of the Order Summary component from general settings..png "image(261).png")
Element Control Panel
The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:.png "image(47).png")
ALL: The element will be visible on all devices (desktop, tablet, and mobile).
Desktop Icon: The element will only be visible on the desktop view.
Mobile Icon: The element will only be visible on mobile view.
Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.
Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.
Trash Icon: Removes the element from the page editor entirely.
Advanced Settings
To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:
Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.
Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.
Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.