--- title: "Order Summary: Provide a Summary of the User's Order" slug: "order-summary-provide-a-summary-of-the-users-order" description: "Learn how to fully customize the Checkout Element in ClickFunnels for a seamless, branded customer experience. Explore detailed options for styling, payment setup, shipping choices, button customization, and adding elements to enhance your checkout page design." tags: ["checkout", "editor"] updated: 2025-06-12T19:01:43Z published: 2025-06-12T19:01:43Z canonical: "support.myclickfunnels.com/order-summary-provide-a-summary-of-the-users-order" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Order Summary: Provide a Summary of the User's Order 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(182).png) --- ## Requirements - An active ClickFunnels account - A [checkout](/v1/docs/checkout-enable-users-to-complete-their-purchase) element added to the page > [!NOTE] > Note: > > When the Order Summary element is added to a page, it automatically hides the built-in order summary component within the **Checkout** element on page load. This allows the standalone Order Summary element to function as an independent, providing flexibility in placement while preserving full functionality. --- ## Adding an Order Summary Element in the Page Editor 1. Inside the page editor, add a **Section** where you want to place the element. 2. Add a **Row** within that section. 3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 4. From the **Checkout** category, select the **Order Summary** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-DAS20B9H.png) Once the **Order Summary** element is added, you can customize its appearance to fit your page design. > [!WARNING] > Important: > > - The Order Summary element is exclusively available for use on **Store** and **Funnel** pages in ClickFunnels, where products can be attached. It cannot be used in the Blog or Course Editor, as these do not support product integration. > - The Order Summary is a **dynamic** element. The taxes and shipping costs will be displayed dynamically based on the **configuration of your product**. If tax is not enabled for your product, the summary will not reflect any tax amounts. Similarly, if your product is not a physical item and fulfillment is not required, the summary will not reflect any shipping costs. Due to this dynamic functionality, there is no need to manually edit the Order Summary element to hide the display of shipping and tax values. --- ## Customizing the 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1731538243619.png) ### Top Margin ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1751891362357.png)The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748441653595.png) ### Styles The linked Checkout element controls the styles for the Order Summary, ensuring a cohesive look. You’ll need to edit the Checkout element's general settings to make style adjustments. Click on the **Edit** option to view the style properties of the Order Summary component from the general settings. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(261).png) ### Control Panel The **Control Panel** appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(47).png) - **ALL**: The container will be visible on all devices (desktop, tablet, and mobile). - **Desktop (**🖥️**) Icon**: The container will only be visible in desktop view. - **Mobile (**📱**) Icon**: The container will only be visible in mobile view. - **Eye** **(👁️)** **Icon**: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the **Layout** menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor. - **Code** **()** **Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling. - **Trash (**🗑️**) Icon**: Removes the container from the page editor entirely. ### Advanced Settings ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748535637061.png) To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings 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**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index. - [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay. - [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes. --- ## Related - [How to Create and Manage Products](/how-to-create-and-manage-products.md) - [Checkout: Enable Users to Complete their Purchase](/checkout-enable-users-to-complete-their-purchase.md) - [Adding a Checkout (Order Form) Page in a Funnel](/adding-a-checkout-order-form-page-in-a-funnel.md) - [Getting Started with Styles](/getting-started-with-styles.md)