Magento 2 Quick View

Magento 2 Quick View enables a quick view popup for the visitors to view the products conveniently without leaving the current page.

Table of Content

1. Extension Installation Guide
2. Configuration
3. Popup Design Settings
4. Theme Settings
5. Quick View in Frontend

1. Extension Installation

• Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
• Log in to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy -f
  • php bin/magento cache:flush
• That’s it.

2. Configuration
   To configure the extension, log in to Magento 2 backend, move to Stores > Configuration > Quick View where you can find various settings to configure the extension.

• Quick View: Enable the extension from here.
• Hide Blocks in Quick View: Select the blocks you want to hide in the quick view popup.
• Product Image Full Screen: Set YES to allow full screen of product images from the quick view popup.
• Close Popup After Add to Cart: Select YES to auto close popup after product add to cart.
• Close on Background Click: Select YES to allow close popup on background click.
• Enable Go to Product Button: Select YES to enable “Go to Product” button in quick view popup.

3. Popup Design Settings
   Configure various settings to design the quick view popup in an attractive manner to match your theme.

• Popup Position: Set popup position to show in the category page.
• Show Button on Hover: Select YES to show Quick View button on category page only on hover of the product.
• Button Text: Enter custom text for the Quick View popup.
• Button Icon: Enter icon to show along with the quick view text.
• Button Text Color: Select quick view button text color.
• Button Color: Select the quick view button color.

4. Theme Settings
   Make settings to show product items and image in the quick view popup.

• Product Item Info Class: Enter product item info class of your custom theme to show product items in the quick view popup.
• Product Image Wrapper Class: Enter product image wrapper class of your custom theme to show product images in the quick view popup.

5. Quick View in Frontend
   Once the settings are configured properly, users can see a quick view button on the category page along with the button text.

• Quick View Popup
  Once the users click on the Quick View button, the responsive poup is opened along with the product details and Go to Product button if enabled from the backend.