Product modal accessible from collection cards. Add to cart without leaving the page. Performant cache.
Quick View
Quick View lets visitors browse essential product information and add to cart directly from a collection page, without navigating away. It is a powerful conversion tool that reduces purchase friction.
How it works
- The visitor browses a collection page
- They click the Quick View button on a product card (eye icon or dedicated button)
- A modal opens with the essential product information
- They can choose a variant, adjust the quantity, and add to cart
- The modal closes and the cart drawer opens with the added product
ℹ️Quick View loads the full product form inside a modal. The visitor has access to variants, price, a short description, and the purchase button without leaving the collection.
Modal content
The Quick View modal displays the following elements:
| Element | Description |
|---|---|
| Gallery | Product images (navigable slider) |
| Title | Product name (clickable link to the full page) |
| Price | Current and compare-at price |
| Variants | Variant selectors (based on product page config) |
| Quantity | Quantity selector |
| ATC button | Add to cart |
| Description | Short description (truncated) |
| Link | "View full details" link to the complete product page |
Settings
Activation
| Setting | Description | Options |
|---|---|---|
| Enable Quick View | Enable the feature | Yes / No |
| Trigger | How to open the Quick View | Button on the card / Eye icon / Hover |
Content
| Setting | Description | Options |
|---|---|---|
| Show description | Include the product description | Yes / No |
| Description length | Character count if shown | 100 - 500 |
| Show variants | Variant selectors | Yes / No |
| Show quantity | Quantity selector | Yes / No |
Appearance
| Setting | Description | Options |
|---|---|---|
| Modal size | Modal width | Medium / Large |
| Animation | Opening animation | Fade / Slide / Scale |
Performant cache
Quick View uses an intelligent caching system for optimal performance:
| Aspect | Detail |
|---|---|
| Strategy | Product data is cached in memory after the first load |
| Capacity | Up to 10 products cached simultaneously |
| Algorithm | LRU (Least Recently Used): the oldest entries are removed first |
| Invalidation | The cache is cleared on page change |
| First load | Fetch request to the product page (section rendering API) |
| Subsequent loads | Instant (from cache) |
💡The 10-product cache means that if a visitor opens Quick View for 10 different products, all 10 are stored in memory. The 11th will trigger a new fetch and remove the oldest from the cache. In practice, most visitors don't open more than 5-6 Quick Views per session.
Cart interaction
When the visitor adds a product from Quick View:
- The product is added to the cart via the AJAX API
- The Quick View modal closes automatically
- The cart drawer opens with the added product
- The header cart counter updates
- If upsells are configured in the cart, they are displayed
Accessibility
| Aspect | Implementation |
|---|---|
| Focus trap | Focus is trapped inside the modal when open |
| Escape to close | The Escape key closes the modal |
| Overlay close | Clicking outside the modal closes it |
| ARIA | role="dialog", aria-modal="true", aria-label |
| Focus return | Focus returns to the trigger button after closing |
Mobile behavior
On mobile, the Quick View modal adapts automatically:
| Aspect | Desktop | Mobile |
|---|---|---|
| Size | Centered modal (60-80% of the screen) | Fullscreen (bottom sheet) |
| Gallery | Slider with thumbnails | Slider with dots |
| Close | X button + Overlay + Escape | X button + Swipe down |
| Layout | 2 columns (image + info) | Stacked (image on top, info below) |
Best practices
- Enable it on collections: Quick View significantly reduces back-and-forth between collection and product pages
- Keep it simple: Only show the essentials (image, title, price, variants, ATC). Full details belong on the product page
- Link to the full page: Always include a "View details" link for visitors who want more information
- Test on mobile: The mobile Quick View should be as smooth as the product page itself
⚠️Quick View does not replace the product page. It is designed for fast purchases and simple products. For complex products (bundles, many variants, rich content), guide the visitor to the full product page.