> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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 ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-15-at-12_o6ulzs.gif) ⬇️ Once the CMS Row with Column has been added, click on `Connect to Database` ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1xugp5i.png) ⬇️ 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 ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-15-at-13_qgk54i.gif) --- # 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` ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_11f9bm0.png) **2.** Scroll down & select `Rich Text Content` under the CMS Elements ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ke3y7.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-4-1730c50906_etvq3e.gif) --- # 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](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-15-at-13_1pjlm99.gif) ![Add CMS Fields on the Heading/Title element](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-15-at-13_do59l2.gif) ||| ⚠️ Remember to delete the previous text after you add a CMS Field ⬇️ **Refer to the GIF and picture below** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-24-at-11_141vxp.gif) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1npc6xm.png) ||| ⚠️ 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 ⬇️** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-15-at-20_1fqvcpd.gif) --- # Populating Button Element with Custom Collection Items Refer to the **GIF below** to view the procedure: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-4-2f2db1c605_1rj8n0v.gif) | ⬇️ Press **Publish** to view your **Custom Collection** Items on your **site** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-4-7fdd64c6e8_x35usg.gif) --- --- # Related articles [Add a new Collection ](https://www.notion.so/Add-a-new-Collection-c5b4d0c9f55c4b27b078a512a41ba347?pvs=21) [Add and customize fields in a Collection ](https://www.notion.so/Add-and-customize-fields-in-a-Collection-221df338c36f4fdcb634b110f6fc2a24?pvs=21)