Quick View Modal

The Quick View modal lets customers preview products without leaving collection pages. It features AJAX product loading, full variant selection, image galleries, and WCAG 2.1 AA accessibility compliance.

Features

• AJAX Product Loading — Loads product data via Shopify Product API
• Variant Selection — Full support for product options with live updates
• Image Gallery — Responsive gallery with thumbnails and keyboard navigation
• Add to Cart — AJAX cart integration with loading states
• Accessibility — Focus trap, screen reader support, keyboard navigation
• Mobile Responsive — Full-screen modal on small devices
• Image Zoom — Hover zoom effect on desktop

Configuration

Navigate to Theme Settings > Quick View to configure:

Setting	Default	Description
Enable Quick View	true	Enable/disable functionality
Trigger Method	button	Button, Hover, or Both
Show Vendor	true	Display product vendor
Show Description	true	Display product description
Show Quantity Selector	true	Allow quantity selection
Show View Details Link	true	Link to full product page

Trigger Options

• Button: Click “Quick View” button on product card (safest option)
• Hover: Automatic on product card hover (faster but can be aggressive)
• Both: Button or hover triggers the modal

Adding Quick View to Product Cards

The quick view trigger is included in the product card snippet:

<div class="product-card-actions">
  {% render 'quick-view-trigger', product: product %}
</div>

Icon-only button variant:

{% render 'quick-view-trigger',
  product: product,
  icon_only: true,
  button_class: 'absolute top-4 right-4'
%}

Modal Features

• Image Gallery — Browse product images with thumbnails
• Variant Selection — Choose size, color, etc.
• Add to Cart — Direct add with quantity selection
• View Details — Link to the full product page
• Body Scroll Lock — Prevents background scrolling when open

Best Practices

• Content: Show enough info for a purchase decision
• Performance: Images lazy load for speed
• Mobile: Automatically adapts to full-screen on mobile
• Accessibility: Full keyboard navigation (ESC to close, arrow keys for images) and screen reader support