On mobile, turn the features grid into a swipeable carousel with dots. Desktop stays the same.
Want more control? See the expanded prompt ›
On mobile only, turn the 3-column features grid on the homepage into a one-card swipeable carousel with snap scrolling and a dot indicator.
- Pure CSS implementation — zero JS at desktop sizes.
- Uses native
scroll-snapso swipes feel like a real iOS carousel. - Accessible dot indicators — real buttons, not divs.
- Works on any grid: collections, features, testimonials, product recommendations.
What you're trying to do
Desktop grids that work beautifully at 3 columns become squished, unreadable cards on a phone. A snap-scroll carousel uses the whole screen for one card at a time — better readability, more intentional browsing, and dot indicators for orientation.
Things to watch out for
- Breakpoint — Fudge swaps to carousel under 768px by default; configurable.
- Native CSS only — Fudge uses
scroll-snapso there's no JS carousel library or extra weight. - Accessibility — Fudge handles this: dot indicators are real buttons, not divs, so screen readers announce position.
- Lazy-loading — Fudge handles this: images outside the visible card still defer loading.
How Fudge does it
Fudge duplicates your live theme into a draft, builds the section as an editable Shopify section with the placement and behavior your prompt requires, and wires it to your real product data and brand styling. Everything starts in draft — preview on your store, tweak via the Theme Editor, and publish only when you're ready. Your live store stays untouched.
Why mobile grids should become swipeable carousels
Multi-column grids on desktop become cramped on mobile. A swipeable single-card carousel with snap scrolling and dot indicators converts dramatically better than a vertical-stacked grid on mobile — shoppers swipe more than they scroll for feature content.
When this is worth building
Build the mobile carousel for homepage feature sections where engagement matters. Skip for content where the grid layout is structurally important on mobile (filters, settings).
What makes one great
- Mobile-only behavior — desktop unchanged.
- Snap scrolling — clean stop at each card.
- Dot indicators — pagination context.
- One card per viewport — focused attention.
Pair this with mobile menu drawer redesign and off-canvas mobile filters.