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.
- Le défilement est en pur CSS ; les points utilisent quelques lignes de JavaScript.
- Utilise la propriété native
scroll-snappour que le balayage donne 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 de rupture (breakpoint) : Fudge passe au carrousel en dessous de 768px par défaut ; c'est configurable.
- Défilement CSS natif : Fudge utilise
scroll-snap, il n'y a donc aucune bibliothèque de carrousel JS ni de poids supplémentaire. - Accessibilité : les indicateurs à points sont de vrais boutons, pas des divs, afin que les lecteurs d'écran annoncent la position.
- Lazy-loading : les images en dehors de la carte visible se chargent toujours de manière différée (lazy-loading).
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 à plusieurs colonnes sur ordinateur sont souvent à l’étroit sur mobile. Un carrousel d’une seule carte que l’on peut faire glisser, avec un défilement scroll-snap et des indicateurs à points, permet de garder chaque carte bien lisible sur téléphone. Placez la carte la plus importante en premier, car les suivantes reçoivent moins de vues.
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 — inchangé sur ordinateur.
- Défilement scroll-snap — arrêt net à chaque carte.
- Indicateurs à points — repère de pagination.
- Une carte par écran (viewport) — attention focalisée.
Associez cela à la refonte du menu tiroir sur mobile et aux filtres mobiles off-canvas.
Fudge crée cela avec son éditeur de boutique.