# Quick View

## Overview

The purpose of the **"Quick View"** section in our app is to enhance the shopping experience for customers by providing a streamlined way to view product details without leaving the current page. 

## How To Install ?

{% embed url="<https://youtu.be/aPmzu4BUg4c>" %}

To install **"Quick view"** section in our app. You can follow these steps and the images below:

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Quick View.**
3. Click the **Install** button to install the **Quick View** sections.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FpKhSbqZkJmtlfxQE3C9E%2FQuick%20View%201.jpg?alt=media&#x26;token=4fb23f16-5906-4e9a-8308-e430f6f35809" alt=""><figcaption></figcaption></figure>

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab.
5. Search for **Quick View** section and click on it.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F3c9qOBB54Zutp3bH5Ma6%2FQuick%20View%202.jpg?alt=media&#x26;token=db5bcb0a-c2c2-4297-932b-661a8be160c2" alt=""><figcaption></figcaption></figure>

## How To Use ?

After adding the **"Quick view"** section to your theme, you will see the **Quick view** icon.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FRvBIJiwwIgaQFUpNwDeT%2FQuick%20View%203.jpg?alt=media&#x26;token=0297b2f7-6402-4d23-a9fe-b9970d9b2cea" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
The **'Quick view'** is only displayed on our product card section. If you are not using our product cards, it will not be visible
{% endhint %}

Clicking the **"Quick view"** icon opens a popup displaying the product's key features (such as description, color, size, etc.) and provides easy access to add to cart, view details, or purchase the product.

1. Select the Product Color.
2. Select the Product Size.
3. Select the Product Quantity.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FdHDQTA4okjUtMGXPsIZB%2FQuick%20View%204.jpg?alt=media&#x26;token=f6843498-2b21-4a45-bb38-c39d40e2499e" alt=""><figcaption></figcaption></figure>

## Display Locations of The Quick view

The **Quick view** can be displayed on both desktop and mobile in the following locations.

1. &#x20;**Collection Page**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FkYvqg0vVBPt0PbPOEc1N%2FQuick%20View%205.jpg?alt=media&#x26;token=8de5d7a7-8eab-4cec-b767-eb0703fa51f5" alt=""><figcaption></figcaption></figure>

2. **Wishlist Page**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FlkxIBI1N0oIgN9ZKGfXx%2FQuick%20View%206.jpg?alt=media&#x26;token=c7519fa7-88f0-4cc6-b02c-44bf2f00b405" alt=""><figcaption></figcaption></figure>

3. **Product Card**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F8mrlN8RveDy2R2FProL1%2FQuick%20View%207.jpg?alt=media&#x26;token=a52e4abb-7b77-474d-adfe-1be081e1a978" alt=""><figcaption></figcaption></figure>