# Quick View

### Overview

Magento 2, by default, only allows customers to view product details on the product page. This can be time-consuming and provide a bad user experience for customers who have to wait for the page to load just to see the product details. To solve this problem, the **Quick View** module was created. Our module not only allows customers to view product details quickly but also supports many other functions, making it easier 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://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2F8civ04jkIPZinftdkxKS%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**

<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2FpAJvnEoWS03gNFdvonT3%2Fsimple_product.png?alt=media&#x26;token=bf50598e-69ab-4af5-b844-2afdd926562b" alt=""><figcaption></figcaption></figure>

* **Bundle Product**

<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2FUf9cAgtNdydkZinp1ZRa%2Fbundle_product.png?alt=media&#x26;token=483ba051-57d8-447a-af39-80e717a20834" alt=""><figcaption></figcaption></figure>

* **Configurable Product**

<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2FFwU0ZJvl16ldx1dkSipd%2Fcolor_product.png?alt=media&#x26;token=4255ad8d-6ec2-4356-84a8-e2d94d12ec55" alt=""><figcaption></figcaption></figure>

* **Downloadable Product**



<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2Fa71Z5SMEw3KuTB3TYqSs%2Fdload.png?alt=media&#x26;token=e04eccbe-ae20-4911-bd15-d51d61fb0b2e" alt=""><figcaption></figcaption></figure>

* **Grouped Product**

<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2FF4fAjRdUEux2TZFti0GF%2Fgroupe_product.png?alt=media&#x26;token=5983ea98-42e9-453b-9ce7-0d32ca007764" alt=""><figcaption></figcaption></figure>

### How to Configure

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

#### 1. General Options

![](https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2F5exGxhOzX2EPB3zfGWqL%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.

<figure><img src="https://3012836149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6vg2ZodXitGeZrLVE7pt%2Fuploads%2FNWpzfZ8bai5Yw5iN1SPe%2Fcheck_product.png?alt=media&#x26;token=9bda1f49-1c3a-4dad-8c5b-7be6e1a1552e" alt=""><figcaption></figcaption></figure>

* 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 © 2023 [Blueskytechco.com](https://blueskytechco.com/). All Rights Reserved.
