- Docs
- Guides
Guide
Quick view & quick add
Let visitors look at a product and add it to their cart from any product card, without leaving the page.
Turn them on or off#
- In the theme editor, open Theme settings > Product cards.
- Use Quick view and Quick add. Both are on by default.
The buttons appear on every product card: collection pages, featured collections, the scrolling product row, product recommendations and search results.
What the + button does#
| The product… | Clicking + |
|---|---|
| has a single variant | Adds it to the cart straight away. The + turns into a spinner, then a check mark, and the cart drawer opens. |
| has options (color, size…) | Opens the quick view panel on Select options. |
| requires a subscription, or is a gift card | Opens the quick view panel, which leads to the product page for the details these need. |
| is sold out | No + button is shown. |
The quick view panel#
The panel is a pane of liquid glass with the page blurred behind it. It shows a summary of the product page:
- a strip of square photos to swipe;
- the title, price and tax mention, and the start of the description;
- the same color swatches, quantity selector, subscription options and Add to cart button as the product page;
- a View full details link to the product page.
Choosing a color updates the price and brings that color’s photo into view. The panel respects the stock limit and shows Shopify’s messages when an item can’t be added. After a successful add, the panel closes and the cart drawer opens.
The panel loads only when a visitor opens it, so it adds nothing to the page’s loading time. It closes with Esc, keeps the keyboard inside while open, and returns focus to the card afterwards.