Home / Widgets

Collection List Widget

Customer Success Team

Last updated on Apr 18, 2024

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. You drop it onto any page to exhibit a range of items from your chosen collection, which can include blog posts, articles, or other similar content.

Adding a Collection List Widget

To add a Collection List widget:

  1. Access the Visual Editor from Channels on the Dashboard Left Panel and navigate to the required page.

  2. Go to the Widgets list on the Visual Editor Left Panel.

  3. Type the widget name in the search bar, or expand the Collections group to access the Collection List widget.

  4. 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, you must 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.

  1. Go to widget Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
  2. Go to the widget Settings to:
    • set the view of the Collection List: None, Load More, and Pagination.

You can define the number of items to be displayed when clicking the Load More button as well as customize the Load More button name and styling to align with your website design. 
You can also check the Button Widget for more details.

  • activate the Title toggle to display the "Showing N Results" text above the Collection List.
    Note: 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. Additionally, set a default filter sorting criteria, such as Alphabetical (A to Z or Z to A), or chronological (Newest First or Oldest First) order.

    Note: You can modify the Dropdown styling by clicking the Dropdown and using its Property Panel.

  • Activate the Enable Navigation toggle to control the redirection to the item single page.

    Note: You can access the UI Elements in the Design System from the upper-right corner of the Property Panel and choose one as a base for the Dropdown list, or create a new UI element and style it accordingly.

    • You can use the Dotted Menu on the Property Panel:
      • to access Reset Styles to discard the changes made to the Dropdown list and restore its default style.
      • to access Override Styles to apply the changes made to the Dropdown list (font, size, alignment, etc.) to the base element and the elements that are derived from it.

    • 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.

      • When binding the Collection List to a Collection Item, choose the linked Collection Items from the relevant dropdown to be displayed.\ 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.

  • set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.

💡 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.