1. What is a Quick view?
Quick View is a feature that allows customers to quickly preview product details without leaving the current page. Typically, when users hover over a product image or click on a designated button, a modal window or pop-up appears, displaying essential product information such as name, price, variants, and a brief description.
Quick View enables customers to make faster purchasing decisions by providing them with essential product details without navigating to a separate product page. This feature enhances the user experience by reducing the number of clicks required to view product information, ultimately streamlining the browsing and shopping process.
2. How to show a Quick view button on the product cards?
Quick view allows users to quickly preview a product without having to navigate away from the current page or go to the full product detail page.To show the Quick View button on the product cards, follow these steps:
Open the theme editor and navigate to the overlay group section. Then, enable the Quick View section.
Configure the settings in the Product card group. These settings will apply to all product cards and include:
- Enable the "Show Quick view button" configuration, which opens a popup displaying product details without leaving the current page.
- Customize the Quick view button label.
- Configure button styles such as button color.
When "Show Quick view button" is enabled, it will display only one button.
3. How to show a Quick add button on the product cards?
Configure the settings in the Product card group. These settings will apply to all product cards and include:
- Enabe the "Show Quick add button"
- Adjust the Quick add desktop/mobile position: Select whether to display it on top of the product image or at the bottom of the product card on desktop/mobile.
Here is the logic of this section:
When both "Show Quick add button" and "Show Quick view button" are enabled, two buttons will be displayed.
The Quick add text will display as:
- "Choose options" when the product has options
- "Add to cart" when there are no options
- "Sold out" (with the button disabled) when the product is unavailable.
- When "Choose options" is clicked, content will slide up to allow the selection of options and adding the product to the cart.
4. How to set up Quick view content?
To set up Quick View content, follow these steps:
a) Setup display:
- Choose the product to preview in the Quick View. This is just a preview, and the settings will apply to all products.
- Adjust the title size, heading tag, and decide whether to show the vendor name.
- Configure how media is displayed within the popup. This is similar to setting up media in the product info section. You can refer to the guide for setting up media here.
b) Organize product information in the Quick View popup:
- Organize the product information similarly to how it's done in the product information section, excluding certain blocks that are only applicable on the product page, such as back in stock, complementary products, and sticky add to cart.
5. How to set up Quick Add Variant Picker
When Quick add is enabled, all product variants are shown automatically. You can choose to show variants as either a dropdown menu or buttons in theme settings.
Type: Dropdown
Type: Button
6. How to show the Payment method on quick view?
By following these steps, you can customize the display and organization of information in the Quick View popup for your products.
- In Theme Editor, scroll down to the Overlay area at the bottom.
- Click on Quick View section.
- Tap on Add block, seach and select the block named Payment methods.
- Click Save when done.
From here, you can change the heading, and description, add payment icons, and customize the colors in the Style area.
7. How to customize the “View product details” button?
✍️ What is the purpose of “View product details” button?
When clicked, this button takes customers to a page where they can learn more about the product: features, specifications, and customer reviews. This button can be especially useful in sections that have limited space.
✍️ How to add and customize the “View product details” button?
In the Featured product section, add a new block called View product details, you will have 3 style choices to choose from:
|
Style choice |
Example look of the button |
|
Primary |
 |
|
Secondary |
 |
|
Text link |
 |
You can freely change the button, text, or hovering color for the button as you want.
