The Collection List widget permits the creation of dynamic and organized displays of various content types across multiple pages. It simplifies the process of arranging and presenting content, ensuring that your website visitors can navigate and explore your content in a structured and visually appealing manner. Simply drop it onto any page to showcase a range of items from your chosen collection, including blog posts, articles, and other similar content.
Adding a Collection List Widget
To add a Collection List widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open Page on the top panel and navigate to the required page.
- Click the Widgets list on the left panel.
Type the widget name in the search bar, or expand the Collections group to access the Collection List widget.
- Drag and drop the widget onto the Layout Canvas.
Upon dropping the widget on the Layout Canvas, it is displayed with the default styling, which you can later customize per your needs.
After dropping the widget, you get access to all other collection-specific widgets (the fields predesigned for the given collection).
Note: Alongside the other collection-specific widgets, adding the Collection List widget onto a Category page gives access to the Collection Filter and Category Name widgets. On any other page, it provides access to the Category Name widget.
For instance, when using the widget to present articles, the collection-specific widgets might include fields for the article: Title (the Name widget), Author, Date, etc.
You can drag and drop the desired widgets from the provided list into one of the Collection List containers while holding the Ctrl key down, and customize them to match your website design. The remaining containers within the Collection List display identical content and styling.
Note:
- When dropping the widget on a Category page, it, by default, displays the Collection Items that are included in the given Category.
- When dropping the widget on any other page, select a Category from the widget settings to bind and showcase the Collection Items relevant to the chosen Category.
Configuring the Collection List Widget
To design the appearance and behavior of the Collection List widget, activate the Property Panel of the widget and access its Styles and Settings.
- Go to Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Go to Settings to modify the widget settings:
- Select None/Button/Pagination to display or hide the Load More button/Pagination icon below the collection list.
- Indicate the number of loading content in the Load by field, if Button is selected.
- Enable the Title toggle to display the "Showing N Results" text above the Collection List.
Tip: You can modify the Label styling by clicking the Title and using its Property Panel. - Enable the Sorting toggle to display the filter dropdown above the Collection List.
Set a default filter sorting criteria, such as Alphabetical (A to Z or Z to A), or chronological (Newest First or Oldest First) order.
Tip:
- To modify the dropdown styling, click the Dropdown element and configure its general styling features (see Global Styles).
You can also access the UI Elements in the Design System from the upper-right corner of the Property Panel. Select one as a base for Dropdown, or create a new UI Element and style it according to your preferences. To do so:
1. Click the Dotted Menu on the Property Panel.
2. Select Reset Styles to discard the changes made to Dropdown and restore its default style.
3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
- Activate the Enable Navigation toggle to control the redirection to the item single page.
- Bind the Collection List widget to a Data Source, which can be a category or collection item, then select the desired category or collection item from the dropdown menu.
Select the linked Collection Items from the relevant dropdown, when binding the Collection List to a Collection Item,
Note: When dropping the Collection List widget on a category page, you do not need to manually bind it to any data source, as it automatically displays the items associated with the given category.
Expand Visibility and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).
💡 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.