Get Started with Jetboost Today
Premium Webflow App, no custom code required. Join thousands of other professionals who are using Jetboost for Dynamic Filtering, Real-Time Search and more.
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!
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.
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.
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.
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.
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.
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.
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.
Navigate to your Jetboost dashboard. Click “Add Booster” and add the “Dynamic List Sort” 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.
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.
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.
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.
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!
Combine Jetboost's boosters to improve your content directories with upgraded user navigation. Learn more about our navigational boosters below.
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.
Let your users sort Webflow Collection Lists to find what they need faster. Upgrade your user experience today!
Learn how Webflow wishlists can benefit your users and your business. You'll also learn how to use Jetboost to easily add a wishlist feature to your eCommerce store.