Sur mobile, transforme la grille de fonctionnalités en un carrousel swipeable avec des points. Le format desktop reste le même.
Want more control? See the expanded prompt ›
Uniquement sur mobile, transforme la grille de fonctionnalités à 3 colonnes de la page d'accueil en un carrousel swipeable avec une seule carte visible, du snap scrolling et un indicateur à points.
- Implémentation en pur CSS — zéro JS sur les formats desktop.
- Utilise le
scroll-snapnatif pour que les swipes donnent l'impression d'un vrai carrousel iOS. - Indicateurs à points accessibles — de vrais boutons, pas des divs.
- Fonctionne sur n'importe quelle grille : collections, fonctionnalités, témoignages, recommandations de produits.
Ce que vous essayez de faire
Les grilles desktop qui fonctionnent très bien avec 3 colonnes deviennent souvent des cartes écrasées et illisibles sur un téléphone. Un carrousel avec snap-scroll utilise tout l'écran pour afficher une carte à la fois — ce qui offre une meilleure lisibilité, une navigation plus ciblée et des indicateurs à points pour se repérer.
Points de vigilance
- Point d'arrêt (Breakpoint) — Fudge passe en mode carrousel en dessous de 768px par défaut ; c'est configurable.
- CSS natif uniquement — Fudge utilise
scroll-snapdonc il n'y a pas de bibliothèque de carrousel JS ou de poids supplémentaire. - Accessibilité — Fudge s'en occupe : les indicateurs à points sont de vrais boutons, pas des divs, afin que les lecteurs d'écran puissent annoncer la position.
- Lazy-loading — Fudge s'en occupe : les images en dehors de la carte visible voient toujours leur chargement différé.
Comment Fudge procède
Fudge duplique votre thème en ligne pour en faire un brouillon, crée la section en tant que 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 publiez uniquement quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi les grilles sur mobile devraient devenir des carrousels swipeables
Les grilles multi-colonnes sur desktop deviennent trop étriquées sur mobile. Un carrousel swipeable affichant une carte à la fois, avec snap scrolling et des indicateurs à points, convertit beaucoup mieux qu’une grille empilée verticalement sur mobile — les acheteurs swipent plus qu’ils ne scrollent pour ce type de contenu.
Quand est-ce que ça vaut le coup d’être mis en place
Créez ce carrousel mobile pour les sections de mise en avant de la page d’accueil, là où l’engagement est important. Évitez de le faire pour du contenu où la disposition en grille est structurellement importante sur mobile (filtres, paramètres).
Ce qui fait un bon carrousel
- Comportement uniquement sur mobile — le format desktop reste inchangé.
- Snap scrolling — arrêt net à chaque carte.
- Indicateurs (points) — pour le contexte de pagination.
- Une carte par vue — attention focalisée.
Associez cela à la refonte du menu tiroir sur mobile et aux filtres mobiles hors champ (off-canvas).