---
title: "How to Display Product Collections on the Storefront"
slug: "how-to-display-product-collections-on-the-storefront"
updated: 2025-07-22T18:17:45Z
published: 2025-07-22T18:17:45Z
canonical: "support.myclickfunnels.com/how-to-display-product-collections-on-the-storefront"
---

> ## 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 Display Product Collections on the Storefront

Product collections allow you to group related products together, making it easier for customers to find and purchase them. Displaying these collections on your store’s front page can enhance the shopping experience and drive more sales. In this article, you will learn how to showcase product collections using the “Product Collections” and other advanced elements on the storefront page.

![Store Collection Block](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/awcexp9q8btagivt5d-st0olw57yexlq_a.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 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**.

---

## Create and Set Up a Product Collection

Before you can display product collections on the storefront, you need to create a product collection. Here’s a brief overview of the steps:

1. Navigate to the **Products** menu and select **Collections** from the submenu.
2. Click on **Create Collection** and fill in the necessary details such as the collection’s name, description, and image. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-443FA766.png)
3. Ensure you have added the products you want to include in the collection.

For a detailed guide on creating and managing product collections, refer to our article [How to Create and Manage a Product Collection](/v1/docs/how-to-create-and-manage-a-product-collection).

---

## Build a Dynamic Layout with the “Product Collections” Element

To display all product collections from your workspace on your storefront, follow these steps:

1. In the left-side navigation menu, click the **Store** app and select **Overview**.
2. Click **Design Store** to access the Store Theme Editor.

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-I0ZSNTAT.png)
3. Ensure the **Store Front** page is selected in the left-side navigation.
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.

![Add Section, row and element](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/3aqcbvfhl6j88agivl2nhr0va5vwd65mlq.png)
5. From the elements menu on the right, select **Product Collections**.

![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-AXJOSL23.png)
6. After adding the “Product Collections” 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 Collections” Elements in the Container

Once you have added a “Product Collections” element and a row inside the container, the system will highlight the product collections advanced individual elements. These elements include Name, Description, Image, and Links. Here’s how to add and customize these elements:

![Advanced Product Collection Elements](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/rkdvssx0abl2yy3vxz0tzypdxsdbf7d61q.png)

- **Name**: Add a **Name** element to display the name of the product collection.
- **Description**: Add a **Description** element to display the description of the collection.
- **Image**: Add an **Image** element to showcase the image of the collection.
- **Links**: Add a **Link** element to provide a call-to-action button. Once clicked, the system will redirect them to the associate product collection 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 Product Collections Elements](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/z1nsilj0_rd7ftchgacxlsz5s_8hj6o22g.png)

## Related

- [How to Customize the Store Collection Page](/how-to-customize-the-store-collection-page.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)