# Quick view

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FOYb4GJa12pZDSgehe83p%2FHyper%20docs%20screenshot%20do%20not%20delete%20(65).jpg?alt=media&#x26;token=489fd024-d7ce-404a-98fd-54c645d7de7e" alt=""><figcaption></figcaption></figure>

## What is a Quick view?

The **Product Quick view** option offers several unbeatable benefits:

* Improved shopping experience: It's easier for your customers to select and add any items to cart without loading the whole product age and clicking back-and-forth between the product page and the item pages for details.
* Reduced server load: The product page is not reloaded when the shopper selects this feature.
* Display of discounted pricing and other details: You can utilize the quick view feature to show discounts before the cart page.

You can manage which blocks are shown on the **Quick View** - such as the buy buttons, variant picker, price, SKU, complementary products, badges and tags, etc.\\

## How to enable Quick view

Quick view can be enabled for your **Product cards.**

{% hint style="success" %}
Steps:

1. In theme editor (Customize), navigate to **Theme settings > Product cards**.
2. Select the option **Enable Quick view button**.
   {% endhint %}

:eyes: *Learn more:* [product-cards](https://docs.foxecom.com/hyper-theme/theme-settings/product-cards "mention")

## How to customize Quick view

### Change the Quick view type

{% hint style="success" %}
Steps:

1. In theme editor (Customize), navigate to **Theme settings > Quick view**.
2. Select the type as **Drawer/ Modal**.
   {% endhint %}

Learn more: [quick-view](https://docs.foxecom.com/hyper-theme/theme-settings/quick-view "mention")

{% tabs %}
{% tab title="Quick view type as Drawer" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FrwzvrN42hrnnkmNjIKxc%2Fimage.png?alt=media&#x26;token=1988d710-29f9-4db5-99cc-122821734dea" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Quick view type as Modal" %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fh4dF8Bwpt1vMurqw0zSg%2Fimage.png?alt=media&#x26;token=ce5c74a5-585f-4abc-92bc-063a7f2ad0ca" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Product media layout in each type is different:

* Drawer: Stacked layout
* Modal: Carousel.
  {% endhint %}

### Customize what is included in the Quick view

{% hint style="success" %}
Steps:

1. In the theme editor (Customize), locate **Overlay group** > **Quick view**.
2. Make necessary changes.
3. **Save**.
   {% endhint %}

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2Fk7tpdFg3ptDDuVlZ9bMJ%2Fimage.png?alt=media&#x26;token=1610560c-c8d4-4e29-beb4-f7491bf65304" alt=""><figcaption></figcaption></figure>

#### Section settings

* **Media:** To know more about media types, see [Product media](https://help.shopify.com/en/manual/products/product-media).
  * **Enable sticky content on desktop**: Allow the content to stay visible as customers scroll through the product details. (for [Quick view type as Drawer](#quick-view-type-as-drawer)).
  * **Enable video looping**: Allow videos in the product media to play continuously.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FG032k7pm5tIwx50psxEy%2Fimage.png?alt=media&#x26;token=34c1c5c0-c85c-4b72-89b7-c263d4152d9d" alt=""><figcaption></figcaption></figure>

#### Block settings

The **Quick View** feature includes multiple blocks to display detailed product information. You can add, remove, or customize them as you like, similar to the [Product information](https://docs.foxecom.com/hyper-theme/collections-and-products/product-page/product-information) section.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FPScCJUPU4OWn85pzOA84%2Fimage.png?alt=media&#x26;token=c782a2ce-b3f3-40e9-88f8-4c53eccb3a79" alt=""><figcaption></figcaption></figure>

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>