Skip to content
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterGo to CF Classic Help Center

Order Summary: Provide a Summary of the User's Order

Published: Updated:

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.

Requirements

Section titled “Requirements”

  • An active ClickFunnels account

  • A checkout element added to the page

Adding an Order Summary Element in the Page Editor

Section titled “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.

Once the Order Summary element is added, you can customize its appearance to fit your page design.

Customizing the Order Summary Element

Section titled “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.

Top Margin

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.

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.

  • Link With: This option appears when the page has more than one Checkout element. Choose which Checkout element the Order Summary is linked to.

  • Mobile Behavior: Available on the store Checkout page. Choose None, or Stick to bottom to keep the order summary at the bottom of the screen on mobile devices.

Summary Texts

The labels the Order Summary displays, such as Title, Taxes, Discount, Shipping, Subtotal, Total, and the coupon field text (Enter Coupon and Apply), come from the linked Checkout element’s Text Settings › Summary Texts. An Order Summary is linked to the page’s Checkout automatically, and while it’s linked, edits made here are replaced by the Checkout’s labels. To change these labels, edit them in the Checkout element.

Errors Texts

Blank Discount Code: Edit the error message customers see when they apply an empty discount code. The default is “Discount code is blank”.

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:
Settings panel with the Code (</>) icon in the header and the Visibility, All, Desktop, Mobile, eye and trash icons in the bottom bar

  • 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 (</>): Opens the code editor for this container, where you can add custom CSS to change its styling. The editor shows the container’s CSS ID Selector so your CSS targets only this container. Open it from the code icon at the top of the settings panel, or hover over the container on the page and click Code in its toolbar.

  • Trash (🗑️**) Icon**: Removes the container from the page editor entirely.

Advanced Settings

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: