How can I display 3 unique collection items on each collection page in Webflow without using categories?

Published on
September 22, 2023

To display 3 unique collection items on each collection page in Webflow without using categories, you can follow these steps:

  1. Create a Collection List on your collection page:
  • In the Webflow Designer, drag and drop a Collection List onto your collection page.
  • Link the Collection List to the desired collection by selecting it from the Collection field in the Settings panel.
  1. Configure the Collection List settings:
  • Open the Collection List settings by selecting the Collection List element.
  • Set the Limit field to 3 to display only 3 collection items.
  • By default, the Collection List will display items in the order they were created. If you want to display them in a different order, you can use the Sort By and Sort Order fields to set your preferred sorting method.
  1. Customize the Collection List design:
  • Customize the layout and design of your Collection List to match your website's style.
  • You can also add any additional elements or styling you want, such as images, text, or buttons, to showcase each collection item.
  1. Repeat the Collection List for each additional group of 3 items:
  • Duplicate the Collection List element two more times to create a total of three Collection Lists on the page.
  • Each Collection List should be linked to the same collection but can have different sorting methods if desired.
  1. Adjust the collection query for each Collection List:
  • To ensure that each Collection List displays unique items, you need to adjust the collection query for each one.
  • Open each Collection List's settings by selecting the specific Collection List element.
  • In the Filter field, add a different filter criteria for each Collection List using the available options (e.g., date, tags, custom fields).
  • Make sure that each filter criteria is different from the others to ensure uniqueness.
  1. Preview and publish your collection page:
  • Preview your collection page in the Webflow Designer to verify that each Collection List displays 3 unique collection items.
  • Once satisfied, publish your collection page to make it live on your website.

By following these steps, you can display 3 unique collection items on each collection page in Webflow without using categories.

Additional Questions:

  1. How can I customize the layout of a Collection List in Webflow?
  2. What are the ways to sort collection items in Webflow?
  3. Can I add custom fields to collection items in Webflow?