Discover the best collection-list websites created by professional designers. Get inspired and start planning your perfect collection-list web design today!

ThreeSixtyEight

Watch the tutorial at https://www.youtube.com/watch?v=VqSEvzzLoVQ

CMS Map

Interactive CMS Map (Responsive - Collection List)

Easily add real-time, on-page search to any Webflow Collection List, without having to write any custom Javascript code, using https://jetboost.io!

This demo site, made to look like Product Hunt, showcases some of the advanced scenarios that Jetboost handles, such as searching paginated lists or having multiple search filters.

Message me on Twitter (https://twitter.com/c_spags) if you have any questions!

CMS On-Page Search

Breaking Webflow's limitations! An easy and lightweight way to nest multiple collections with unlimited items on any single page with jQuery .load() which pulls the multi-reference info from any individual page into an HTML embed, that works like a nested collection. 

This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element. 

For more details have a look at the sample blog pages in this project, read the short documentation (How to?) you'll find in this project and feel free to clone the whole project.

Add on: With the internal functions of Webflow it is not possible to sort native nested collection items. The order is determined exclusively by the order of the tags in the CMS field. This project includes a script that allows you to alphabetically sort both Webflow's native and limited nested collection lists as well as the unlimited nested collection lists generated by jQuery.

Multiple nested Collections and unlimited nested Items on single pages in Webflow

Multiple nested Collections with unlimited Items on single pages in Webflow

Filter Collection Lists by Reference and Multi-Reference Fields

At the moment, you cannot show multi-reference field values in a Collection list. 

In this example I created the 'colour' fields as text fields within the Cities Collection, so I could pull the colour name from the CMS.

Might not be very efficient, but it's a solution if you want to show these values in the Collection list.

Filter Collection Lists (CMS)

multiple-filter-collection-lists

UPDATE 9/30/2020:
This layout is now achieved without any custom code by styling the "Even" items (available when you're styling a collection list item in the state dropdown under "Structure") to be in the "Row-Reverse" style for a flex-row.

Previously as of 2019:
There was a small line of CSS that was on the canvas which allows you to set a row-reverse style for every nth element (in this case every even numbered element) to have a reverse style within just one collection list

flipflop

Flipflop every other collection item in a collection list

Webflow University

Turn a collection list into a responsive grid layout that automatically adjusts to fit different screen sizes.

Open or clone this project to interact with the grid and learn how we built it.

Check out the video lesson here: https://wfl.io/30A4kdK

Grid Example 2: Collection Lists

Designing a grid-based collection list

An interactive store locator built with Mapbox and leveraging a collection list thanks to Javascript.

mapstore

Store locator with Mapbox and a Collection list

A quick guide on how to create a CMS collections grid with items that span different lengths depending on a CMS option. 

Just follow the steps or clone this project. 

Hope it helps

CMS controlled grid items span

cms-grid-span-items

Here is a collection list showing the 3 latest blog entries. On desktop they are shown next to each other, on mobile that are shown one by one as a slider.

Feel free to copy.

collection-list_slider

Collection list > slider

Sygnal

Allow your featured collection list items to take up more space. This is a demonstration of how you can use CSS to control the rowspan and colspan of individual CMS items.

Discover collection list websites built by the Webflow community

Discover collection list websites built by the Webflow community