Quick view

Every product card carries a Peek button. It opens a modal with the product’s images, options, price and an add-to-bag button — so a shopper can check a colour or grab a size without leaving the collection they’re browsing.

Turning it on

Theme settings → Quick view & wishlist

Setting	Type	Default	What it does
Enable quick view	Checkbox	On	The Peek button on cards, and the modal itself

When off, the modal markup isn’t rendered at all and the button doesn’t appear. There’s nothing else to configure.

The button is suppressed on sold-out cards, where there’d be nothing to do in the modal.

The product’s images — up to eight — with a thumbnail strip when there’s more than one
Product type as a kicker, then the title
Price, with a struck-through compare-at price on sale
One chip row per option, with colour options rendered as swatches
Add to bag, which becomes Sold out or Unavailable as the selection demands
View full details → to the real product page

What’s deliberately not there: the description, the accordions, the spec list, reviews, subscriptions. Quick view is a glance, not a second product page. A shopper who wants the detail has a link to it.

How it behaves

It opens immediately

The modal opens on the click with a skeleton — grey placeholder bars in the right shape — and fills in when /products/{handle}.js answers. It doesn’t wait for the round trip before appearing, so the click always produces an instant response even on a slow connection.

If the fetch fails, the modal closes and the shopper is sent to the full product page instead of being left looking at a skeleton.

Colour swatches

Colour chips in the modal resolve the same way they do on the product page: your own entries under Theme settings → Swatches first, then the theme’s built-in colour names, then grey for anything it cannot place. Which option names become swatches follows the same Swatch option names setting.

So a colour you define once is correct everywhere — card, product page and quick view — without being set up twice. See Colour swatches.

Subscriptions

If a product has selling plans, quick view carries the same One time / Subscribe choice as the product page — frequencies listed as rows when there are a few, and a dropdown once there are more. The price follows the plan, and the plan travels with the item into the cart.

A product that can only be subscribed to shows no One time option, because choosing it would fail at checkout.

Variant handling

Picking a chip re-prices the modal, re-enables or disables the button, and swaps the main image to that variant’s featured image when it has one.

Image matching normalises URLs — stripping Shopify’s size suffix, the query string and the protocol — so a variant image that’s already in the gallery selects the existing thumbnail rather than loading a second copy of the same file.

A product whose only option is Shopify’s implicit Default Title renders no chips at all and resolves straight to its single variant. (Without that special case, an in-stock single-variant product read “Unavailable” — there were no chips to match against.)

Adding to bag

The modal’s button goes through the same add-to-cart engine as everything else: the bag count updates, a toast confirms, the cart drawer re-renders, and the modal closes itself about a second later so the shopper can see what happened.

Accessibility

role="dialog" with aria-modal="true" and a label.
Focus moves to the close button when it opens.
Escape closes it; so does the backdrop.
Focus return is conditional. After a keyboard activation focus goes back to the Peek button that opened it, which is what a keyboard user needs. After a mouse click it doesn’t — the ring would just be a stray box on a card nobody is looking at. The theme distinguishes the two by the click event’s detail.
Page scroll is locked while open and released when it closes, through the theme’s counted scroll lock (see Performance and architecture).