Sort Collection lists

Learn how to sort items in Collection lists.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

You can specify the sort order of Collection lists based on a specific field or fields. For example, you may want to sort a “Latest news” Collection list by a date field, or a Collection list of artists by their name. You may want a limited Collection list to display a random quote of the day. Or, you may want to create a custom sort order.

In this lesson, you’ll learn:

  1. Sort order rules
  2. How to add and remove sort orders
  3. How to create a custom sort order

Sort order rules

Different rules are available for each field type.

  • Random order — randomizes the order of a list on every publish
  • Smallest to largest or largest to smallest — used to sort number fields
  • Oldest to newest or newest to oldest — used to sort date fields
  • Is ON first or Is OFF first — used to sort switch fields
  • Alphabetical (A-Z) and reverse-alphabetical — used for sorting plain text, switch, date/time, or number fields

Alphabetical items are sorted in the following order:

  1. Numerically (based on the first digit of a number)
  2. Uppercase letters alphabetically
  3. Lowercase letters alphabetically
  4. Characters with diacritics (i.e., a sign, such as an accent or cedilla, written above or below a letter to indicate different pronunciation)

For example, these Collection items would appear in the following alphabetical order:

10 quick brown foxes

7 quick brown foxes

A quick brown fox

a quick brown fox

Å quick brown fox

Although it’s a larger number, 10 displays first in the sort order because the first digit, “1,” is less than 7.

How to add and remove sort orders

To add a sort order to your Collection list:

  1. Select your Collection list on the canvas
  2. Go to Element settings panel > Collection list settings > Sort order
  3. Click the “plus” icon
  4. Choose the Collection field you’d like to sort by from the first dropdown
  5. Choose the sort order you want from the second dropdown
  6. Click Save

You can repeat these steps to add multiple sort orders to the same Collection list. The Collection list will be sorted first by the first sort order rule, then the second, and so on. For example, a Collection list of team members can be sorted by an “Employee of the month” switch field first, and then sorted randomly.

To delete a sort order, select your Collection list, go to Element settings panel > Collection list settings > Sort order, and click the “trash” icon next to the sort order.

How to create a custom sort order

If the default sort orders aren’t exactly what you need, you can create a custom sort order by adding a new Collection field to your Collection and assigning a numerical value to each item in the Collection. You’ll use that new field and its values to sort your Collection items.

To add a new Collection field:

  1. Go to the CMS panel and hover over the name of your Collection
  2. Click the settings “cog” icon to open Collection settings
  3. Click Add new field
  4. Choose number as the Field type
  5. Give the field a name (e.g., “Custom sort order”) in the Label field
  6. Click Save field
  7. Click Save Collection

Now that you’ve created the new “Custom sort order” field, you’ll need to add a number in that empty field for each Collection item. This number indicates the position of your Collection items in your custom sort order. To do this, open a Collection item, scroll to the “Custom sort order” field, type in your preferred number, and save the item. Repeat this for all items in your Collection and be sure to give each item a unique number.

Then, you can sort your Collection items by the numbers you assigned them in your “Custom sort order” field:

  1. Select your Collection list on the canvas
  2. Go to Element settings panel > Collection list settings > Sort order
  3. Click the “plus” icon
  4. Choose the new “Custom sort order” field  from the first dropdown
  5. Choose your preferred sorting method from the second dropdown (e.g., “Smallest to largest”)
  6. Click Save

Your Collection items will be sorted in the order you assigned to them.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top