Skip to content
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterGo to CF Classic Help Center

(Collections) Product Collections: Showcase Product collections on Your Page

Published: Updated:

Product collections allow you to group related products together, making it easier for customers to find and purchase them. Displaying these collections on your ClickFunnels pages can enhance the shopping experience and drive more sales. In this article, you will learn how to showcase product collections using the “Product Collections” element.

Store Collection Block

Requirements

Section titled “Requirements”

  • An active ClickFunnels account

  • At least one product collection is created

  • Ensure that each product included in the “Product Collection” is visible in your Store (the Store switch on the product’s Sales channels tab).

  • The product collection itself is visible in your online store (the Online Store option is on in the collection’s settings) and isn’t archived.

Adding the Product Collections Element

Section titled “Adding the Product Collections Element”

  1. Open the ClickFunnels page editor for the page where you want to display your product collections.

  2. Click Add Element in the desired row to open the Elements menu.

  3. Scroll to the Collections section and select the Product Collections element.

    Add Element menu with the Collections category and the Product collections element highlighted

  4. After adding the “Product Collections” element, you will be prompted to select the number of columns you want to add inside the container. The standard is one column, but you can choose more columns based on your design preferences.

  5. Add dynamic details such as Product Collection Name, Product Collection Image, and Product Collection Link, which automatically pull data from your product collections settings to keep your page updated. You can include the following elements:

    1. Product Collection Name: Add a Product Collection Name element to display the name of the product collection.

    2. Product Collection Description: Add a Product Collection Description element to display the description of the collection.

    3. Product Collection Image: Add a Product Collection Image element to showcase the image of the collection.

    4. Product Collection Link: Add a Product Collection Link element to provide a call-to-action button. Once clicked, the system will redirect them to the associate product collection page.

  6. Click on each element to access its settings. Adjust fonts, colors, spacing, and layout to match your page’s design for a cohesive look.

Customizing The Product Collections Element

Section titled “Customizing The Product Collections Element”

Accessing Settings

Section titled “Accessing Settings”

When you hover over a collection element, its border will be highlighted in magenta. To access its settings, click on the g****ear ⚙️ icon or click directly on the element.

Top Margin

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent.

You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes.

Collection Settings The Collection Settings let you configure how grid items (cards) are arranged and paginated inside the container.

  • Items Per Row: Choose how many items appear on each row of the grid. The layout will wrap to new rows and adapt on smaller screens automatically.

  • Items per page: Set the total number of items rendered on a single page in the container. If the collection has more than this number, ClickFunnels creates additional pages.

  • Hide pagination: Hides the page numbers below the collection. The collection still shows only the number of items set in Items per page, so visitors can’t reach items beyond the first page. To show every item without page numbers, set Items per page high enough to include all of them (up to 100), then turn on Hide pagination.

  • Pagination Item Color: Color of the pagination items’ text/icons (e.g., the numbers 1, 2, 3).

  • Pagination Item Background Color: Background color for non‑active pagination items.

  • Pagination border color: Border color around each pagination item.

  • Pagination Active Item Color: Text/icon color for the current (active) page item.

  • Pagination Active Item Background Color: Background color for the active page item.

  • Pagination Active Border Color: Border color for the active page item.

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

Control Panel

The Element Control Panel appears at the bottom of every element in the page editor, offering quick access to essential settings and actions for that element. Here’s what each icon represents:
Settings panel with the Code (</>) icon in the header and the Visibility, All, Desktop, Mobile, eye and trash icons in the bottom bar

  • ALL: The element will be visible on all devices (desktop, tablet, and mobile).

  • Desktop Icon: The element will only be visible on the desktop view.

  • Mobile Icon: The element will only be visible on mobile view.

  • Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.

  • Code (</>): Opens the code editor for this container, where you can add custom CSS to change its styling. The editor shows the container’s CSS ID Selector so your CSS targets only this container. Open it from the code icon at the top of the settings panel, or hover over the container on the page and click Code in its toolbar.

  • Trash Icon: Removes the element from the page editor entirely.