Functional

Add filters to your CMS collections

outils :
Illustration croce

Table of contents

Video

Why add filters to your CMS collections?

Filters are important on the web because they allow users to quickly find products that match their needs and preferences. By using filters, prospects can refine their search based on specific criteria such as size, color, price, brand, etc.

Filters also help simplify navigation through a large catalog by reducing the number of products displayed on the screen. This can improve the user experience by making the search faster and more efficient.

Finally, using filters can also help businesses better understand the preferences and needs of their customers by collecting data on the most used filters and the most frequently viewed search results. This data can be used to improve the relevance of the catalog and to provide a more personalized shopping experience for customers.

Here is an example of a catalog with a advanced filtering system carried out for a customer using the CMS Filter by Finsweet attributes

Ajout de filtres dans Webflow

1. Add this script to the URL <head>of your page

 <script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>


2. Add a “list” attribute to your <Collection list>

Ajout de filtres dans Webflow

3. Add a “filters” attribute to your <Form Block>

Ajout de filtres dans Webflow

4. Add an attribute with the value of your choice to the required elements

Ajout de filtres dans Webflow

5. Publish your site and test the result

These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time