CRO Manifesto
guideline #
39

Show At Least Two Products Per Swipe in Carousels

context

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.

Why?

Displaying two+ products per swipe makes comparison easier, keeps users engaged, speeds decision-making, and increases chances of finding a product to buy.

Content
  • 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:

  1. Navigate to Customize Theme > Homepage > Product Carousel and look for "Products per view" or "Slides per view" settings
  2. 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
  3. Configure carousel width: desktop containers should be 90-95% viewport width, mobile 100% with 16px side padding
  4. Add CSS for smooth scrolling: scroll-behavior: smooth; overflow-x: auto; and ensure touch/swipe gestures work on mobile
  5. 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
5.0 RATING • 350+ CLIENTS

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:

Live Website Walkthrough
Technical Analysis
Conversion Checklist
Key Section Redesigns
Industry & ICP Research
Implementation Plan
try us free
No items found.
5.0 RATING • 350+ CLIENTS

Work with the #1 Team That gets you predictable results.

Strategy
DESIGN
COPYWRITING
DEVELOPMENT
Free Audit & Redesign

Get a Free Audit

See the difference for yourself. We’ll identify what’s leaking revenue on your site and show you how to fix it.
Free Forever
130+ Optimizations
Section Redesigns
Get My Free Audit
CRO Strategy Call

Talk to Glued

This isn’t a sales call. It’s a hands-on teardown session where we walk through exactly what’s holding your site back and what fixing it would mean for your revenue.
No Sales Pitch
ROI Projections
Free CRO Strategy
Book a Call