Ever wondered how to showcase all your products in a store effortlessly, list all lessons in a course module, or feature your latest blog posts? That’s where the Collections elements come in. These powerful container elements dynamically display grouped content in a grid, such as products, blogs, or lessons, pulling data directly from your collections. Whether setting up a storefront in your ClickFunnels store, organizing lessons in a course module, or displaying all blog posts on the site home page, Collections elements make creating dynamic and engaging pages simple. In this article, you'll learn how to use Collections elements to enhance your pages and explore practical examples for leveraging this feature effectively..png "image(543).png")
Requirements
An active ClickFunnels account
A page created in your workspace
What Are Collections Elements
Imagine you’re organizing a photo album. The album is the Collections Element, which is a container that holds and displays individual photos. Each photo in the album represents an item in the collection, such as a product, blog post, or lesson.
Now, think about how the album is arranged:
Photos are displayed in rows and columns on each page (just like the grid layout in a Collections element). For example, you might have 3 photos per row and 4 rows on a page.
If the album has more photos than can fit on one page, you add page numbers to flip through the additional pages, similar to how pagination works for larger collections in ClickFunnels.
Collections elements in ClickFunnels are container elements designed to dynamically display collections of content. These collections consist of grouped items such as products, blog posts, course modules, lessons, and more. Adding a Collections Element to your page lets you showcase these items in an organized and visually engaging way. Each container allows you to insert dynamic content elements, such as product names, descriptions, images, prices, or links, to represent the associated data within the collection..png "image(549).png")
Behind the scenes, a Collection element uses the CSS grid layout (via the display: grid property) to organize its contents. This layout divides the container into rows and columns, ensuring that all items are evenly spaced and aligned. The grid layout's structure makes it highly adaptable, automatically adjusting the arrangement of items based on the number of elements, the number of columns specified, and the available screen size.
For example:
When visitors browse your store, you can use the Products collection element to display all your products with key details like name, price, and description.
The Blog Posts collection element allows you to showcase recent or featured blog posts from your blog.
The Lessons collection element is ideal for displaying all lessons within a module template page, while the Modules collection element can list all course modules on the Course home page.
Adding a Collection Element in the Page Editor
Inside the page editor, add a Section where you want to place the element.
Add a Row within that section.
Alternatively, you can insert a Flex container instead of a section and row.
Click the orange + Plus or Add New Element button inside the row to insert a new element.
From the Collections category, select the appropriate Collection element (e.g., Products, Blog Posts, Lessons).
Once the Collection element is inserted, configure the number of items displayed per row. By default, the element displays 3 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.
.png "image(551).png")
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, and Link elements specially designed to dynamically populate data in the “Products” collection element.
.png "image(554).png")
Note:
When adding an associated collections element, ClickFunnels highlights eligible elements with a red border, ensuring you only add compatible items.
Once an associated element is added, it will be replicated across all grid columns. The liquid syntax within these elements dynamically pulls data from your collection, ensuring each item is unique. For instance, A “Products” collection element will display all available products in the collection, with each grid column showcasing the product’s name, price, and image.
Where Can I Use Collections Elements
Collections elements have specific applications depending on the type of collection and the page you are designing. For example, you can display all available products to sell on the storefront..png "image(548).png")
Here’s a breakdown of where and how you can use each type of Collections Element:
Products
Use Case: Showcase all products in your store, site, customer center, and course pages.
Dynamic Content: Displays product details like name, image, description, price, and links.
Learn more about the “Products” collection element in the (Collections) Products: Showcase Products on Your Page article.
Products Collections
Use Case: Highlight product collections that group multiple related products, such as seasonal offers or curated product bundles. Similar to the Products collection element, you can use the “Product Collections” collection element in your store, site, customer center, and course pages.
Dynamic Content: Displays collection names, descriptions, collection image, and links.
Learn more about the “Product Collections” collection element in the (Collections) Product Collections: Showcase Product Collections on Your Page article.
Blog Posts
Use Case: Showcase all blog posts on a site, landing page, funnel, customer center, store, and course pages.
Dynamic Content: Lists blog titles, summaries, featured image, publishing dates, categories, and author names.
Learn more about the “Blog Posts” collection element in the (Collections) Blog Posts: Display and organize your blog posts article.
Blog Categories
Use Case: List all blog categories to help users navigate your content on a category page.
Dynamic Content: Displays category names and links.
Learn more about the “Blog Posts” collection element in the (Collections) Blog Posts: Display and organize your blog posts article.
Granted Assets
Use Case: Display all granted assets to the contact on the course pages and in the customer center.
Dynamic Content: Lists asset names, descriptions, and associated download or access links.
Learn more about the “Granted Assets” collection element in the (Collections) Granted Assets: Show Assets Granted to Users article.
Courses
Use Case: Showcase all available courses on the customer center, site, store, landing pages, and funnel pages.
Dynamic Content: Display course title, published date, podcast link, progress status, description, image, and link within the collection element.
Learn more about the “Courses” collection element in the (Collections) Courses: Arrange and Display Available Courses article.
Modules
Use Case: Highlight all course modules on a course page.
Dynamic Content: Lists module name, description, link, image, podcast link, and published date within the collection element.
Learn more about the (Collections) Modules: Arrange and Display Course Modules article.
Lessons
Use Case: Display all lessons within the Course Module Template page to give students easy access to course content.
Dynamic Content: Lists lesson name, description, link, image, audio, video, published date, and lesson status within the collection element.
Learn more about the (Collections) Lessons: Arrange and Display Course Lessons article.