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 mangent de l'espace de défilement et forcent les acheteurs à scanner et filtrer en même temps. Un tiroir off-canvas leur permet de naviguer, de décider de filtrer, de plonger dans un écran de filtres dédié et d'en ressortir avec des résultats — trois mouvements distincts, chacun plus facile que la version combinée.
Points de vigilance
- Cibles tactiles — Fudge s'en occupe : les puces de filtres sont dimensionnées pour les pouces.
- Hauteur du tiroir — Fudge s'en occupe : pleine hauteur par défaut ; configurable en bottom-sheet.
- Blocage du défilement — Fudge s'en occupe : le défilement du corps se bloque quand le tiroir est ouvert.
- Geste de retour — Fudge s'en occupe : le tiroir se ferme d'un balayage vers la droite ou via 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 comptage — montre combien de filtres sont actifs.
- Tiroir coulissant depuis la droite — un standard sur mobile.
- Lien ‘Tout effacer’ à l’intérieur — une porte de sortie pour réinitialiser.
- CTA ‘Appliquer’ fixe en bas — confirme les changements.
À associer avec les filtres et tris par tags et l’audit UX mobile.