Sort Collection lists

Updated

Learn how to sort items in Collection lists.

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.

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, let’s say you have three items in your Collection — “webflow,” “apple,” and “figma.” If each name contains only lowercase letters, sorting them alphabetically (A–Z) would display them in this order:

  1. apple
  2. figma
  3. webflow

In this case, the list is sorted by the first letter of each word — “a” comes before “f,” which comes before “w.” But if you capitalize “Webflow,” the order changes to:

  1. Webflow
  2. apple
  3. figma

Even though “a” comes before “w” alphabetically, uppercase letters are prioritized over lowercase letters — so “Webflow” appears first.

Now, let’s say you add an acute diacritic to the capital “W” — so it becomes “Ẃebflow.” Your list now appears like this:

  1. apple
  2. figma
  3. Ẃebflow

Although “Ẃebflow” is still capitalized, it moves to the end because lowercase letters are prioritized over letters with diacritics, even if those letters are uppercase.

It’s also important to note that sort order isn’t determined solely by the first character. For example, if you add another item, also named “Ẃebflow,” but with the final “w” capitalized, your list appears like this:

  1. apple
  2. figma
  3. ẂebfloW
  4. Ẃebflow

Here, the uppercase “W” at the end causes that item to appear before the other. Uppercase letters are prioritized over lowercase letters, even when they’re not the first character in the word.

Finally, let’s say you add numbers to the start of some items — “7 ẂebfloW” and “10 Ẃebflow” — and also capitalize “Figma.” Your list is now sorted like this:

  1. 10 Ẃebflow
  2. 7 ẂebfloW
  3. Figma
  4. apple

Even though “10” is a larger number than “7,” it appears first because only the first digit is considered and “1” comes before “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.

Related articles