mberlin/suplement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
suplement/.agents/skills/storefront-best-practices/reference/components/product-slider.md
Matias Berlinger 9d523f8b6a Initial commit
2026-03-07 11:07:45 -03:00

5.1 KiB
Raw Permalink Blame History

Product Slider Component

Contents

Overview

Product slider (carousel) displays multiple products horizontally with navigation to scroll through them. Used for related products, recently viewed, bestsellers, and featured products.

Assumed knowledge: AI agents know how to build carousels with navigation. This focuses on ecommerce product slider patterns.

Key requirements:

  • Horizontal scrolling of product cards
  • Arrow navigation (prev/next)
  • Optional dot indicators
  • Mobile: Swipe gesture support
  • Responsive product count (4-6 visible desktop, 2-3 mobile)
  • Lazy loading for off-screen products

When to Use Product Sliders

Use for:

  • Related products (product page)
  • Recently viewed (product page, homepage)
  • "You May Also Like" (product page)
  • Bestsellers / Featured products (homepage)
  • "Frequently Bought Together" (product page)
  • New arrivals (homepage)
  • Category showcases (homepage)

Don't use for:

  • Main product images (use gallery instead)
  • Critical content (not all users scroll/swipe)
  • Checkout flow (keep linear)
  • Primary navigation (use grid for discoverability)

Slider Patterns

Continuous scroll:

  • Shows 4-6 products at once (desktop)
  • Scroll left/right by 1-2 products at a time
  • Smooth animated transition (300-400ms)
  • Most common pattern

Infinite loop (optional):

  • Wraps to beginning after end
  • Good for small product sets (<10 items)
  • Creates continuous browsing feel
  • Not necessary for large sets

Snap to alignment:

  • Products snap to grid after scroll
  • Prevents partial product visibility
  • Better visual alignment
  • Improves browsing experience

Auto-play (NOT recommended for products):

  • Automatic scrolling without user action
  • Poor UX for product sliders (users lose control)
  • Only use for promotional banners/hero images
  • If using: Pause on hover, slow speed (5-7s)

Product Display

Product cards in sliders:

  • Same cards as product grids (see product-card.md)
  • Simplified on mobile (less detail, smaller images)
  • Image, title, price minimum
  • Optional: Rating, "Add to Cart" (desktop only)
  • Adequate spacing between cards (16-24px)

Responsive display:

  • Large desktop (>1440px): 5-6 products visible
  • Desktop (1024-1440px): 4-5 products
  • Tablet (768-1024px): 3-4 products
  • Mobile (<768px): 2 products (sometimes 1.5 for scroll hint)

Scroll hint on mobile:

  • Show 1.5 products (partial visibility of next)
  • Indicates more content to swipe
  • Improves discoverability
  • Better than showing exact 2 products

Navigation Controls

Arrow buttons:

  • Left/right arrows outside slider
  • Desktop: Always visible or show on hover
  • Mobile: Hidden (swipe gesture preferred)
  • Position: Vertically centered
  • Size: 40-48px touch targets
  • Disable left arrow at start, right arrow at end (no infinite loop)

Dot indicators (optional):

  • Show progress through slider
  • Each dot = one "page" of products
  • Position: Below slider, centered
  • Small (8-12px dots)
  • Only if many products (>12)
  • Less common for product sliders (more for hero carousels)

Keyboard navigation:

  • Tab through visible product cards
  • Arrow keys scroll slider (optional)
  • Focus management on scroll

Mobile Sliders

Touch gestures:

  • Horizontal swipe to scroll
  • Native scroll momentum
  • Snap to product alignment
  • No arrow buttons (swipe is intuitive)

Mobile-specific adjustments:

  • 2 products visible (or 1.5 for hint)
  • Larger touch targets on products
  • Remove hover-only features (Quick View)
  • Faster scroll animations (200-300ms)

Performance on mobile:

  • Lazy load off-screen products
  • Smaller image sizes
  • Limit initial products loaded (8-10)
  • Load more on scroll

Performance

Lazy loading (critical):

  • Only load visible products initially
  • Load adjacent products (left/right) on demand
  • Significantly improves page load time
  • Use Intersection Observer API

Image optimization:

  • Responsive images (smaller for mobile)
  • WebP format with fallback
  • Lazy load off-screen images
  • Optimized thumbnails (<300KB)

Limit slider length:

  • Max 20-30 products per slider
  • "View All" link to full category page
  • Improves performance
  • Prevents endless scrolling

Checklist

Essential features:

  • 4-6 products visible (desktop), 2 (mobile)
  • Arrow navigation (desktop)
  • Swipe gesture (mobile)
  • Product cards with image, title, price
  • Responsive product count
  • Smooth scroll transitions (300-400ms)
  • Snap to product alignment
  • Lazy load off-screen products
  • "View All" link if many products (>20)
  • Disable arrows at start/end
  • Keyboard accessible (Tab through products)
  • Mobile: No arrows, swipe only
  • Optimized images (<300KB)
  • Spacing between products (16-24px)
  • ARIA labels on navigation (aria-label="Previous products")
  • role="region" on slider container
  • NO auto-play for product sliders
Reference in New Issue View Git Blame Copy Permalink