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:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
- Click Theme settings icon.
- Open the Product tiles heading and check the Enable quick view feature.
- 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:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit, and then click Customize.
- Open the drop-down menu at the top of the page.
- Select Products > modal to load the product modal template in the theme editor.
- Please note that you can only customize the blocks within the Product information section. Other sections added via +Add section button are invalid.
- 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:
|
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:
|
Title block
This block displays the product's title.
| Setting | Description |
|---|---|
| Title size | The size of the product's title:
|
| Price size | The size of the product's price:
|
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:
|
| 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.
|
| 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.
| 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.
| 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
Share:
How to add/remove a product sale badge?
How to edit the content of a quick view pop-up?