> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/templates/quick-view.md). # Quick view Quick view is the pop-up that opens from a product card. It has its own template and its own short buy area. A shopper working through a collection page should not have to leave it to check a size or a colour. Quick view opens a pop-up straight from the product card — gallery, variant selector, Add to cart — so the decision is made in place and the browsing is never interrupted. It is a product template of its own holding a single **Quick view** section. Set it up once and every quick-view pop-up in the store changes with it. *** ### How to turn the button on {% stepper %} {% step %} #### Open the theme editor In Shopify admin go to **Online Store → Themes** and press **Customize**. {% endstep %} {% step %} #### Open a section with product cards A collection page, a featured collection, product recommendations, search results — anywhere products are shown as cards. {% endstep %} {% step %} #### Enable 'Quick view' button In the section's card settings turn on **Enable 'Quick view' button**. {% endstep %} {% endstepper %} {% hint style="info" %} The setting belongs to the section, not to the theme. Turn it on in every section where you want the button — a shopper who gets Quick view on the collection page and not in search results will read it as a bug. {% endhint %} *** ### How to edit the pop-up Use the page selector at the top of the editor and choose **Products → Quick view**. The editor shows the template as an ordinary page rather than as a pop-up, so check the result on a real collection page once you have saved. *** ### What it deliberately does not have A pop-up has to stay small and open fast, so the template is a trimmed version of the product page: * **No image zoom** and **no gallery size** — the pop-up sets its own width. * **No video autoplay**, and no sticky content. * **No sticky Add to cart bar.** * **Three gallery styles instead of five**: *Slider with arrows*, *Slider with thumbnails below* and *Slider with side thumbnails*. The grid styles are not offered, because a grid of images turns the pop-up into something that has to be scrolled. * **No Breadcrumbs, Ask a question, Pop-up, Icons with text or Video reels slideshow blocks.** *** ### The gallery What is left is the part that matters inside a pop-up: **Thumbnail ratio**, **Media ratio**, **Focal point**, **Corner radius**, **Swap gallery position**, **Follow the product media image order**, **Enable video looping** (on by default), **Disable video controls**, and **Mobile navigation** with *Arrows*, *Scrollbar* and *Thumbnails*. The three variant-media settings work as they do on the product page — **Show only media of selected variant**, **Show also general product media** and **Show the first image instead of the variant's**. {% hint style="warning" %} **Show only media of selected variant** needs the media attached to variants in the Shopify product first, otherwise the pop-up opens on an empty gallery. [Display only media related to chosen variant](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md) walks through the setup. {% endhint %} *** ### What the pop-up ships with Out of the box: a vendor **Subtitle**, **Title**, **Product rating**, a second **Subtitle**, a **Line** separator, **Price**, **Variant selector**, **Quantity selector**, **Buy buttons**, **Text** and **More details**. **More details** is a link to the full product page, and it is the one block worth protecting. It is the way out of the pop-up for a shopper who wants the description, the tabs and the reviews — without it the pop-up is a dead end. *** ### Blocks you can add The same library as the product page, minus the five listed above. The ones worth naming in 16.0.0: * **Product rating** — the theme draws the stars from Shopify's standard rating metafield; a review app writes the metafield. See [Product rating](/docs/avante-themes/features-and-advanced-setup/product-rating.md). * **Back in stock alert** — shown only when the selected variant is unavailable. It is a plain Shopify contact form: the request reaches your store's contact email, and the customer gets no automatic notification. * **Volume pricing** — quantity price breaks for B2B, hidden when the variant has none. * **SKU** and **Barcode (ISBN, UPC, etc.)**. * **Payment icons** — the methods already enabled in your store. In a pop-up they do real work, because the shopper is deciding without having seen your checkout. * **Related collections** — up to three links back into the catalogue, with **Main collection** picked on the block. * **Custom options** — all ten types, each with **Show for option value**. See [Custom options](/docs/avante-themes/features-and-advanced-setup/custom-options.md). * **Linked products** — separate products shown as if they were variants. See [Linked products](/docs/avante-themes/features-and-advanced-setup/linked-products.md). * Plus **Description**, **Stock level indicator**, **Pickup availability**, **Collapsible tab**, **Image**, **Share**, **Complementary products**, **Countdown timer**, **Line**, **Empty space**, **Custom Liquid** and app blocks. {% hint style="warning" %} Every block you add is height the pop-up has to find. A Description block with a long product description is the usual reason a Quick view window ends up needing a scrollbar of its own. {% endhint %} *** ### Best practices * Keep it to the decision: price, rating, variant selector, quantity, Add to cart, More details. Everything else belongs on the product page. * Give Custom options a hard look. A pop-up is the wrong place for a long engraving form — **Show for option value** helps, but the product page is usually the better home. * Test it on a phone first. The pop-up has the least room there, and that is where most of the traffic is. * If your products are judged by detail, pick *Slider with thumbnails below* so several images are visible at once. *** ### Related * [Default product](/docs/avante-themes/templates/default-product.md) * [Featured product](/docs/avante-themes/sections/products/featured-product.md) * [Product rating](/docs/avante-themes/features-and-advanced-setup/product-rating.md) * [Custom options](/docs/avante-themes/features-and-advanced-setup/custom-options.md) * [Display only media related to chosen variant](/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md) --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/templates/quick-view.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.