Quick view
Quick view lets a shopper open a product in a modal straight from a card in any listing (collection grid, featured products, search results) without leaving the page. It is controlled in the global Product cards panel under Theme settings, so it applies to every product card across your store unless a listing overrides it.
What the shopper sees
When quick view is on, each product card shows two round action buttons on hover. The eye icon opens quick view. The bag icon adds the item to the cart.
Inside the quick view modal the shopper can:
- See the product's media gallery and its info column, as your product template builds them.
- Switch variants (for example a size or a flavor).
- Add the item to the cart. The modal closes once the item is added.
- Open the full product page with the View full details link at the top of the modal.
The modal loads the real product page and shows its Product information section, so variant switching and add to cart behave the way they do on the full page. A few parts are left out because they do not belong in a modal: the section's Header region, Sticky add to cart, Product features, Complementary products, any pop-up blocks, and the click-to-enlarge lightbox. To check every detail, the shopper follows View full details.
Turn it on
- In the theme editor, open Theme settings (the gear icon at the bottom of the left panel).
- Open the Product cards panel.
- Find the Quick add heading.
- Turn on Show quick add button.
Settings
These controls sit under the Quick add heading in the Product cards panel.
- Show quick add button: Shows the action buttons (quick view and add to cart) on every product card. Turn it off to hide both buttons. This is on by default.
- Show quick add on mobile: Shows the action buttons on phones and small screens too. By default the buttons appear only on larger screens, where shoppers hover. This control appears only when Show quick add button is on, and is off by default.
Override it on one listing
The two settings above are store wide. To change them for a single listing, select the Product card block inside that section, turn off Inherit global theme settings, and the same Show quick add button and Show quick add on mobile controls appear on the card itself. Only that section's cards follow them. See Product cards.
Tips
- The same Show quick add button setting controls both the quick view eye button and the add to cart bag button. There is no separate toggle for quick view alone.
- If a variant is sold out, the add to cart button on the card is disabled for that variant. The shopper can still open quick view to pick an available variant.
- Because the modal reads the product template, anything you add to the info column shows up in quick view too. Keep that column short enough to read in a modal.