Introduction

This document describes the ways to use the Collections and Collection Items. It also illustrates the detailed steps to display them on the page.

Overview

After creating Collections and Items,, you can display them on any page using the visual editor. To start, click the Visual Editor Mode Switcher on the left panel of the dashboard.

How to Display Collections

The collections you have previously created appear as templates, and the data field types you have set for the collections when designing them, appear as widgets under the appropriate section. The first step of building your collection page is to display the collection template and customize its style and settings.

1. Click the Page: Homepage button on the Top Bar to open a pop-up window, then click the Collections tab.

   

   The Collections Pop-Up comprises:

   • The List of Collections - displays the collections you have previously created, indicating their categories and items. At this stage of page building, you need to use only the required category. Items are needed at a later stage when displaying the items.

     • Category - this stands for the template set when creating the collection.
     • Item - this is an individual unit within the collection: all the items have the same layout and structure.

   • Open Collections - this redirects to the Collection section of the Project Dashboard.

   • Search Bar - searches for the relevant collections among the existing ones.

2. Choose the required Collection Category.
   After choosing the category, the Collections widget group appears on the widgets list.

3. Access the Collections Widget group from the Widgets section.

   

4. Drag the Collection Name widget from the Collections widget group and drop it into the Layout Canvas.
   It appears on the page as the name of your collection.

   

5. Access the Item Repeater under the Advanced group of widgets. Drag and drop it into the Layout Canvas.
   You need the Item Repeater for grouping and displaying all the items you have previously created for the given collection.

   

   After this step, the Collection Field types previously created for the given collection appear in the Collections group as widgets.

   

6. Drag the required Collection widgets and drop them into one of the Item Repeater boxes, keeping the ctrl key pressed.
   Each box of the Item Repeater stands for one of the items in the given collection. You design one of the Item Repeater boxes, and all the other boxes automatically repeat the same design and structure. To set the number of boxes, i.e., the items to be displayed as a collection and their layout, adjust the Item Repeater styles and settings.

7. Click the Publish button.
   After publishing, the message _"Changes are successfully published. "_appears on the screen.

How to Display Collection Items

After the collection template is ready, you can display the collection items and design their layout and structure. The data fields, created for the Collection and filled in when creating Items, are now available as widgets to build the item pages.
Take the following steps:

1. Open the Collection pop-up window from the Top Bar and click the Item.

   

2. Access the Collections from the left panel to drag the required widgets and drop them into the Layout Canvas.

   

   You can design the structure and layout of items using widget-specific, global styles and visibility settings.
   The structure, layout, and design you set for one item apply to all the items within the given collection.
   Use the dropdown list on the Top Bar to access the page of any item in the given collection.

   

3. Click the Publish button.
   After publishing, the message _"Changes are successfully published. "_appears on the screen.

How to Display Collections on Any Page

You can either build a page for a collection or display the latter on any page of your project.

1. To choose any of the available pages for displaying the collection, access the Pages tab by clicking the Page: Homepage button on the Top Bar.

   

2. Access the Item Repeater widget in the Advanced group from the Widgets section.

3. Drag the Item Repeater widget and drop it into the Layout Canvas.

4. To activate the Settings available for the Item Repeater, click the Item Repeater on the Layout Canvas holding the Ctrl key pressed.

   

5. Click the Collection dropdown list and choose the required collection.

   

   To set any preferable design and structure for the collection, adjust the Item Repeater styles and settings.

6. Click the Publish button.
   After publishing, the message _"Changes are successfully published. "_appears on the screen.

👍

If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.