--- title: "How to Use Add to Cart Functionality in Your Store" slug: "how-to-use-add-to-cart-functionality-in-your-store" updated: 2025-07-22T18:20:27Z published: 2025-07-22T18:20:27Z canonical: "support.myclickfunnels.com/how-to-use-add-to-cart-functionality-in-your-store" --- > ## 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. # How to Use Add to Cart Functionality in Your Store The **Add to Cart** functionality in ClickFunnels allows customers to add multiple products to a cart before proceeding to checkout. This feature enhances the shopping experience by enabling users to review their cart, update quantities, and complete their purchase in a simple process. In this article, you’ll learn how to set up and customize the Add to Cart feature in your ClickFunnels Store. [Embedded content](https://www.youtube-nocookie.com/embed/NzSJ452znYU?rel=0) --- ## Requirements - An active ClickFunnels account - The [Store](/v1/docs/adding-apps-to-your-clickfunnels-workspace) app added to your workspace - At least one created [product](/v1/docs/products-how-to-create-and-manage-products) - [Payments AI Configured Account](/v1/docs/how-to-use-payments-ai-within-clickfunnels) --- ## Overview of the Add to Cart Feature The Add to Cart functionality allows your customers to add multiple products to their cart as they shop, giving them the flexibility to browse and manage their items before completing their purchase. This feature enhances the shopping experience by simplifying the checkout process and providing customization options to match your store’s design. **Key Benefits of the Add to Cart Feature**: 1. Improved Shopping Flow: Customers can browse your store freely, adding products to their cart without being forced to check out immediately. 2. Increased Order Value: By allowing customers to review and add multiple items before checking out, the cart can encourage larger purchases. 3. Simplified Checkout: A single-step checkout process reduces friction and helps customers complete their orders faster. 4. More Control for Customers: Customers can easily manage their cart, adjusting quantities or removing items before finalizing their purchase, which leads to a better user experience and higher satisfaction. --- ## Step 1: Add the Add to Cart Element to Product Pages To allow customers to add products to their cart, you’ll need to add the **Add to Cart** element to your product pages. > [!WARNING] > IMPORTANT > > The Add to Cart element works exclusively in the **Store** pages. Make sure you’re editing a product page when adding this element. 1. Navigate to the **Store** app from your ClickFunnels dashboard. 2. Go to the **Overview** section and click **Design Store** to open the theme editor. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-ULRCKPBU.png) 3. In the left-hand panel, select **Product** from the list of site theme pages. 4. To add the element, click the orange **Add Element** button to open the Elements menu. 5. From the Elements menu, scroll down to the **Checkout** section and click **Add to Cart** to add it to the product page. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/x6nag6g3lQF3PPvDFLuztyoG_Bfu5XvNZw.png) 6. Customize the **element’s appearance**, such as its text (e.g., “Add to Cart”) and style (color, size, alignment), to match your store’s design. To learn more about the Add to Cart element, refer to [Add to Cart: Allow Customers to Add Products to Shopping Cart](/v1/docs/add-to-cart-allow-customers-to-add-products-to-shopping-cart). 7. **Save** your changes. --- ## Step 2: Add the Cart Icon to Your Store To ensure customers can easily access their cart from anywhere in the store, you’ll need to add the **Cart Icon** to your pages. > [!WARNING] > Important > > The Cart Icon works only on the **Store** pages and **Home page.** Ensure you’re adding this element to one of these page types. 1. From the Store Theme Editor, select the **page** where you’d like to add the Cart Icon (e.g., Store front or Collection page). ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-GBTCPS2E.png) 2. Click the orange **Add Element** button. 3. From the elements menu, choose **Cart Icon**. 4. Place it in the desired location (e.g., header). 5. Customize the **icon’s appearance**, adjusting the size, style, and alignment to match your store’s branding. Learn more about the element settings in [Cart Icon: Allow Customers to Track and Open the Shopping Cart](/v1/docs/cart-icon-allow-customers-to-track-and-open-the-shopping-cart). 6. **Save** your changes. --- ## Step 3: Customize the Cart Review Modal The Cart Review Modal allows customers to view and manage the items in their cart. 1. From the **Store Theme Editor**, select the **Cart** page. 2. Click **Edit Cart Settings** to open the customization options. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-SGZFBQTK.png) 3. At the top, choose between **Normal Cart Preview** or **Empty Cart Preview**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/TSsSRKBi5BBdhjWm43_iMjus0Tt2v27Z-Q.png) 4. Customize the following settings as needed: - **Backdrop Color and Container Color**: Adjust the modal background and container colors. - **Text** and **Font Settings**: Customize the header, product names, and button text sizes and colors. - **Buttons**: Change size, background color, and text color for **Checkout** and **Continue Shopping** buttons. - **Quantity Input**: Adjust color and corner settings for the quantity selector. - **Display Price Subtotals**: Toggle the switch if you want to show subtotals in the cart. 5. After making changes, click **Save** to apply them. --- ## Step 4: Set Up the Checkout Page After customers click the Cart Icon, they will first see the Cart Review Modal, where they can review their items, adjust quantities, and proceed to **checkout**. To customize the Checkout Page, follow these steps: 1. In the **Store Theme Editor**, select the **Checkout** page from the Site Theme Pages list. 2. Ensure the following elements are included: - **Order Summary**: Displays the products, subtotal, taxes, and order details. - **Checkout**: Allows customers to enter their shipping and payment details. > [!WARNING] > IMPORTANT > > The **Checkout Legacy** element is not compatible with the current cart system. To avoid issues with checkout functionality, use the updated **Checkout** element instead. 3. Customize the layout and design to match your store’s branding. 4. Click **Save** to apply your changes. > [!TIP] > **Helpful Resources:** > > 1. [Customizing the Store Checkout Theme Page](/v1/docs/customizing-the-store-checkout-theme-page) > 2. [Order Summary: Provide a Summary of the User's Order](/v1/docs/order-summary-provide-a-summary-of-the-users-order) > 3. [Checkout: Enable Users to Complete their Purchase](/v1/docs/checkout-enable-users-to-complete-their-purchase) --- ## Step 5: Test the Cart and Checkout Process Before making your store live, it’s important to test the cart and checkout process to ensure everything works smoothly. 1. From the **Store Overview** dashboard, cick the gear ⚙️ icon next to your store name to open the settings. 2. Scroll to the Visibility section and convert your store to **Draft**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/Ck0fEvUm_K-DDjb7o6C3v0ArG5c9GLb1RQ.png) 3. Open your store in an incognito window and add the parameter `?preview=true` to the store URL to test as a customer. 4. Add a product to the cart by clicking the **Add to Cart** button. 5. Click the **Cart** icon to review the products in the cart. Test: - Adding and removing products. - Adjusting product quantities. - Ensuring the subtotal is calculated correctly. 6. Proceed to the **Checkout Page** and complete a test transaction using Test Mode. 7. On the checkout page, complete the checkout details. Use the test credit card number `4111 1111 1111 1111` with any valid expiration date and CVV to complete the test checkout. To learn more, refer to [How to Test Store Checkout in TEST Mode](/v1/docs/how-to-test-store-checkout-in-test-mode). ## Related - [Getting Started with ClickFunnels Store](/store-store-overview.md) - [How to Create and Manage Products](/how-to-create-and-manage-products.md) - [How to Customize Your Store Theme and Design](/store-how-to-customize-a-store.md) - [How to Create a Store Upsell in the Store App](/how-to-create-a-store-upsell-in-the-store-app.md) - [Shipping Overview in ClickFunnels](/shipping-shipping-overview.md)