(Collections) Products: Showcase Products on Your Page

The challenge of showcasing multiple products neatly on a page can quickly become complex, especially when managing a growing inventory. ClickFunnels simplifies this with the Products collection element, a dynamic grid container designed to display all your available products in one place. In this article, you will learn how the Products collection element dynamically displays the products from your workspace.

Requirements

• An active ClickFunnels account

• At least one product created in your workspace

• The “online store” option enabled in the product settings

• Products added to the funnel page (when used in a funnel page)

Understanding the Collections Elements

Adding the Products Collection Element in the Editor

1. Inside the page editor, add a Section where you want to place the element.

2. Add a Row within that section.

3. Alternatively, insert a Flex container instead of a section and row.

4. Click the orange + Plus or Add New Element button inside the row to insert a new element.

5. From the Collections category, select the Products element.

6. Once inserted, configure the number of items displayed per row. By default, the element displays three items per row. You can change this setting to adjust the layout. For example, selecting 4 “Items Per Row” and 8 “Items Per Page” will create a two-column row, each divided into four columns.
   

7. Inside each grid of the Collection element, insert associated content elements. For example, for a “Products” collection element, you can insert Name, Description, Price, Image, Link, and Add to Cart elements specially designed to populate data in the “Products” collection element dynamically.
   

   Note:

   When adding a collections element, ClickFunnels highlights eligible elements with a red border, ensuring you add compatible dynamic items.

8. Once associated elements are added, they will be replicated across all grid columns. The liquid syntax within these elements dynamically pulls data from the products, ensuring each item is unique. The element will display all available products visible for the online store.
   

Note:

The Products collection element renders on funnel pages. It shows items only when products are added to the page; if no products are added, the grid will be empty and will not render on page load. Filter by Bump works when the element is added on a funnel page and lets you show all products, only bump products, or only non‑bump products.

Adding Dynamic Elements in the Grid

When you add the Products collection element to a page, you’ll fill each grid card with smaller collection-aware elements. When your cursor is inside a grid and you open the elements panel, ClickFunnels highlights the compatible Product elements with a red border to show they’ll work dynamically inside the collection. These elements automatically pull data from the product represented by that grid; no manual data entry is required.

How dynamic content appears

When you drop a Product element into a grid, the editor shows a placeholder such as {{product.name}} or {{product.display_price}}. These are Liquid placeholders. On your live page, ClickFunnels replaces them with the real product data from your workspace.

Note:

Add an element to one grid item and ClickFunnels replicates it across every grid item in the collection. The structure stays consistent, while the content changes per product.

Elements you can add inside each grid item

• Name
  What it shows: The product’s name from your product settings.
  Placeholder: {{product.name}}

• Description
  What it shows: The product description you saved in the product settings.
  Placeholder: {{product.description}}

• Price
  What it shows: The product’s price as configured in your store.
  Placeholder: Commonly appears as {{product.display_price}}.

• Image
  What it shows: The product image stored in your product settings.
  Placeholder: Image

• Link
  What it does: Adds a dynamic text link that points to the grid item product page.
  Placeholder: View Details

• Add To Cart (Checkout → Add To Cart)
  What it does: Adds the specific product in that grid item to the shopper’s cart.

Customizing the Products Collection Element