CMS+ Sort+

Sort+ enhances Framer’s native sorting functionality by introducing real-time toggling of sort direction directly on your page. While Framer limits designers to selecting a single CMS field for sorting, Sort+ gives users greater control over how content is organized and displayed.

Limitation

Currently, Sort+ supports only changing the sort order direction and does not allow multiple sort options. To use a different field, you'll need to repeat Step 1 from the Setup guide below. When this feature becomes available, it will be added to CMS Plus at no extra cost, like all other updates.

Controls

• Collection+ ID Use the same ID number as the Collection+ you want to sort. Set up your Collection+ first.

• Preserve Enable/disable Sort By order. Read about preserving.

• Sort By This control is used to trigger its sorting function. Learn about this concept.

  • A → Z (ascending)

  • Z → A (descending)

Interactions

• Ascending Sort Set the variant to be used when the sort order is ascending.

• Descending Sort Set the variant to be used when the sort order is descending.

Both interactions are required when Preserve is enabled. Read about preserving.

Step-by-Step Setup

1. In Framer's CMS, select your collection, then select a field to sort by; the order direction doesn't matter.

   

   
   

2. Head over to where your collection list has been inserted. Select it, and set its Sorting to Reverse.

   

   Important

   This step is required! From this view, your collection list will be sorted in reverse, but when previewing and online, the order will be based on the configured Sort+ (step 4).

   
   

3. Integrate your component with Sort+. Learn how.

4. Configure the Sort+ controls in the primary variant.

   If selecting to Preserve, add the required Interactions:

   

   
   

5. Override Sort By in the other variant. This is what triggers the sorting when transitioning between variants. Learn about triggering functionality.