> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/quickview.md). # Quickview **Quickview** shows a product in a popup on top of the page the shopper is already on, so they can look at the media, choose a variant, and add to cart without opening the product page. It was built for products with multiple variants, where shoppers often want to check size or color before committing to a click. Because you choose which blocks appear inside it, the popup can stay minimal or carry price, rating, highlights, and more. Use it to shorten the path from a collection page to the cart, especially on mobile where every extra page load costs you shoppers.
### Where to find it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. In the left sidebar, open the **Overlay** group and click **Quickview**. 3. Set the media options in the section settings. 4. Add, remove, or reorder the blocks that make up the popup content. {% endhint %} *Result:* the quickview popup opens with the blocks you added, in the order you set. ### Section setting This section allows you to customize the quickview popup.
| Setting | Description | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Enable lightbox** | Lets shoppers click a photo to see it full size, which matters for products where fabric, finish, or fine detail decides the sale. | | **Enable video looping** | Restarts a product video the moment it ends, so a short clip keeps running while the shopper reads the rest of the popup. | | **Enable video autoplay** |

Starts the video as soon as the popup opens, so shoppers see the product moving without having to press play.

Note: Videos are muted automatically to allow autoplay. Won't work for YouTube/Vimeo.

| | **Enable video controls custom** |

Uses the theme's own play and progress controls instead of the browser default set, so the player matches the rest of the popup.

Note: Doesn't work for YouTube/Vimeo.

| ### Block In the **Quickview** settings, you can add various content blocks to customize the appearance and functionality of the Quickview feature. Add only what a shopper needs to decide, and keep the popup short enough to read without scrolling. * **Accordion row:** A panel shoppers open only if they want it, for detail that would otherwise crowd the popup: sizing, shipping, care instructions, or common questions. * **Ask a question:** A short form so a shopper who is nearly convinced can ask you before closing the popup. * **Badges:** The small labels that mark an item out, such as a sale or status tag. * **Buy buttons:** Add to cart plus the express checkout buttons, which is what turns the popup from a preview into a place to buy. * **Custom Liquid:** Your own Liquid or HTML, for anything the other blocks do not cover, such as an app snippet. * **Description:** The copy written for this product in your Shopify admin. It can run long, so consider an accordion row instead when it does. * **Highlights:** Two or three benefit lines with icons, for the reasons a shopper picks this item over a similar one. * **Icon with text:** An icon beside a short line, useful for reassurances such as free returns or a warranty. * **Inventory status:** How much stock is left, which adds urgency when the number is low. * **Price:** What the item costs, usually the first thing a shopper looks for once the popup opens. * **Product meta:** Reference details such as SKU, type, collections, and tags, for shoppers who buy by code or specification. * **Product rating:** The star rating for this item, which reassures shoppers who do not know your store yet. * **Product title:** The name of the item, so it is clear which one the popup opened. * **Promotion alert:** A highlighted line about a running offer, such as a limited time deal. * **Promotion countdown:** A timer running down to the end of an offer, which pushes undecided shoppers to act now. * **Text:** A free rich text area for anything you want to say here that no other block covers. * **Variant picker:** The size, color, and other option choices. This is the block that makes the popup worth opening, since most shoppers must pick a variant before they can buy. ### What changes on the storefront * Shoppers can pick a variant and add to cart from the collection page, then keep browsing. * The blocks you enable are what shoppers judge the product by, so price, variant picker, and buy buttons are the ones worth keeping. ### Related pages * [Overlay group](/velare/customize-your-pages/overlay-group.md): the other panels and popups * [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md): what opens after a shopper adds to cart from quickview * [Product cards](/velare/customize-your-pages/product-cards.md): how product cards look across the store --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/quickview.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.