How to have combined lists to respect Webflow sorting?

Attributes
,
1

Hello hello,

Does anyone know how to get combined list instances to be sorted into the main combined list by Webflow’s native sorting function (not a visitor initiated sort action using list-sort).

Right now my 2 list instances sit at the bottom of the combined list and I would like them to be sorted by date within the combined list (but not allow visitors to change this sorting).

Here’s my read only link: Webflow - Apoha 2026

Many thanks to whoever can help!

2

Hey @thesourdoughstudio!

This is a common point of confusion with the combine feature. Webflow’s native CMS sorting only applies per-collection-list, so once fs-list-combine merges your lists together, that per-collection sort order doesn’t carry through to the combined output — which is why your 2 combined instances end up at the bottom. They’re just appended after the target list renders.

The good news is there’s a verified two-part setup to get automatic date sorting on the combined list without any visitor-triggered interaction.

Part 1 — Add a hidden sort-trigger element

You need a sort-trigger element in your DOM, but you can hide it completely from visitors. Add a button inside your combined list section with these attributes:

  • fs-list-element = sort-trigger
  • fs-list-field = [your-date-field-slug]
  • fs-list-fieldtype = date

Set it to display: none in Webflow’s style panel. Replace [your-date-field-slug] with the actual slug of your date field — you can find this in your CMS Collection settings.

Part 2 — Add the callback script

Drop this into your page’s Before </body> custom code section:

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      const [listInstance] = listInstances;
      listInstance.addHook('afterRender', (items) => {
        listInstance.sorting.value.fieldKey = '[your-date-field-slug]';
        listInstance.sorting.value.direction = 'desc';
      });
    },
  ]);
</script>

Same slug value as Part 1. Change 'desc' to 'asc' if you want oldest first.

One thing worth flagging — if you have multiple list instances on the page with different combine groups, you may need to target the correct instance rather than just taking the first one (listInstances[0]). Let us know if that’s the case and we can adjust.

Also, the HTML you shared looks like it’s from your home page rather than the page with the combined lists. If you run into any issues, could you share the staging URL for that specific page? That way we can check the attribute structure directly. :folded_hands:

3

Hey,

I’ve implemented this - but it doesn’t seem to be working - could someone please take a look at my read-only and see what i’m doing wrong.

Thanks!

4

Hey @thesourdoughstudio let me check it out

5

Hey @thesourdoughstudio

The target list fs-list-combine="resources" and the other two instance lists fs-list-instance="resources" are setup correct
The sort trigger has the right attributes added fs-list-element="sort-trigger" & fs-list-field="date"

However no Collection Item on any of the lists exposes a date field to sort by
The current date element on the items only has the class caption with no fs-list-field
Finsweet’s List Sort can only sort by fields it can find, right now there’s nothing tagged date on any collection item

Another potential issue is that the dates typically have the format 7.6.2026 which will most likely fail to resolve to an actual date while parsing
It needs to be an ISO format date such as 2026-07-06 i.e. yyyy-mm-dd
I would recommend adding in a hidden element with the correct date format yyyy-mm-dd then give it the needed attributes

<div class="hide" fs-list-field="date" fs-list-fieldtype="date">2026-07-06</div>

Then update the previous script with this one

<script>
window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      const [listInstance] = listInstances;
      listInstance.addHook('afterRender', () => {
        listInstance.sorting.value = { fieldKey: 'date', direction: 'desc' };
      });
    },
  ]);
</script>
6

Hi @jesse.muiruri

Thank you so much for looking into this - I really appreciate it!

I think I’ve gotten it working now :slight_smile:

However I would still like my pinned articles to appear at the top - do I follow a similar method to the above to achieve this?

7

Hey @thesourdoughstudio

I was of the idea that leaving out the fs-list-field="date" & fs-list-fieldtype="date" attributes from the hidden div of the pinned items would conveniently leave them out of the sorting & so automatically have them floating at the very top

I now realize that that might actually not be the case, there’s no guarantee that they would remain at the top & there’s also potential for inconsistent results

Replace the previous script with this

<script>
window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      const [listInstance] = listInstances;

      listInstance.addHook('afterRender', (items) => {
        const container = document.querySelector('[fs-list-combine="resources"][fs-list-element="list"]');
        if (!container) return items;

        const itemEls = Array.from(container.querySelectorAll(':scope > [role="listitem"]'))
          .filter((el) => el.querySelector('.resource-inner-wrapper'));

        itemEls.sort((a, b) => {
          const aPinned = a.querySelector('.icon.pin') ? 1 : 0;
          const bPinned = b.querySelector('.icon.pin') ? 1 : 0;
          if (aPinned !== bPinned) return bPinned - aPinned;

          const aDate = a.querySelector('[fs-list-field="date"]')?.textContent.trim() ?? '';
          const bDate = b.querySelector('[fs-list-field="date"]')?.textContent.trim() ?? '';
          return new Date(bDate) - new Date(aDate);
        });

        itemEls.forEach((el) => container.appendChild(el));

        return items;
      });
    },
  ]);
</script>

Let me know!

8

This worked perfectly!

Thank you so much @jesse.muiruri