---
title: "How to Display Products on the Storefront"
slug: "how-to-display-products-on-the-storefront"
updated: 2025-06-25T13:25:19Z
published: 2025-06-25T13:25:19Z
canonical: "support.myclickfunnels.com/how-to-display-products-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 Products on the Storefront

Displaying individual products on your ClickFunnels storefront helps customers easily browse and purchase items. The product elements you add are dynamic, automatically pulling details—like the name, image, and price—from the products you’ve created. This article explains how to add product elements to your storefront and customize their appearance for a better user experience.

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

---

## Requirements

- An active ClickFunnels account
- The [Store](/v1/docs/adding-apps-to-your-clickfunnels-workspace) app added to your workspace
- [At least one product is created](/v1/docs/products-how-to-create-and-manage-products)
- Ensure that each product included in the “Product Collection” is set to be visible in the **Online Store**.

---

## Adding Product Elements to the Storefront

1. In the left-hand menu, click **Store**, then select **Overview**.
2. Click **Customize Store** to access the theme editor.
3. Ensure the **Store Front** page is selected.
4. Add a **Section**, then add a **Row** inside that section.
5. Click the **+ Plus** icon or **Add New Element** button to open **Elements** menu on the right-hand side.
6. Scroll to the **Collection** section and select the **Products** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/3vqgC_fnpdGz1rr6scQQu5NfamyPyDg75Q.png)
7. After adding the “Product” element, you will be prompted to select how many columns you want to add inside the container.

---

## Customizing Product Elements

When you add the Product element to your collection, your store theme might automatically includes some product details, such as the Name, Image, and Price. If you want to customize the display further, you can add additional elements or modify the existing ones. These elements are dynamic and will pull data from the product details you’ve already set up, ensuring your storefront stays up-to-date.

If you want to add more elements or further customize the display:

1. Click **Add Element** inside the row where the product details are shown. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/a2q9UKJP0FZRHcBJsLBR4BAhRTyB0FBAmw.png)
2. From the **Product** section, add elements like:
  - **Name**: Displays the product name.
  - **Description**: Adds a brief description.
  - **Price**: Shows the product price.
  - **Image**: Displays the product image.
  - **Link**: Adds a button linking to the product page or checkout. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/IyPD_uDmuC41R8InTZT2sasdni0tgpqYjw.png)
3. Click on each element to access its settings. You can adjust fonts, colors, spacing, and layout to match your store’s theme and ensure everything looks cohesive.

## Related

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