In this tutorial, we will learn how to reorder a collection list in Webflow. Reordering a collection list allows you to change the order of items displayed on your website without having to manually rearrange them in your CMS (Content Management System). This can be particularly useful when you want to showcase specific content or prioritize certain items.
Step 1: Accessing the Collection List
To begin, open your Webflow project and navigate to the page where your collection list is located. Once there, select the collection list element by clicking on it.
Step 2: Enabling Sorting
In the right-hand sidebar, you will find the settings for your collection list. Scroll down until you see the “Sort Order” section.
By default, it is set to “None.” Click on the dropdown menu and choose an appropriate sorting option for your collection list.
Note: The available sorting options may vary depending on how you’ve set up your collections in Webflow.
Ascending:
If you select “Ascending,” the items in your collection list will be sorted in ascending order based on a specific field. For example, if you have a “Date” field and choose ascending sorting, the oldest items will appear first.
Descending:
If you select “Descending,” the items in your collection list will be sorted in descending order based on a specific field. In our previous example with a “Date” field, the newest items will appear first.
Random:
The “Random” option allows for random ordering of items within your collection list every time the page is loaded.
Step 3: Choosing a Field
After selecting a sorting option, you will see a dropdown menu labeled “Sort by.” Click on it to choose the field you want to base your sorting on.
The available fields will depend on the data structure of your collections. Common fields include “Name,” “Date,” “Price,” etc.
Step 4: Ordering
If you want to further refine the order, you can use the “Order” dropdown menu. By default, it is set to “Ascending.” If you choose “Descending” here, it will override the previous sorting option.
Step 5: Save and Publish
Once you are satisfied with your sorting configuration, make sure to save your changes and publish your website for the reordering to take effect.
Note: Reordering a collection list will affect all instances of that collection list throughout your website.
In Conclusion
Reordering a collection list in Webflow is a straightforward process that allows you to change the order in which items are displayed on your website without manually rearranging them in your CMS. By following the steps outlined in this tutorial, you can easily configure sorting options and choose specific fields to base your ordering on. Remember to save and publish your changes for them to take effect.