--- title: "How to Customize the Store Collection Page" slug: "how-to-customize-the-store-collection-page" updated: 2025-06-25T13:19:48Z published: 2025-06-25T13:19:48Z canonical: "support.myclickfunnels.com/how-to-customize-the-store-collection-page" --- > ## 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 Customize the Store Collection Page The “Store Collection” page in ClickFunnels allows you to present a specific collection of products in an organized and visually appealing manner, enhancing the shopping experience. In this article, you will learn how to customize the Store Collection Page using the Product Collections Element and other advanced elements. ![Store Collection Page Preview](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/njzy8q-itb9bmvl3bk2r5ugzd_nanwmecg.png) > [!WARNING] > IMPORTANT > > Product collections are exclusively available for sale in the ClickFunnels store. They cannot be added as individual products within a funnel. --- ## Requirements - An active ClickFunnels account - The [Store](/v1/docs/adding-apps-to-your-clickfunnels-workspace) app added to your workspace - [At least one product collection is created](/v1/docs/how-to-create-and-manage-a-product-collection) - Ensure that each product included in the “Product Collection” is set to be visible in the **Online Store**. --- ## Overview of Store Collection Page The “Store Collection” Page displays the individual products within a specific collection when a customer clicks on a collection from the storefront. This page serves as a hub where customers can browse and purchase products within a collection. **Example:** For instance, if you have a collection named **Beginner Fitness Kit** and a customer clicks on that collection, the **Store Collection** page will showcase the products within that collection, such as `Jump Rope`, `Resistance Bands`, and `Yoga Mats`. --- ## Build a Dynamic Layout with the “Products” Element To start customizing the “Store Collection” Page, follow these steps: 1. In the left-side navigation menu, click the **Store** app and select **Overview**. 2. Click **Customize Store** to access the Store Theme Editor. 3. In the **Store Theme Editor**, select the **Collection** menu to edit the “Store Collection” page. ![Collection Menu](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/8yud5ouznpkcwzlcgkzwm_yfnbidknsqiw.png) 4. Inside the editor, add a **Section**, then add a **Row** within that section. Click the orange **+ Plus** or “**Add New Element**” button inside the row to insert a new element. 5. From the elements menu on the right, select the **Products** collection type element. This element acts as a container for your product collection. ![Adding Products Collection Type Element](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/quwz2vd9k1faqgl4uvh7n8gdgwnc-nkbfg.png) 6. After adding the “Products” element, you will be prompted to select how many columns you want to add inside the container. The standard is one column, but you can choose more columns based on your design preferences. --- ## Add Dynamic Advanced “Product” Elements in the Container Once you have added a “Products” element and a row inside the container, the system will highlight the advanced individual elements for the products. These elements include Name, Description, Image, Price, and Links. Here’s how to add and customize these elements: ![Advanced Products Elements](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/bjvpo8cqsynxdwl-1kv8alhmesykoxhhdg.png) 1. **Name**: Add a **Name** element to display the name of each product in the collection. 2. **Description**: Add a **Description** element to display the description of each product in the collection. 3. **Image**: Add an **Image** element to showcase the main image of each product in the collection. 4. **Price**: Add a **Price** element to display the price of each product in the collection. 5. **Links**: Add a **Link** element to provide a call-to-action button such as “Buy Now” or “Add To Cart”. Once clicked, the system will redirect them to the product page. After inserting these individual elements, you can go to each element’s settings to customize the design and layout according to your preferences. Adjust colors, fonts, and sizes to match your store’s theme and ensure a cohesive look. ![Advanced Products Elements in the Container](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/qqnobvkpuyvaqtuw9ozarfcuopmbympzja.png) --- ## Incorporate Product Collections Advanced Elements To further enhance the “Store Collection” Page, you can incorporate the “Product Collections Advanced Elements”. These elements allow you to add dynamic content such as the collection name, image, and description based on the specific collection clicked by the customer from the storefront. Follow the steps below: 1. Add a new **Section** and a **Row** where you want to display the dynamic collection information. 2. Click the orange **+ Plus** or “**Add New Element**” button inside the row to add a new element. 3. From the elements menu on the right, click on the **Advanced**** menu and then scroll down to the **Product Collections** section. ![Advanced Products Collections Elements](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/w_egdhbn_epjzslhigfyriynypfaa2xoyq.png) 4. Add the following elements as needed: > [!NOTE] > NOTE > > The “Product Collections” advanced elements should be added outside of the “Products” container. Simply add a “Section” and a “Row”, then directly place the advanced elements inside the “Row”. There is no need for a “Collection” container type element. - **Name**: Display the name of the collection. - **Description**: Provide a brief overview of the collection. - **Image**: Showcase the main image of the collection. - **Link**: Add a call-to-action button related to the collection. > [!WARNING] > IMPORTANT > > Be aware that the “Product Collections - Link” element will dynamically populate the URL of the current store collection page link that visitors are already on, which could result in a navigation loop. To prevent this issue, it is recommended to avoid using this element on the store collection page. ## Related - [How to Display Product Collections on the Storefront](/how-to-display-product-collections-on-the-storefront.md) - [How to Create and Manage a Product Collection](/how-to-create-and-manage-a-product-collection.md) - [How to Create a Store Upsell in the Store App](/how-to-create-a-store-upsell-in-the-store-app.md) - [How to Create and Manage Products](/how-to-create-and-manage-products.md) - [How to Create and Manage Orders](/orders-how-to-manage-orders.md)