Quick view & Quick add

by Admin on Apr 01, 2024

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?

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:

  • Set the button label: Choose between "Show Quick add button" (which allows users to add products to cart directly from the product cards) or "Show Quick view button" (which opens a popup displaying product details without leaving the current page).
  • Adjust the Quick add mobile position: Select whether to display it at the top of the product image or at the bottom of the product card.
  • Customize the Quick view button label.
  • Configure button styles such as button color.

3. 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.

By following these steps, you can customize the display and organization of information in the Quick View popup for your products.