---
description: Updated on February 17, 2022  Bluesky Team
---

# Quick View

### Overview

Magento 2 by default only allows customers see product detail in product page. This will take time and bring a bad experience for customers when they have to wait for the page to load just to see product details. So **Quick View** module was created to solve this problem. Not only for viewing product details, our module also supports many other functions, making it easy for customers to order the items they are viewing.

### How to Use

#### 1. Admin

Adminstrators can easily use and [configure](https://blueskytechmage.com/kalles/documentation/#quickviewpg-howToConfigure) module **Quick View** in Admin panel.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FtMPV5VuYvSiFrgfSZfUo%2Fquickviewmenu.png?alt=media\&token=029bd0f7-85a8-4a60-9efc-aaaca943550c)

#### 2. Customer

Customers can quick view a product by click to **Eye** icon or button **Quick View** when hover to this product. We customized quick view for each product so customers can easily order directly on quick view.

* **Simple Product**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FmdO1kg14iGrPaDigpwEh%2FSimple%20Product.jpg?alt=media\&token=8040c1b6-e2cf-4b9d-86e8-0c15a9936640)

**Bundle Product**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FHnyleY2XFrZuPv2dXRDn%2FBundle%20Product.jpg?alt=media\&token=0c5a3d58-1461-456f-b521-b913a9522c89)

* **Configurable Product**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FnfxuthdjbIuJuYdavpb1%2FConfigurable%20Product.jpg?alt=media\&token=be59fb30-6b03-46cb-a368-8c02adf0d09e)

* **Downloadable Product**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FAchpgyjRDHChfc7L7lnr%2Fhow-to-create-dowloadable-product-in-magento-2-downloadable-product.png?alt=media\&token=0f9ded6c-9734-4d2d-b232-f031de46c46d)

* **Grouped Product**

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FQuiZ9UCPSTDzR1UZg3yX%2FGrouped%20Product.jpg?alt=media\&token=603d3141-dbd9-4685-84af-d5494944f170)

### How to Configure

Login to your backend page, then go to <mark style="color:red;">`BLUESKYTECHCO > Quick View`</mark>.

#### 1. General Options

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FJBV3ox3oJYKmTPCZdz2i%2Fsettingquickview.gif?alt=media\&token=3240f2c5-e651-4ddc-a2f7-420092115c67)

* In the **Enabled QuickView** field: Select **Yes** if you want to enable **Quick View** module.
* In the **Label Item** field: Set the label for the quick view button.
* In the **Action Append Icon Quickview** field: Set position of div "quickview".
* In the **Variation of thumbnails in navigation** field: There are two options: Thumbs or Dots.

![](https://1228290169-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOKXJeKzPNYFTVQat5VJw%2Fuploads%2FXIgYS4uH9pFJKXza5aT0%2Fproducts1.jpg?alt=media\&token=a4b3f6a4-952c-46b8-bcc7-32827003c362)



* In the **Sliding direction of thumbnails** field: Position of thumbnail images will be shown.
* In the **Data or Class Insert** field: Setting class to div "product action".

Copyright © 2022 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.
