Quick view template

The Quick view template of Combine builds the popup that opens from the quick buy button, with its own gallery settings and product blocks.

Applies to: Combine 4.2.0 and later. Added in: Combine 2.5.0. Last checked: 2026-10-13 against Combine 4.2.0.

The Quick view template builds the product window that opens over the page when a customer selects quick buy on a product with variants. It has one section, Quick view, with its own gallery settings and product blocks. Only this section appears in the window.

Where to find it: Online Store → Themes → Customize → template picker → Products → quick-view → Quick view.

When the quick view opens

The quick view window opens from:

the Quick buy block of a product grid with Options display type set to Modal (on click). See Product grid blocks.
the Quick buy button block of the flex sections, for products with variants,
the quick buy buttons of the Shoppable videos section and of the cart recommendations.

Products without variants are added to the cart directly, without the window. The Quick buy popup in Theme settings → Product card is something else: the short message shown after an add to cart. See Product card theme settings.

Window and gallery

Border radius rounds the corners of the window, from 0 to 50 px.
The gallery is a slider. Mobile media width and Add padding to the gallery on mobile set its width on mobile.
Media aspect ratio crops the images to one shape. Fit images inside container shows them whole instead, with Gallery inner spacing, Gallery background and Gallery border around them.
Media border radius rounds the image corners. Show thumbnails adds thumbnails.
Enable video looping, Enable video autoplay (muted, without controls) and Fill videos to match the aspect ratio of the images work as on the product page.

Functionality

Select the first available variant by default selects a variant when the window opens. Turn it off to make customers choose a variant first.

This setting is separate from the product page one: set both if you want the same behaviour.

Quick view blocks

The blocks set what the window shows, in their order. The template starts with Title, Price, Variant picker, Buy buttons and Description. The blocks work like the product page blocks of the same name, described on Product page:

Product information blocks: Vendor, Title, Price, Product badges, Tax information, SKU / barcode, Description, Product rating, Text, Divider, Image, Custom HTML / Liquid.
Variant and buy blocks: Variant picker, Buy buttons, Inventory level, Pickup availability, Back in stock alert, Custom property, Product siblings, Variant metafield.
Information blocks: Collapsible tab, Icons list, Coupon code, Disclosures.
App blocks from your apps.

The quick view has no Share, Size guide, Products list, Cross selling product, Product promotion or Complementary products block. Customers find those on the product page.

The Variant picker of the quick view has its own Variants style, Show color swatches and Metaobject swatch metafields. Set them here too, so that the window matches the product page. See Color swatches.

Setting up the quick view

In each product grid section (for example Collections → Default collection → Product grid), select the Quick buy block and set Options display type to Modal (on click).

Open the quick view template

In the template picker, select Products → quick-view and select the Quick view section.

Choose the blocks

Add, remove and order the blocks. Keep the Variant picker and the Buy buttons, so that customers can buy from the window.

Test it

Open a collection page on the storefront and select quick buy on a product with variants.

Why does quick buy add the product without opening the window?

Because the product has no variants, or the Quick buy block is set to Inline. Products with a single variant are added to the cart directly. Set Options display type to Modal (on click) to open the window for products with variants.

Why do some products show "Sold out" instead of quick buy?

Because they are sold out in every variant. The quick view does not open for them: the Quick buy block shows a disabled "Sold out" button, or nothing when Don't show quick buy if product is out of stock is on.

All Quick view settings

Every setting of this section, with its type and default.

Accepts these blocks: Coupon code, Disclosures, Divider, Text, Vendor, Product badges, Title, Price, Tax information, SKU / barcode, Variant picker, Back in stock alert, Product siblings, Custom property, Buy buttons, Inventory level, Description, Product rating, Collapsible tab, Pickup availability, Icons list, Custom HTML / Liquid, Image, Variant metafield and app blocks.

This template controls how the product quick view is built. Only this section will appear in the modal window.

Border radius (slider 0 to 50 px, default: 10 px): Rounds the corners of the quick view window.

Quick view section: Product gallery

Where to find it: Products → quick-view → Quick view → Product gallery

Mobile media width (slider 80 to 100, step 5, default: 80): Sets the width of each slide on mobile, in percent of the window. Below 100, the next image peeks in.

Add padding to the gallery on mobile (checkbox, default: off): Adds space on the sides of the gallery on mobile.

Media aspect ratio (dropdown, default: Cropped: Square (1:1)): Sets the shape every image is cropped to, unless Fit images inside container is on. Options: Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).

Fit images inside container (checkbox, default: off): Shows each image whole inside the aspect ratio box instead of cropping it.

Gallery inner spacing (slider 0 to 15 %, default: 0 %): Adds space between the image and the edge of its box, in percent.

Gallery background (color, default: transparent): Only visible if the images are set to fit inside the container.

Gallery border (color, default: transparent): Draws a border around each gallery item. Transparent shows none.

Media border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the gallery images.

Show thumbnails (checkbox, default: off): Adds a row of thumbnails under the gallery.

Enable video looping (checkbox, default: off): Plays product videos in a loop.

Enable video autoplay (checkbox, default: off): The video will be muted and without controls.

Fill videos to match the aspect ratio of the images (checkbox, default: off): Crops product videos to the gallery aspect ratio, so they match the images.

Quick view section: Functionality

Where to find it: Products → quick-view → Quick view → Functionality

Select the first available variant by default (checkbox, default: on): Selects the first available variant when the quick view opens. When off, customers must choose a variant before the add to cart button works. Separate from the product page setting.

Coupon code block

Where to find it: Products → quick-view → Quick view → Add block → Coupon code

Code (text field, default: "SAVE10"): The discount code customers copy with one click. Create the same code in Shopify admin → Discounts: the block only shows it.

Caption (text field): Sets a short line shown with the code, for example the offer.

Link label (text field).

Link (link). Shown only when Link label is set.

Open link in a new window (checkbox, default: off). Shown only when Link label is set.

Coupon code block: Custom colors

Where to find it: Products → quick-view → Quick view → Add block → Coupon code → Custom colors

Custom text color (color, default: transparent).

Custom background color (color, default: transparent).

Disclosures block

Where to find it: Products → quick-view → Quick view → Add block → Disclosures

Displays the disclosures attached to this product through Shopify's Product Disclosures. Shopify Help Center.

Title (text field, default: "Disclosures"): Sets the title above the product disclosures from Shopify's product disclosures.

Product disclosures can be configured with metafields at product level.

Divider block

Where to find it: Products → quick-view → Quick view → Add block → Divider

Height (slider 1 to 10 px, default: 1 px).

Divider block: Divider Design

Where to find it: Products → quick-view → Quick view → Add block → Divider → Divider Design

Color (color, default: rgba(0,0,0,1)).

Style (dropdown, default: Solid). Options: Solid, Dotted, Dashed, Double.

Text block

Where to find it: Products → quick-view → Quick view → Add block → Text

Text (rich text, default: "Text block").

Text size (dropdown, default: Regular). Options: Small, Regular, Large.

Text style (dropdown, default: Regular): Sets the text shade: Regular uses the text color, Opacity a lighter one. Options: Regular, Opacity.

Text color (color, default: transparent).

Text transform (uppercase) (checkbox, default: off).

Vendor block

Where to find it: Products → quick-view → Quick view → Add block → Vendor

One Vendor block per section.

The Vendor block has no settings in Combine 4.2.0.

Product badges block

Where to find it: Products → quick-view → Quick view → Add block → Product badges

One Product badges block per section.

The Product badges block has no settings in Combine 4.2.0.

Title block

Where to find it: Products → quick-view → Quick view → Add block → Title

One Title block per section.

The Title block has no settings in Combine 4.2.0.

Price block

Where to find it: Products → quick-view → Quick view → Add block → Price

One Price block per section.

The Price block has no settings in Combine 4.2.0.

Tax information block

Where to find it: Products → quick-view → Quick view → Add block → Tax information

One Tax information block per section.

Open links in (dropdown, default: Popup): Sets how the shipping policy link opens: in a popup over the page, in the same window or in a new window. Options: Popup, Same window, New window.

SKU / barcode block

Where to find it: Products → quick-view → Quick view → Add block → SKU / barcode

One SKU / barcode block per section.

The SKU / barcode block has no settings in Combine 4.2.0.

Variant picker block

Where to find it: Products → quick-view → Quick view → Add block → Variant picker

One Variant picker block per section.

Variant picker block: Design

Where to find it: Products → quick-view → Quick view → Add block → Variant picker → Design

Title (text field, default: "Choose variants"): Sets the line shown above the product options.

Variants style (radio buttons, default: Blocks): Shows the option values as buttons (Blocks) or as a dropdown list. Options: Blocks, Dropdown.

Show variant labels (checkbox, default: on): Shows the option names, for example Size, above the values.

Show color swatches (checkbox, default: on): Shows color options as round swatches. Which options count as colors is set in Theme settings → Product card → Product variants → Color swatches labels.

This theme also offers support for color swatches created with category metafields. Shopify Help Center.

Metaobject swatch metafields (text field): Product metafields (list of metaobject entries) whose entries add an image or a color next to matching option values, typed as namespace.key and separated by commas. The entry label must match the option value exactly. Blocks style only.

Container background (dropdown, default: Primary): Sets the background of the variant picker box. Options: Primary, Secondary, No background.

Variant picker block: Functionality

Where to find it: Products → quick-view → Quick view → Add block → Variant picker → Functionality

Handle unavailable variants (dropdown, default: Show): Sets what sold out variants do: Show keeps them selectable, Disable greys them out, Hide removes them. Options: Disable, Hide, Show.

Back in stock alert block

Where to find it: Products → quick-view → Quick view → Add block → Back in stock alert

One Back in stock alert block per section.

This back in stock alert form will show up when the product is out of stock.

Store owner will receive an email when a customer fills in this form. Store owner must manually notify the customer once the product is back in stock.

Text (formatted text, default: "Enter your email address below to be notified when this product is back in stock."): Sets the text above the email field. The form shows only when the selected variant is sold out.

Button label (text field, default: "Notify me").

Success message (text field, default: "Thanks! We will notify you when this product becomes available!"): Sets the message customers see after they send the form.

Email message (text field, default: "I would like to be notified when this product is back in stock."): Sets the line of the email you receive through Shopify's contact form, with the customer's email address.

Product siblings block

Where to find it: Products → quick-view → Quick view → Add block → Product siblings

To assign a different list to each product, use a product reference list metafield as a dynamic source. See Product page.

Heading (text field, default: "Sibling products"): Sets the title above the sibling thumbnails.

Products (products picker): The products shown as siblings. Connect a product list metafield as a dynamic source to show a different list on each product, the product itself included.

Media aspect ratio (dropdown, default: Square (1:1)): Sets the shape of the sibling thumbnails. Options: Short (4:3), Square (1:1), Tall (5:6), Taller (2:3).

Container background (dropdown, default: Primary). Options: Primary, Secondary, No background.

Reduce opacity for unavailable products (checkbox, default: off): Fades the thumbnails of sold out siblings.

Custom property block

Where to find it: Products → quick-view → Quick view → Add block → Custom property

Line item properties allow you to gather customization details for a product added to the cart.

Label (text field, default: "Custom property"): Sets the field name shown to customers and saved with the cart line and the order.

Type (dropdown, default: Text): Sets the kind of field: a text field, a checkbox or a dropdown. Options: Text, Checkbox, Dropdown.

Required (checkbox, default: off): Makes customers fill the field before they can add the product to the cart.

Hide at checkout (checkbox, default: off): Keeps the value out of the checkout order summary (the property name gets a leading underscore).

Custom property block: Text property settings

Where to find it: Products → quick-view → Quick view → Add block → Custom property → Text property settings

Allow long text (checkbox, default: off): Shows a multi-line text area instead of a one-line field.

Maximum characters (number): Sets the maximum number of characters customers can type.

Custom property block: Checkbox property settings

Where to find it: Products → quick-view → Quick view → Add block → Custom property → Checkbox property settings

Value (text field, default: "Yes"): Sets the word saved on the order when the checkbox is ticked.

Where to find it: Products → quick-view → Quick view → Add block → Custom property → Dropdown property settings

Values (text field, default: "Value 1,Value 2,Value 3"): The dropdown choices, separated by commas.

Default value (checkbox, default: on): When checked, no value is selected in advance: the dropdown shows "----" until the customer chooses.

Buy buttons block

Where to find it: Products → quick-view → Quick view → Add block → Buy buttons

One Buy buttons block per section.

Show quantity selector (checkbox, default: on): Adds a quantity field next to the add to cart button.

Show "pre-order" button label (checkbox, default: off): Changes the add to cart button text to "Pre-Order". It is a label only: overselling is set per product in Shopify admin.

Show dynamic checkout buttons (checkbox, default: on): Adds Shopify's express checkout buttons, for example Shop Pay or PayPal. Shopify builds them and their look cannot be changed in the theme.

Show recipient information form for gift card products (checkbox, default: off): Adds a form on gift card products to send the card to a recipient, with a name, a message and a send date. The dynamic checkout buttons are then hidden on those products.

Buy buttons block: Price

Where to find it: Products → quick-view → Quick view → Add block → Buy buttons → Price

Show price (checkbox, default: on): Shows a price box with the saving above the add to cart button.

Container background (dropdown, default: Primary): Sets the background of the price box. Options: Primary, Secondary, No background.

Buy buttons block: Custom colors

Where to find it: Products → quick-view → Quick view → Add block → Buy buttons → Custom colors

Background (color, default: transparent): Sets the background color of the add to cart button. The text turns light or dark to stay readable.

Inventory level block

Where to find it: Products → quick-view → Quick view → Add block → Inventory level

One Inventory level block per section.

Inventory notification (dropdown, default: Display always): Shows the stock of the selected variant always, or only when it falls below the threshold. Inventory tracking must be on for the variants. Options: Display always, Display only when inventory falls below threshold.

Low inventory threshold (slider 1 to 20, default: 5): Sets the stock level below which the low stock message shows.

Show progress bar (checkbox, default: on): Adds a bar under the stock message.

Description block

Where to find it: Products → quick-view → Quick view → Add block → Description

One Description block per section.

Truncate description (dropdown, default: Truncate: Show a small excerpt): Shows the whole description, or a short, medium or long plain excerpt. Options: Don't truncate, Truncate: Show a small excerpt, Truncate: Show a medium excerpt, Truncate: Show a large excerpt. Shown only when Collapsible is off.

Collapsible (checkbox, default: off): Puts the whole description inside a toggle, with the title below. Shown only when Truncate description is Don't truncate.

Title (text field, default: "Description"). Shown only when Collapsible is on.

Product rating block

Where to find it: Products → quick-view → Quick view → Add block → Product rating

One Product rating block per section.

To display ratings, add a product rating app. Learn more.

Collapsible tab block

Where to find it: Products → quick-view → Quick view → Add block → Collapsible tab

Heading (text field, default: "Collapsible tab"): Include a heading that explains the content.

Tab content (rich text, default: "Write relevant information about your products here."): Sets the text of the tab. It shows together with the page content and the image.

Tab content from page (page picker): Adds the content of a page to the tab, for example a shipping page.

Tab image (image): Adds an image under the tab content.

Collapsible tab block: Dynamic content

Where to find it: Products → quick-view → Quick view → Add block → Collapsible tab → Dynamic content

Hide block if dynamic content is not present (checkbox, default: off): Hides the tab when it has no text, no page and no image, for example when its dynamic source is empty on a product.

Pickup availability block

Where to find it: Products → quick-view → Quick view → Add block → Pickup availability

One Pickup availability block per section.

The Pickup availability block has no settings in Combine 4.2.0.

Icons list block

Where to find it: Products → quick-view → Quick view → Add block → Icons list

Up to 2 Icons list blocks per section.

Title (text field, default: "Icons list"): Sets the title above the icons.

Use dynamic sources to highlight unique attributes by creating product metafields for the icon list.