Articles on: CMS

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 ⬇️


Add “Heading/Title” element


Add CMS Fields on the Heading/Title element



⚠️ Remember to delete the previous text after you add a CMS Field



⬇️ Refer to the GIF and picture below





⚠️ The text {{name}} refers to the CMS Field, which is the Name/Title of the Custom Collection item.




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:




⬇️ Press Publish to view your Custom Collection Items on your site






Related articles


Add a new Collection


Add and customize fields in a Collection

Updated on: 27/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!