When users see only one product per swipe, they lose context and have to work harder to explore options. This slows browsing and can frustrate users.
Displaying two+ products per swipe makes comparison easier, keeps users engaged, speeds decision-making, and increases chances of finding a product to buy.
- Your homepage carousel shows only one product at a time, and you're seeing high bounce rates (above 60%) on mobile or low engagement time (under 30 seconds) on product carousels
- Analytics show users are making fewer than 3 swipes on average in your product carousels, indicating limited product discovery
- Your store has 20+ products in featured collections and you're using Shopify, Shopify Plus, or custom builds that support carousel modifications
- You're getting 1,000+ monthly visitors and want to improve product discovery without redesigning your entire homepage
- Mobile traffic represents 60%+ of your sessions (typical for DTC brands) and you need better mobile browsing experience
For Shopify stores, modify your carousel settings in your theme's product slider section:
- Navigate to Customize Theme > Homepage > Product Carousel and look for "Products per view" or "Slides per view" settings
- Set desktop view to show 2.2-2.5 products (showing partial third product creates scroll incentive). Mobile should show 1.2-1.5 products with 16-20px spacing between items
- Configure carousel width: desktop containers should be 90-95% viewport width, mobile 100% with 16px side padding
- Add CSS for smooth scrolling:
scroll-behavior: smooth; overflow-x: auto;and ensure touch/swipe gestures work on mobile - Test product image aspect ratios are consistent (1:1 or 4:5 work best) and product titles don't break layout across different lengths
Implementation time: 2-4 hours for most themes. Custom themes may require developer assistance for 1-2 days.
/* CSS for improved carousel spacing */
.product-carousel {
gap: 16px;
scroll-snap-type: x mandatory;
}
.product-card {
min-width: 45%; /* Shows ~2.2 products */
scroll-snap-align: start;
}
- Carousel engagement rate: Track swipes/scrolls per session - expect 15-25% increase in carousel interactions within 2-3 weeks
- Product discovery metrics: Monitor unique products viewed per session - look for 20-30% improvement in product page visits from homepage
- Time spent on homepage: Measure average session duration on homepage - expect 10-20% increase as users browse more products
- Add-to-cart rate from carousel: Track conversions specifically from carousel clicks - anticipate 8-15% improvement in 3-4 weeks using Google Analytics Enhanced Ecommerce or Shopify Analytics
- AVOID: Cramming too many products (3+ full products) on mobile screens - creates tiny, unreadable product images and poor user experience
- BEST PRACTICE: Show 1.2-1.5 products on mobile with clear, tappable product cards sized minimum 140px wide
- AVOID: Using inconsistent product image sizes or aspect ratios that break the carousel layout and create visual chaos
- BEST PRACTICE: Standardize all carousel images to same dimensions (recommended 800x800px) with consistent backgrounds
- AVOID: Auto-rotating carousels that move too fast (under 4 seconds) when combined with multiple products per view
- BEST PRACTICE: Use manual navigation or 6+ second auto-rotation to let users process multiple visible products
Get A Free Website Audit.
We’ll identify what’s leaking revenue on your site and show you how to fix it. The free audit includes: