Quick view
The panel that opens from a product card's quick-view button. Keep it to the essentials: media, variants, price and add to cart.
Good for
- Letting shoppers choose a variant and add to cart without leaving a collection page
Section settings
| Product | A product to preview the quick view with while you edit it in the theme editor.
Preview only. Shoppers always see the product they open. |
Image
| Desktop image ratio | Image crop shape on desktop.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. |
| Mobile image ratio | Image crop shape on mobile.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. |
| Image fit | Cover fills the frame and crops the overflow; Contain fits the whole image inside the frame and may leave space at the edges.
Applies to desktop and mobile. Choose Cover (default) or Contain. |
| Image background color | Fills the space around an image when it is fitted rather than cropped. It's most visible with product shots on transparent backgrounds.
Only appears when Image fit is Contain. |
Thumbnail image
| Image ratio | Crop shape of the gallery thumbnails.
Choose Portrait (3:4) (default), Landscape (4:3), Square (1:1) or Adapt to image. |
| Image fit | Whether thumbnails are cropped to fill their frame or fitted inside it.
Applies to desktop and mobile. Choose Cover (default) or Contain. |
| Image background color | Fills the space around fitted thumbnail images.
Only appears when Image fit is Contain. |
Badges
| Enable badges | Shows sale and stock badges on product cards. Badge text and colors are set in Theme settings → Product badges.
Off by default. |
Features
| Enable video looping | Restarts the video when it reaches the end.
Off by default. |
| Enable video autoplay | Starts the video as soon as it is in view. Autoplaying video is always muted, because browsers block sound without a click.
Off by default. |
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
The quick view uses the same product blocks as the product page: Title, Product metadata, Price, Description, Variant picker, Payment icons, Stock alert, Buy buttons, Gift wrap, Rating, Custom Liquid and Divider, plus app blocks. Their settings work the same way here, as described on the Product page.
Tips
- Keep the blocks short. Quick view is for a fast decision. Title, price, variant picker and buy buttons are usually enough, and shoppers can open the full page for the rest.
- The blocks apply to every product. You set up quick view once here, and it fills in with whichever product the shopper opens.
Troubleshooting
The quick view button isn't showing on product cards
The button must be on for the device you're testing in Theme settings → Product card, under Enable on desktop and Enable on mobile.