How to enable and set up quick view?

The quick view feature adds a button on product card that opens a popup displaying all the essential product details.

On this page

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 icon.
  4. Open the Product tiles heading and check the  Enable quick view feature.
  5. Click Save.

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
Show featured media by default Ensure that the first media file in the list appears by default on the product page.
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 image zoom Turn on the zoom feature.
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
Icon Choose between standard icons for your own icon.
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 size The size of the product's price:
  • Small
  • Medium
  • Large

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.

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 row block

The content displays as collapsed under a row tab. When a customer clicks a title, the tab expands to display additional content.

The settings for the collapsible tab block in the product information section
Setting Description
Icon Choose an icon from the drop-down list to display in front of the collapsible content heading. The default is a check mark icon.
Heading A heading for the collapsible row.
Row content Content for the collapsible row. Content can be formatted or include URL links. This feature can be used in conjunction with Row content from page.
Row content from page You can insert existing content from another page into a collapsible row. Click Change to select or remove a page. This feature can be used in conjunction with Row 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.

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp

Back to Be Yours Support