CRO Manifesto
guideline #
86

Make Image Navigation Obvious

context

If users don't realize they can scroll through your product images, they may miss key details that could drive a purchase. A lack of clear navigation cues can lead to frustration and lost conversions.

Why?

Adding visible carousel dots, arrows, or image thumbnails signals that more images are available. This encourages users to explore further, get a complete understanding of the product, and make informed buying decisions. Clear navigation removes guesswork and keeps users engaged.

Content
  • Your product pages have multiple images but conversion rates are below 3% with high bounce rates on mobile
  • Google Analytics shows users spending less than 30 seconds on product pages or low scroll depth percentages
  • You're seeing "Add to Cart" rates below 15% despite decent traffic to product pages
  • Your store has products that require multiple angles or detail shots to showcase features effectively
  • You're using Shopify, WooCommerce, or similar platforms with customizable product image galleries

Focus on making image navigation unmistakably clear across all devices.

  1. Add visible navigation elements: Install carousel dots below images (8-12px diameter, 16px spacing) and arrow buttons (minimum 44px touch targets for mobile). For Shopify, modify your product-form.liquid template or use apps like "Product Image Zoom" or "Magic Zoom Plus".
  2. Include thumbnail navigation: Display 3-5 thumbnail images below or beside the main image (80px x 80px minimum on mobile, 120px x 120px on desktop). Ensure active thumbnails have clear visual indicators like borders or opacity changes.
  3. Implement swipe gestures: Enable touch swipe functionality for mobile users. Most modern themes support this, but verify in your theme's product.js file or product template settings.
  4. Add progress indicators: Show "Image 2 of 6" text or a progress bar. This can be added via custom CSS in your theme's stylesheet or through your product gallery app settings.
  5. Optimize for mobile-first: Ensure navigation elements are at least 44px for finger taps and positioned where thumbs naturally rest (bottom third of screen).

Timeline: 2-3 hours for theme modifications, 4-6 hours for custom implementations.

  • Image engagement rate: Track users who view 3+ product images (target: 45-60% improvement within 2-3 weeks)
  • Time on product page: Monitor average session duration increases (expect 20-35% improvement)
  • Add-to-cart conversion rate: Measure product page conversion lift (typical improvement: 8-15%)
  • Bounce rate reduction: Track decreased exits from product pages (aim for 10-25% reduction)
  • AVOID: Making navigation elements too small (under 32px) or using low-contrast colors that blend into backgrounds
  • BEST PRACTICE: Use high-contrast colors and ensure minimum 44px touch targets for all interactive elements
  • AVOID: Auto-advancing carousels that move faster than users can process images (under 5 seconds per slide)
  • BEST PRACTICE: Let users control image progression completely or use 8+ second intervals if auto-advance is necessary
  • AVOID: Hiding navigation on the first few images - users won't know more content exists
  • BEST PRACTICE: Always show navigation elements, even on single-image products, to establish consistent user expectations
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