How to enable and set up quick view?

Enable quick view feature

By following these steps below, you activate the quick view feature and a 'plus' button will be visible on the product card.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Click Theme settings at the bottom left of the window.
4. Open the Quick view heading and check the  Enable quick view feature.

Customizing quick view modal

Quick view always displays in a pop up and reflects the product page. Therefore, you can also customize the quick view just like a product template.

To customize the product modal template:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select Products > modal to load the product modal template in the theme editor.
5. Please note that you can only customize the blocks within the Product information section. Other sections added via +Add section button are invalid.
6. Click Save.

Product information section settings

Setting	Description
Hide other variants' media after selecting a variant	When a variant is selected, images of other variants are hidden from view. Images reappear when variant is deselected.
Enable video looping	Sets the video to play on a loop, so that the video will replay automatically when it finishes.
Zoom image to fill space on desktop	The image is zoomed to adapt the height of the pop up.
Mobile image ratio	The image ratio for the product images on mobile: Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped. Square - Crops the images to use a 1:1 ratio. Portrait - Crops the images to use a 2:3 ratio. Landscape - Crops the images to use a 3:2 ratio. Wide - Crops the images to use a 16:9 ratio. Adapt to first image (default) - Uses the aspect ratio of the first image for all the rest.

Product information blocks

The following blocks can be added to the Product information section.

Text block

The text block can be used to display static text or variable data using dynamic sources. For example, you could add text displaying a marketing message, such as "Free shipping over $100 USD", which would display the same on each product. You could also add a dynamic source, such as the product's Vendor field, which would change depending on which product is being viewed.

Setting	Description
Text	Adds information to the product page. Supports text or dynamic sources.
Text style	Changes the style of the text: Body - Changes the text to paragraph-style text. Subtitle - Changes the text to subtitle text, which is slightly larger than paragraph-style text. Uppercase - Changes the text to be smaller than paragraph-style text, and puts all characters in caps.

Title block

This block displays the product's title.

Setting	Description
Title size	The size of the product's title: Small Medium Large

Price block

This block displays the product's pricing information, such as price and compare at price. It has no adjustable settings.

Variant picker block

This block displays any variant options for the product.

Setting	Description
Show variant labels	Displays the variants labels of the product.
Type	Changes how the variants are displayed to customers: Button - Displays the variants as clickable buttons. Dropdown - Displays the variants in an expandable drop-down menu.
Enable color swatches	Displays color selection in swatches. This section only applies if Type is set to Button.
Swatch type	The swatches appearance. This section only applies if Type is set to Button. Round Square
Size chart page	If you sell clothing items that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. Here's to choose your page that represents size chart content. If a product is eligible, a size chart button should display along with the Size option. When clicked, it opens a popup containing the page's content. For more info about size chart, please check this article.

Buy buttons block

This block displays the "Add to cart" button and any in-store pickup information. It can also show any dynamic checkout buttons.

Setting	Description
Show quantity selector	Displays a quantity selector that customers can use to change how many units of the product that they want to purchase. The default quantity is 1.
Show dynamic checkout buttons	Displays any dynamic checkout options that you have enabled in your Payments settings.

Description block

This block displays the product's description. It has no adjustable settings.

Inventory status block

Displays a message that timely informs customers about product stock status

Setting	Description
Low inventory threshold	Allows you set a value that the product stock must be at least for the message to be visible. Must be an even number. Minimum: 0. Maximum: 20. The default is 10.
Show inventory transfer notice	If you have multiple locations for your store, this will displays transfer message about the date regarding shipping or stock status.

Product rating block

This block displays the average product rating in stars, with the number of reviews in parenthesis, for example: ★★★★★ (8).

Displaying product ratings requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

Share block

This block allows customers share the product on their social media. It has no adjustable settings.

Custom Liquid block

This block displays custom Liquid or HTML code that you can add to the block.

Setting	Description
Custom Liquid	Displays content that you can enter as Liquid or HTML code.

Collapsible tab block

This block displays a collapsible tab with a title. When a customer clicks the title, the tab expands to display additional content.

The settings for the collapsible tab block in the product information section

Setting	Description
Icon	Choose a pre-made SVG icon that accommodates your collapsible tab. The None option will disable the icon.
Heading	The title of the tab. Displays when collapsed and expanded.
Tab content	The content of the tab. Displays only when the tab is expanded.
Tab content from page	Displays content from a page in the tab. Displays only the page content from the page editor, no Liquid styling from the page's template displays in this block. Any content entered in Tab content displays above the page content.

Pop-up block

This block displays clickable text that opens a pop-up window when clicked. This pop-up displays content from one of your pages.

The settings for the pop-up block in the product information section

Setting	Description
Icon	Choose a pre-made SVG icon that accommodates your popup. The None option will disable the icon.
Link label	The clickable text that customers click to display the pop-up window.
Page	The page you want to display content from in the pop-up window. Displays only the page content from the page editor. The pop-up doesn't display any Liquid styling from the page template.

Empty space block

This block adds a blank space, which is particularly useful when you want to slightly modify the layout.

Setting	Description
Desktop height	The height of the space on desktop. Can be any multiple of 4, from 0 to 200. The default is 28.
Mobile height	The height of the space on mobile. Can be any multiple of 4, from 0 to 200. The default is 20.