# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/pages-global-sections/quick-view.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.