Showcase Collection items on my website
Getting Started
Showcasing Custom Collection items can be easily done with a few simple steps. You can add important elements and populate them with custom collection items. Follow the guide in this article to get started.
Adding CMS Row with Column
To showcase Custom Collection items, you will need to have a CMS Row and Column section. Follow the steps given below to add a CMS Row with a Column.
- On your builder, click on
+ Add New Section
- Go to
CMS Row with Columns
- Click on any of the Grid types to proceed
⬇️ The demonstration is shown in the GIF below
⬇️ Once the CMS Row with Column has been added, click on Connect to Database
⬇️ On the toolbar, go to Configurations and select:
- The Data Source as Custom Collection
- The Collection you want to feature.
Refer to the GIF below for the demonstration
Populating Rich Text Content Element with Custom Collection Items
Follow all the steps below to learn how to showcase Collection items with Rich Text Content —
- Once the CMS Row with Column has been added, and connected to Database click on
+ Add Element
- Scroll down & select
Rich Text Content
under the CMS Elements - Choose what texts you want to showcase from the dropdown under the Text field
The Screenshot & GIFs below show the whole process being demonstrated visually ⬇️
1. Once the CMS Row with Column has been added, and connected to Database click on + Add Element
2. Scroll down & select Rich Text Content
under the CMS Elements
Populating Heading/Title Element with Custom Collection Items
⬇️ Follow all the steps below to learn how to showcase Collection items with Heading/Title —
- Click on
+ Add Element
- Select the Heading/Title element
- Click on
Add CMS Fields
- Pick any one option from the dropdown
The Screenshot & GIF below show the whole process being demonstrated visually ⬇️
⬇️ Refer to the GIF and picture below
Populating Image Element with Custom Collection Items
Like the Heading element, Image elements can also be populated with Custom Collection Items.
Refer to the GIFs below ⬇️
Populating Button Element with Custom Collection Items
Refer to the GIF below to view the procedure:
Related articles
Add and customize fields in a Collection
Updated on: 27/05/2024
Thank you!