Quick view

Quick view shows a product in a pop-up window. The shopper sees the main image, the title, the price and the buy box, without leaving the page they are on. This guide explains what the feature does, how to open it, and what it needs.

What the shopper sees

• The main product image.
• The vendor name, the product title and the price.
• The variant choices and the quantity box, so the shopper can add the product to the cart.
• A View full details link that opens the product page.

Before you begin

• Each product needs at least one variant that you can sell.
• Each product needs a main image. The pop-up shows the featured image of the product.

Where the button appears

• Product cards (collection, search and home pages): a Quick view button sits in the bottom inline-end corner of the product image. On touch screens it is always visible as a small bordered label, 44 px high on phones. On a computer it appears when the shopper hovers over the card, or when the button gets keyboard focus.
• List view (the quick order table on collection pages): a Quick view text link appears after the product name on desktop screens only. Phones do not show it.
• Cards with no product, and the placeholder card, do not show the button.

Turn it off

In the theme editor, open Product cards and clear Show quick view button on product cards. The button then disappears from product cards and from the list view. The pop-up stays in the theme, so you can turn the button back on at any time.

The buttons also need Enable product compare to be on. The quick view pop-up is part of the compare dialog, which the theme loads only when compare is on. With compare off, no button is shown.

Add a button elsewhere

To give shoppers a quick view button outside the product cards, add a button or a link to a page. Use a Custom liquid section. Set the attribute data-quick-view to the product handle, for example data-quick-view="sample-product". The handle is the last part of the product address in the Shopify admin. When a shopper selects the button, the pop-up opens with that product.

Ask your developer to help if you are not sure how to write the attribute.

Check it

1. Open the page with the button.
2. Select the button. Confirm that the pop-up opens with the right product.
3. Choose a variant and check that the price changes.
4. Select View full details. Confirm that the product page opens.

Related guides

• Product cards and the buy buttons are in the product data guide.
• Compare uses a similar pop-up. See the specifications and compare guide.