Set a Default Sort Option

Jetboost's Dynamic List Sort booster allows you to sort your collections with most of the same field types that Webflow currently offers. This means, setting a default sort option is easy to accomplish using the steps below.

Quick note: We recommend using a select field input for the sort element (which is the first setup we'll talk about). You can use a Dropdown element with link blocks or buttons, but we'll discuss why we recommend the select field first – at least for now.

To set up any default sorting, we can actually start by sorting the list directly in Webflow within the element settings panel as shown below. Once you've sorted the list like we have in this demo, we can make sure this option is available in the select field as well. We probably also want to make the "Popular" sort option, the first one so it reflects the default sorting.

1. Using the Select Field Element (recommended):

To setup the sorting options for the select field, please follow the instructions during the sort booster setup process. To specifically set the default option, leave the select option value input blank " ". When the options value is blank (" "), Jetboost will sort the list back to its default, which is what we first did. And that's all.

2. Using a Dropdown Element with Buttons/Link Blocks:

Setting up the Dropdown for sorting is somewhat similar to the select field, only we are adding the generated classes to the buttons themselves instead of the classes being the option values. However, there is one thing worth noting. Since Jetboost doesn't just yet support setting a button or link block as a default button, we have to use a workaround by utilizing the "Reset Filters" Power Up. This will clear any filter and reset the list back to its default. This also means any active state gets cleared, so it wouldn't really be apparent to users that the default option is the one that's been selected. To solve this in our template for example, we added the word "Default" to the default option button for some kind of clarification. See the image below:

Get creative with it and have fun. If you find yourself getting stuck, then drop us a line & we'd be happy to help!