--- title: "Customizing the Store Cart Component" slug: "customizing-the-store-cart-component" description: "Learn how the ClickFunnels Cart Component enhances shopping with a dynamic popup, allowing easy item management and a seamless checkout experience." tags: ["theme", "store"] updated: 2025-07-22T18:16:53Z published: 2025-07-22T18:16:53Z canonical: "support.myclickfunnels.com/customizing-the-store-cart-component" --- > ## 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. # Customizing the Store Cart Component The **Cart Component** in ClickFunnels is a built-in feature that displays the shopping cart when customers click the **Cart Icon** on any Store page. It works like a popup, sliding in from the right side to show cart contents, allow quantity adjustments, and provide a direct path to checkout. In this article, you will learn how the Cart Component functions and interacts with the Cart Icon element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-4WCDQHZA.png) --- ## Requirements 1. An active ClickFunnels account 2. [The Store app added to your workspace](/v1/docs/adding-apps-to-your-clickfunnels-workspace) 3. [The Cart Icon element added to the navigation](/v1/docs/cart-icon-allow-customers-to-track-and-open-the-shopping-cart) --- ## How the Cart Component Works The **Cart** component is an integrated feature of the ClickFunnels Store, not a standalone page. It behaves like a **popup** that slides in from the right side and appears only when triggered by the [**Cart Icon**](/v1/docs/cart-icon-allow-customers-to-track-and-open-the-shopping-cart). You can also view and customize the Cart modal, including colors, fonts, and certain styling options. The **Cart** component and **Cart Icon** element work together to provide a seamless shopping experience: 1. **Adding Items to the Cart** - Customers add products to their cart using the [**Add To Cart**](/v1/docs/add-to-cart-allow-customers-to-add-products-to-shopping-cart) button. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-S2AQLDKR.png) - The **Cart Icon updates dynamically** to reflect the number of items in the cart. 2. **Opening the Cart** - Clicking the **Cart Icon** triggers the **Cart Component**, which slides in from the right. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-ZFY4GDNW.png) - The cart displays **product details, prices, quantity controls,** and a **checkout** option. 3. **Managing Cart Contents** - Customers can increase or decrease quantities or remove items directly from the cart. - A **“Continue Shopping”** button allows customers to return to browsing. 4. **Proceeding to Checkout** - Clicking **“Checkout”** takes customers to the Store [**Checkout Page**](/v1/docs/customizing-the-store-checkout-theme-page) to complete their purchase. - After completing an order, the cart resets to an empty state. --- ## Accessing the Cart Component 1. From your workspace, navigate to the **Store** app in the left-hand menu. 2. Select **Overview**. 3. Click **Design Store** in the top-right corner. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-RMPYY893.png) 4. Under the **Site Theme Pages**, Expand **Store Front**. 5. Select the **Cart** menu to preview the Cart modal. 6. Click the ⚙️ **Edit Cart Settings** option or anywhere in the cart modal to access the modal settings. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-YQQLZYY2.png) 7. Adjust the settings and customize the design of the Cart modal. --- ## Customizing the Cart Component When you click the **Cart** component in the Theme, the Cart Modal will be displayed. Click the **⚙️ Edit Cart Settings** option or tap anywhere within the modal preview to open its settings panel. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-B2KQ08MA.png) ### Cart Preview The **Preview** setting allows you to toggle between two cart states: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-9BSM3QT0.png) - **Normal Cart Preview**: Displays how the cart looks when items are added. - **Empty Cart Preview**: Displays how the cart appears when no products have been added. ### Paint ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-IICKBXS6.png) Paint colors are predefined color sets applied to the Cart container. These color sets define the styling for various elements within the container, including text, buttons, icons, etc. By selecting a paint color in the container settings, all nested elements within the container will automatically inherit the corresponding colors from the style guide. This functionality ensures a consistent design across the container. **Edit Style Colors:** Click "Edit Style Colors" to access the style guide and customize the paint's color palette. Learn more about customizing Paint colors in the article [How to Customize Style Colors](/v1/docs/how-to-customize-style-colors). ### Background and Typography ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-H1TARQTH.png) - **Backdrop Color**: Adjust the background color that appears behind the cart. - **Container Color**: Change the background color of the cart’s container. - **Font Family**: Choose a font style for the text inside the cart. - **Divider Height & Color**: Modify the thickness and color of dividers between cart sections. ### Header ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-9UJ6TFPX.png) - **Text**: Customize the heading of the cart (default is "MY CART"). - **Text Size & Mobile Size**: Adjust font size for desktop and mobile views. - **Text Color**: Change the color of the cart title. - **Close Button Color**: Customize the color of the close button (X icon). ### Text ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-MLYL6AFF.png) - **Name Size & Color**: Modify product name font size and color. - **Price Size & Color**: Adjust price font size and color. - **Remove Text & Color**: Customize the appearance of the "Remove" button. - **Display Price Subtotals**: Toggle whether to show item subtotals. - **Subtotal Color**: Change the color of the subtotal text. ### Button ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-OW2BB8JR.png) - **Button Size**: Select a size for the cart buttons. - **All Corners & Separate Edges**: Adjust the button’s corner styling. - **Continue Shopping Text & Color**: Customize the label and color of the "Continue Shopping" button. - **Checkout Button Text, Background Color, and Text Color**: Modify the appearance of the checkout button. ### Quantity ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-HKQ5TNWK.png) - **Color**: Change the color of the quantity input box. - **All Corners & Separate Edges**: Adjust the rounding and border styles of the quantity selector. ## Related - [Add to Cart: Allow Customers to Add Products to Shopping Cart](/add-to-cart-allow-customers-to-add-products-to-shopping-cart.md) - [Cart Icon: Allow Customers to Track and Open the Shopping Cart](/cart-icon-allow-customers-to-track-and-open-the-shopping-cart.md) - [Creating and Managing a Theme in ClickFunnels](/creating-and-managing-a-theme-in-clickfunnels.md) - [How to Create a Store Upsell in the Store App](/how-to-create-a-store-upsell-in-the-store-app.md) - [How to Use Add to Cart Functionality in Your Store](/how-to-use-add-to-cart-functionality-in-your-store.md) - [Customizing the Store Checkout Theme Page](/customizing-the-store-checkout-theme-page.md)