Assortment catalog

Assortment catalogs are one of 2 methods to incorporate and style dynamic content from a CMS Collection or an Ecommerce Collection (the alternative method is by utilizing a Collection page). You have the ability to include Assortment catalogs to any category of page on your site.

Before delving into Assortment catalogs, feel free to study more about the CMS and CMS Collections in our other tutorials:

• Introduction to Webflow CMS
• Overview of dynamic content
• Selections

In this tutorial, you’ll discover:

1. How to include an Assortment catalog
2. How to link your Assortment catalog to a Collection
3. How to style an Assortment catalog
4. The structure of an Assortment catalog
5. How to configure Assortment catalog settings
6. About Components in Assortment catalogs

How to incorporate an Assortment catalog

Provided that you hold one or more Collections with Assortment merchandise, you have the capability to incorporate an Assortment catalog to any enduring page or Collection page on your site. To incorporate an Assortment catalog:

1. Initiate the Insert panel
2. Tap and draw a Assortment catalog onto your site page

You can also include an Assortment catalog using Rapid search: Command + E (on Mac) or Control + E (on Windows).

How to link your Assortment catalog to a Collection

An Assortment catalog is ineffective until it’s associated with a Collection. To link the Assortment catalog to a Collection:

1. Double-tap the Assortment catalog to unfold Assortment catalog settings
2. Select the Collection you prefer from Source (e.g., Authors, Blog posts, Clients, etc.)

Remark: When you connect an Assortment catalog to a Collection, the Collection item names will not appear on the Collection catalog item tags unless you’ve previously revealed the Collection in the CMS panel. To address this concern, expose the Collection in the CMS panel before linking your Assortment catalog to the Collection.

How to style an Assortment catalog

After connecting a Collection to your Assortment catalog, the Assortment catalog will showcase all the items in that Collection as vacant blocks. You’ll have the ability to append elements to the Assortment catalog and link those elements to a Collection field. Then, those elements will spontaneously fill with the data from your Collection.

Incorporate stationary and dynamic components

Upon adding an element to one of the vacated Assortment catalog blocks, that element will replicate in each Assortment catalog block. This is recognized as “stationary” content — content that does not originate from a Collection.

When you connect the element to a Collection field, it’ll automatically replace the element’s default content (e.g., the word “Heading” in the heading element) with the content from each Collection item. It becomes “dynamic” content because the content is sourced from the CMS Collection.

Stationary elements have blue outlines on the canvas, while dynamic elements — elements that have data coming from the CMS — have purple outlines. 

Link elements to Collection fields

You can link a stationary element to a Collection field to dynamically revise the content of that element. To link an element to a Collection field:

1. Navigate to the Insert panel
2. Append an element (e.g., a heading, paragraph, etc.) to your Assortment catalog
3. Choose the element in the Assortment catalog
4. Navigate to Element settings
5. Verify the box labeled “Receive text from Blog posts” (the field type and Collection name may differ depending on the element and Collection you’ve chosen)
6. Uncover the Select field dropdown
7. Select the Collection field you wish to receive content from

Find out more about how to link each Collection field type to the relevant elements.

Separate elements from Collection fields

You also have the option to detach elements from Collection fields:

1. Choose the element in the Assortment catalog
2. Navigate to Element settings‍
3. Deselect the box labeled “Receive text from Blog posts” (the field type and Collection name may differ depending on the element and Collection you’ve selected)
   • Selection you’ve made

   Implement dynamic aspects

   When you introduce styling to any element within a Collection list (whether static or dynamic), the styling will be reflected across all the items in that Collection list. For instance, if you link a heading to a Collection field and style it with a green font color, all the headings in that Collection list will inherit the same green font color.

   You can also employ Interactive style configurations for a Collection list by extracting colors and background images from color and image fields within your Collection items.

   

   Structural makeup of a Collection list

   

   Surrounding wrapper for Collection list

   As a default, a Collection list wrapper includes the Collection list and the Void status. In case pagination is activated, it also consists of the pagination container. You have the option to insert additional pagination containers by replicating the wrapper.

   Listing of Collections

   The Collection list wrapper encompasses the Collection items within the Collection list. It is not possible to add other elements to this wrapper.

   Element within Collection

   The Collection item houses the specific content that you integrate into the Collection list. Any element added here will be distributed to all items on the list. These elements remain static until linked to Collection fields or have conditional visibility traits enabled. These amendments will transform them into dynamic elements. Dynamic elements are marked by a purple icon in the Navigator.

   

   Void status

   The empty status replaces the Collection list if there are no items to exhibit on the list. By default, it showcases a gray background along with a text block stating “No items found.” You can modify the style and augment or replace elements to craft a personalized void status.

   Pagination

   Pagination comprises two link blocks: the prior button and the subsequent button. Each of these can be personalized and styled. Gain insights on paginating Collection lists.

   Configuring Collection list parameters

   You can regulate the displayed content and layout of a Collection list via Collection list settings. To reach Collection list settings:

   1. Pick the Collection list wrapper or Collection list in the workspace
   2. Navigate to the Element settings panel

   

   Collection

   Here, you can designate which Collection to pair with your Collection list. Before selecting a different Collection to link to the Collection list, ensure none of the elements inside the Collection list are presently linked to a Collection.

   User Interface Condition

   This feature allows you to switch between the items condition and the void condition to edit both states of the Collection list.

   Keep in mind that adjusting this feature does not establish the condition of a Collection list on a live site. The authentic condition of a Collection list is dictated by its items. The void status only emerges when there are no items within a Collection or when they are filtered out. Find out more about filtering Collection lists.

   Design

   You can maintain the Collection list in a vertical stack or alter the layout to columns. Alternatively, you can implement a grid design for the Collection list to form a dynamic grid. In this scenario, ensure the Collection list design setting remains configured to full width.

   Insider tip: We suggest utilizing flexbox for constructing uniform height structures for Collection lists. The content in each Collection item may differ and cause misalignment in column layouts not based on flexbox.

   Filters

   Incorporating a filter enables you to display only the desired Collection items — those that meet one or more filter conditions. Get more insights on filtering Collection lists.

   Order of Arrangement

   Arrangement order grants you the capability to organize Collection lists according to specific field(s). Learn more about arranging Collection lists.

   Items Pagination

   You can paginate Collection lists to exhibit a set number of items per page. Delve into the details of paginating Collection lists.

   Cap on Displayed Items

   This feature allows you to specify the number of items shown in a Collection list and which item initiates the Collection list. For instance, you can commence your list at item 5 and display only 3 items. Consequently, your list will present items 5, 6, and 7. Learn more about restricting Collection items.

   Additional info: A maximum cap of 100 items per Collection list and 20 Collection lists per page is applicable unless pagination is enabled. Gain an understanding of using pagination to reveal more than 100 items in a Collection list.

   Components within Collection lists

   You have the option to insert or generate a component within a Collection list item. Subsequently, you can link Collection fields to component attributes and employ dynamic data in your components. Explore further on utilizing components in Collection lists.