Fonctionnel

Ajouter des filtres à vos collections CMS

outils :
Illustration croce

Sommaire

Vidéo

Pourquoi ajouter des filtres à vos collections CMS ?

Les filtres sont importants sur le web car ils permettent aux utilisateurs de trouver rapidement les produits qui correspondent à leurs besoins et à leurs préférences. En utilisant des filtres, les prospects peuvent affiner leur recherche en fonction de critères spécifiques tels que la taille, la couleur, le prix, la marque, etc.

Les filtres aident également à simplifier la navigation dans un catalogue volumineux en réduisant le nombre de produits affichés à l'écran. Cela peut améliorer l'expérience utilisateur en rendant la recherche plus rapide et plus efficace.

Enfin, l'utilisation de filtres peut également aider les entreprises à mieux comprendre les préférences et les besoins de leurs clients en recueillant des données sur les filtres les plus utilisés et les résultats de recherche les plus fréquemment consultés. Ces données peuvent être utilisées pour améliorer la pertinence du catalogue et pour offrir une expérience d'achat plus personnalisée aux clients.

Voici un exemple de catalogue avec un système de filtrage avancé réalisé pour un client à l'aide du CMS Filter de Finsweet attributes

Ajout de filtres dans Webflow

1. Ajouter ce script dans la le <head> de votre page

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


2. Ajoutez un attribut "list" à votre <Collection list>

Ajout de filtres dans Webflow

3. Ajoutez un attribut "filters" à votre <Form Block>

Ajout de filtres dans Webflow

4. Ajoutez un attribut avec la valeur de votre choix aux éléments nécessaire

Ajout de filtres dans Webflow

5. Publiez votre site et testez le résultat

Photo de l'auteur
Sandro D.
Publié le
16/5/2024
Mis à jour le
16/5/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail