Product quick view pop-up

Three types of Quick view

Find checkbox “Show quick view icon” in sections with products, for example - Collection tabs, or Featured collection and on page Collection/Product grid template. Then mark the "Show quick view icon" checkbox. Once saved, users will see an eye icon when hovering over a product.

Clicking on the Quick View icon will display a pop-up with a brief product description, including the name, price, description, quantity, and an “Add to cart” button.

To set up Quick View for products on your theme, follow these steps:

Click on the "Theme settings" icon on the left side of the sidebar in your theme admin panel.
Scroll down to the "Product" tab.
Look for the "Product quick view modal" block.

“Product quick view modal” settings	Description
Hide pop-up	To control the visibility of the quick view pop-up that appears after clicking on the eye icon, you can use the corresponding option. When the option is marked to hide the pop-up, clicking on the eye icon will directly lead to the detailed product page. On the other hand, if the option is selected to show the pop-up, clicking on the eye icon will open a pop-up displaying the product details. This gives you the flexibility to choose the preferred behavior for the eye icon and the quick view feature. *Disable all quick view popups
Add border to image	Tick the checkbox if you want to see the border on an image inside the pop-up. Click on the quick icon to see changes on the pop-up.
Type	Two types to show options: color or sizes: Dropdown or Button.
Enable color swatches for variant color	If the product has a few colors, and you tick this checkbox, the color will be displayed as round small buttons, if remove checkmark it will look like a dropdown list with colors
Product form style	Choose style of quantity field and add to cart button: Default: Half-width add to cart and quantity field Full-width add to cart with price
Dropdown picker style	Choose type “Dropdown” and disable “Enable color swatches”, then look at your dropdown style, It can be: Dropdown with border Dropdown with divider
Show picker label	Mark the checkbox to add a label to a variant picker.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button”* blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from four different button styles: Default button: This is the standard button style with a solid background color and text. Outline button: This style features a transparent background with a colored outline and text. Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with an underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable.
Heading font family	Heading: This option lets you select the font family used in headings for buttons and links text throughout the website. Body: This option lets you select the font family used in body text for buttons and links text throughout the website.
Heading style	This setting enables you to define the capitalization style for text. You have the following options: Default: No capitalization transformation is applied. Uppercase: Converts all text to uppercase letters.
Heading color	The setting allows you to set up heading color. Three options: Main Secondary Heading
Enable custom font size for heading	Check the mark to change the heading custom font size.
Price font size	Select the size of the price text from options ranging from Large to Extra Small.
Price font weight	Choose the thickness of the price text. It can be light, normal, medium, semi bold, bold.
Picker font size	Use the slider to adjust the font size of the picker. This applies to various contexts, such as quantity numbers (1, 2, ...) or when opting for a dropdown view with divider or with border for color and size options.
Picker font weight	You can change the picker font weight . This applies to various contexts, such as quantity numbers (1, 2, ...) or when opting for a dropdown view with divider or with border for color and size options.
Picker text style	Choose from two styles: Default (sentense case) or uppercase. This applies when opting for a dropdown view with divider or with border for color and size options.
Label font size	You can set the label font size (it can be for “color”, “quantity”, “size”)
Label font weight	You can set the label font weight (it can be for “color”, “quantity”, “size”)