If your website has a high bounce rate, it’s time to take a closer look at your user experience. Is it difficult to find products in your eCommerce store? Does your job board have a low application rate? We can help. Keep your Webflow Collections Lists organized and easy to navigate with sort options. Sort your content by date, text, numbers, and more!

The good news is that Webflow has a native sort option that lets you sort Webflow Collection Lists. However, if you want to let your users sort your Collection Lists, use Jetboost to add on-page sorting to your website. No custom Javascript needed. 

In this article, we’ll first learn what you get with Webflow’s native sort. Then, we’ll explore Jetboost’s CMS Dynamic Sorting Booster and see how it differs from Webflow’s native sort. 

What types of Collection Lists should I sort?

Add sorting to any large content directories that are difficult to navigate. Check out some of our favorite use cases below. 

eCommerce. The most obvious sort option for eCommerce stores is price. We all love a good deal! Let your users sort your products by price to find the best discounts. 

Resource Directories. The easier it is to navigate your resource directory, the more users will use it. Sort your resource directory by date added, type of resource, or category. Make it easy for your users to find the content they want.

Job Boards. Sort jobs by position, salary, or date added. Check out our live demo to see all these options in action.

Real Estate Listings. Add on-page sorting to make it easy for your users to find the house of their dreams. Buying a home is already stressful enough! Let your users sort by date of listing, price range, or house size. 

Blogs. Give your users an enjoyable reading experience with sort options like category, author, or date added.  

How do I use Webflow’s native sort?

Webflow’s native sort lets you sort your Collections Lists by Collection Fields. Select your Collection List, then navigate to the “Element Settings” panel. Select “Collection List Settings,” and add a “Sort Order.”

Different rules will be available depending on what type of sort order you add. For example, choose to sort numbers from largest to smallest or smallest to largest. 

Sort your Collection Lists by a single field or multiple fields. Add custom Collection Fields to add more sort options. Once you’ve added your sort options, publish your website to see the final results. Check out Webflow’s lesson on how to sort Collection Lists for more help.

Can my users sort my content? 

Webflow does not currently let users sort Collection Lists. The sort order you choose will be how your Collection List displays to your users. For example, if you sort your blog posts by topic (alphabetical A-Z), this is how your blog posts will appear on your website. 

If you want to let your users sort your Collection Lists, keep reading. We’ll teach you how Jetboost can help you add on-page sorting to your content directories.

Use Jetboost Sort to Add On-Page Sorting to Your Content Directories

What is Jetboost Sort?

Jetboost’s CMS Dynamic Sorting Booster lets your users sort your Collection Lists by any Collection Field. Think category, date, price, and more! Jetboost will display the results immediately, on-page for your users. 

Bonus, there is no coding required. Add tailored sort options to your Collections Lists with simple copy-and-paste steps. It’s a quick and easy way to improve your user experience without the headache of custom Javascript. Keep your content accessible and your users happy.  

What features does Jetboost Sort offer?

Proper Date Sorting. Other third-party solutions that use Javascript treat dates like text. What does this mean? If you sort by date, the dates will sort in alphabetical order by month not chronological order by number. With Jetboost, we always sort your dates chronologically, so the sort order is correct every time. 

Variety of Sort Controls. We give you complete design freedom over how your sort controls look. Use a button, link block, or select field. Even better, mix and match these for a customized experience! 

Paginated Lists. We’ll sort up to 2,000 Collection Items at a time, not only the first 100 items. It’s automatic, so there’s no extra setup. 

Sort Multiple Fields with Ease. Need more than one sort option? Add multiple Jetboost CMS Dynamic Sorting Boosters to your Collection List. Then, watch these boosters work together effortlessly.

Save Current Sort State. With one click, your users can save your sorted Collection List to the URL. This makes it easy for users to share sorted content via email, social media, etc. 

Combine Products. Combine Jetboost Sort with our other boosters from filtering to searching to pagination. Keep your content directories organized and easy to navigate.

You can also choose from two free Power Ups to enhance this booster. Add a reset button to any button or link to reset the Collection List sort order to default. Or, use our toggle switch to fix broken interactions past Webflow’s limit of 100 Collection Items. 

How do I add Jetboost Sort to my website?

With our powerful CMS Dynamic Sorting Booster, you can add on-page sorting to your website without any Javascript. Customize the booster to meet the needs of your website and users. Follow the steps below to get started!

Step 1: Set up your Jetboost account.

If you’re not already a Jetboost user, sign up for free. Add your Webflow account to Jetboost. That’s it. You’re ready to get started adding boosters. 

Step 2: Add the CMS Dynamic Sorting Booster to your Webflow website. 

Navigate to your Jetboost dashboard. Click “Add Booster” and add the “Dynamic List Sort” booster.

Step 3: Configure the CMS Dynamic Sorting Booster. 

Name the booster on the left-hand sidebar.

Select which Collection List on your website you want to sort. 

Select which Collection Field you want to sort by. 

Select if you want to add the active sort to the URL. We recommend this if you want your users to be able to share your sorted content via text, social media, etc. 

Step 4: Add the Jetboost script to your Webflow website. 

Head to the custom code page in your Webflow Project Settings. Find the “Head Code” section. Paste in the Jetboost script here. If you’re already a Jetboost user, Jetboost will skip this step.

Step 5: Prepare your Collection List for on-page sorting.

Add the provided Jetboost class to your Collection List Wrapper element. 

Next, add an Embed element inside of your Collection Item. Copy and paste the provided Jetboost code to the Embed element. Click “save & close.” If you already added the Jetboost Embed with a different booster, skip this step!

Publish your website! Visit your published website and copy the URL. Paste the URL in the “Test URL” box on your Jetboost dashboard. Leave the Test URL blank if you’re testing the homepage. Click “Test and Continue.” We’ll let you know if there are any issues. 

Step 6: Create an element for your sort options.

Select whether you’d like your users to sort your Collection List with a button, link block, or select field. For this tutorial, let’s choose a button. 

Add a Button element to your webpage. Style it however you want! Make sure you add at least one class to the button that you can use for base styles. 

Copy and paste Jetboost’s “Active Class” to your button. Style this class how you want your button to look when active.

Important: Remove this class when done. It’ll automatically be added or removed when a user clicks the button.

Copy and paste the Jetboost “Sort Class” to your button. For this tutorial, we chose to sort our Recipes Collection by meal type. Now we'll decide whether to sort by meal type (A-Z) or meal type (Z-A). If we want to add both sort options to our webpage, we’ll need to create a second button for the second sort option.   

Publish your website, and test your URL again. Remember, we’ll let you know if there are any issues. 

Step 7: Final checks.

If there are no final issues, click “continue.” That’s it! 

Prefer video format? Check out our video tutorial below. 

Ready to jump in? Get started with Jetboost for free!

Add Filtering and More to Boost Your Content Directories 

Combine Jetboost's boosters to improve your content directories with upgraded user navigation. Learn more about our navigational boosters below. 

Dynamic Filtering. With Dynamic Filtering, let your users filter by any Collection Fields you want. Read our article to learn more about how you can add filtering to your CMS Collections. 

Advanced Pagination. Paginate your Collection Lists with Advanced Pagination. Let your users scroll through your content without full-page refreshes. It’s easy to add pagination to your Collection Lists with Jetboost. 

Real-Time, On-Page Search. Let your users search your Collection Lists with Real-Time, On-Page Search. With Jetboost, you can add a search bar to your website in less than 10 minutes. 

Give Your Users the Power to Sort Your Content Today

With Jetboost Sort, you can add on-page sorting to your website without Javascript. Design your sort controls however you want, and add multiple sort options to a single Collection List. Bonus, we’ll sort up to 2,000 Collection Items for you. 

Let your users sort Webflow Collection Lists to find what they need faster. Upgrade your user experience today!