Mache das Feature-Grid auf Mobile zu einem wischbaren Karussell mit Dots. Desktop bleibt gleich.
Want more control? See the expanded prompt ›
Verwandle das 3-spaltige Feature-Grid auf der Startseite nur für Mobile in ein wischbares One-Card-Karussell mit Snap-Scrolling und Punkt-Indikator.
- Reine CSS-Umsetzung – kein JS bei Desktop-Größen.
- Nutzt natives
scroll-snap, sodass sich Swipes wie ein echtes iOS-Karussell anfühlen. - Barrierefreie Punkt-Indikatoren – echte Buttons, keine Divs.
- Funktioniert bei jedem Grid: Kollektionen, Features, Testimonials, Produktempfehlungen.
Was du erreichen willst
Desktop-Grids, die in 3 Spalten wunderbar funktionieren, werden auf dem Smartphone oft zu gequetschten, unleserlichen Cards. Ein Snap-Scroll-Karussell nutzt den gesamten Bildschirm für jeweils eine Card – das sorgt für bessere Lesbarkeit, bewussteres Browsen und Punkt-Indikatoren zur Orientierung.
Worauf du achten solltest
- Breakpoint – Fudge wechselt standardmäßig unter 768px zum Karussell; konfigurierbar.
- Nur natives CSS – Fudge nutzt
scroll-snap, es gibt also keine JS-Karussell-Bibliothek oder unnötigen Ballast. - Barrierefreiheit – Fudge kümmert sich darum: Punkt-Indikatoren sind echte Buttons, keine Divs, sodass Screenreader die Position vorlesen.
- Lazy-Loading – Fudge regelt das: Bilder außerhalb der sichtbaren Card werden weiterhin verzögert geladen.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Sektion als editierbare Shopify-Sektion mit der von dir gewünschten Platzierung und dem geforderten Verhalten auf und verknüpft sie mit deinen echten Produktdaten und deinem Brand-Styling. Alles beginnt im Entwurf – als Vorschau in deinem Shop, zur Anpassung über den Theme-Editor, und wird erst veröffentlicht, wenn du bereit bist. Dein Live-Shop bleibt unangetastet.
Warum Mobile-Grids zu Swipe-Karussells werden sollten
Mehrspaltige Grids auf dem Desktop wirken auf Mobilgeräten oft gequetscht. Ein wischbares Single-Card-Karussell mit Snap-Scrolling und Punkt-Indikatoren (Dots) konvertiert auf dem Smartphone deutlich besser als ein vertikal gestapeltes Grid – Käufer swipen bei Feature-Inhalten lieber, als dass sie scrollen.
Wann sich die Umsetzung lohnt
Baue das Mobile-Karussell für Feature-Sektionen auf der Startseite, bei denen Engagement wichtig ist. Verzichte darauf bei Inhalten, wo das Grid-Layout auf dem Smartphone strukturell wichtig ist (Filter, Einstellungen).
Was ein gutes Karussell ausmacht
- Mobile-only Verhalten – Desktop bleibt unverändert.
- Snap-Scrolling – sauberer Stopp bei jeder Card.
- Punkt-Indikatoren – Kontext für die Pagination.
- Eine Card pro Viewport – volle Aufmerksamkeit.
Kombiniere das mit dem Redesign des mobilen Menüs und Off-Canvas-Filtern für Mobile.