Sur mobile, déplace les filtres de collection dans un tiroir coulissant. Bouton de filtre avec badge de comptage, tout effacer, appliquer fixe.
Want more control? See the expanded prompt ›
Sur mobile, remplace les filtres de collection intégrés par un bouton 'Filtrer' qui ouvre un tiroir coulissant depuis la droite. Affiche un badge du nombre de filtres appliqués sur le bouton, un lien 'Tout effacer' à l'intérieur, et un CTA 'Appliquer' fixe en bas.
- Le bouton de filtre montre le nombre de filtres appliqués sous forme de badge.
- Tiroir coulissant depuis le bord droit.
- CTA Appliquer fixe en bas du tiroir.
- Tout effacer permet de revenir à l'état non filtré.
Ce que vous essayez de faire
Les filtres mobiles intégrés (inline) prennent de la place au scroll et forcent les acheteurs à scanner et filtrer en même temps. Un tiroir off-canvas leur permet de naviguer, de décider de filtrer, d'ouvrir un écran de filtre dédié, et d'en ressortir avec les résultats : trois actions distinctes, chacune plus simple que la version fusionnée.
Points de vigilance
- Cibles tactiles : les pastilles de filtre sont dimensionnées pour les clics au pouce.
- Hauteur du tiroir : pleine hauteur par défaut, ou en bottom sheet si vous préférez.
- Blocage du scroll : la page en arrière-plan arrête de défiler quand le tiroir est ouvert.
- Geste de retour : le tiroir se ferme avec un swipe vers la droite ou le geste de retour du système.
Comment Fudge procède
Fudge duplique votre thème en ligne dans un brouillon (draft), crée la section comme une section Shopify modifiable avec l'emplacement et le comportement requis par votre prompt, et la connecte à vos vraies données de produits et au style de votre marque. Tout commence en brouillon — prévisualisez sur votre boutique, ajustez via l'éditeur de thème, et ne publiez que quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi les filtres de collection sur mobile ont leur place dans un tiroir
Les filtres intégrés (inline) fonctionnent sur ordinateur où il y a de la place. Sur mobile, ils écrasent la grille de produits et créent une fatigue de défilement vertical. Le modèle de tiroir hors champ (off-canvas) — bouton Filtrer → tiroir coulissant → appliquer → fermer — redonne aux acheteurs sur mobile toute la largeur de la grille.
Quand le mettre en place
Créez des filtres off-canvas pour toute boutique avec du trafic mobile sur les collections et une utilisation significative des filtres. À ignorer pour les boutiques où les acheteurs ne filtrent jamais.
Ce qui fait un excellent tiroir
- Bouton de filtre avec badge de compteur — indique combien de filtres sont actifs.
- Menu coulissant depuis la droite — un standard sur mobile.
- Lien ‘Tout effacer’ à l’intérieur — pour tout réinitialiser rapidement.
- CTA ‘Appliquer’ sticky en bas — confirme les modifications.
Associez ceci aux filtres et tri par tags et à l’audit UX mobile.
Fudge intègre cela dans son travail de merchandising.