# Product quick view

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F0rjLwj8rNGCTzz5BbHBj%2Fimage.png?alt=media&#x26;token=7c82c962-757b-421f-8020-036ed132cfea" alt=""><figcaption></figcaption></figure>

The Product Quick view option offers several unbeatable advantages:

* 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 elements are shown on the product quick view - such as the quantity selector, dynamic checkout button, product vendor, custom tags, and sale or sold-out badge.

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

1. In the theme editor (**Customize**), click **Theme settings.**
2. Locate **Product quick view.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

<div data-full-width="true"><figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FiyPtzmYJQZhLWNlT6kEK%2Fimage.png?alt=media&#x26;token=22000d1e-c2ac-4380-8df0-4e6b73d30604" alt=""><figcaption></figcaption></figure> <figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FcuXJC2a7PmQo3yzKvaJM%2Fscrnli_4_12_2024_8-29-05%20AM.png?alt=media&#x26;token=faf592d7-fe35-4af4-9d00-4ffbc0f659c3" alt=""><figcaption></figcaption></figure></div>

## General

Decide what to show on your product quick view, including:

* **Show quantity selector;**
* **Show dynamic checkout buttons**  (Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. [Learn more](https://help.shopify.com/en/manual/online-store/dynamic-checkout))**;**
* **Show product vendor;**
* **Show custom tags** (See [**Custom tags**](https://docs.foxecom.com/zest-theme/faqs/generic/add-custom-badges-to-the-product-card-and-product-page)).

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FslW3v86c72Sg1CVwSDJ8%2Fimage.png?alt=media&#x26;token=13258b35-ae22-4367-9804-6c7e17eed584" alt=""><figcaption></figcaption></figure>

## Price

In the **Price settings**, you can enable or disable to show:

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FW4q6KhwUPNyfNCifsMTU%2Fimage.png?alt=media&#x26;token=aacd1330-d196-4227-bcf7-9bbfacc39593" alt=""><figcaption></figcaption></figure>

* **Show sale badge**

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FU8Hr5dcmvFezyGvqaKn0%2Fimage.png?alt=media&#x26;token=59b74ecc-34ba-4475-93ca-52ba1d5ddc63" alt=""><figcaption></figcaption></figure>

* Choose **Sale badge type** (Text/Percentage/Fixed amount)

{% tabs %}
{% tab title="Text" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSp80UyhsXZchivhU2Ahs%2Fimage.png?alt=media&#x26;token=1856190b-d15b-4c0e-b1c9-c13ec71a5bd1" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Percentage" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FrDghucaST0JvFY1ZFDkZ%2Fimage.png?alt=media&#x26;token=94f0d949-1760-4dd6-a690-6256729b4227" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Fixed amount" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FHiv1ohsop1hb77lRlDiP%2Fimage.png?alt=media&#x26;token=63f047ad-275d-4ebd-9bc5-d53ed802a5f8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Show sold-out badge**

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FuSLBecNtBqHHIcPt59Li%2Fimage.png?alt=media&#x26;token=6acc227a-553b-47df-bdbb-4768e6c2a228" alt=""><figcaption></figcaption></figure>

## Variant picker

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FilGa5zFu48HLPBdyBqMW%2Fimage.png?alt=media&#x26;token=6f410c49-2363-43b0-8987-f0d0f9b1a44b" alt=""><figcaption></figcaption></figure>

Select the **Picker type** for your product variants in the Quick view as **Buttons**/**Dropdown.**

You can opt to show/hide the selected option.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Frt4JzgGtGOEEHRO1WFSl%2Fimage.png?alt=media&#x26;token=3e77e96c-9a47-4fe6-a26e-a5d708d86e98" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
If you want to show your Color options as Color swatches in the Quick view, make sure:

* The **Picker type is Buttons**.
* You set the **Color swatch trigger** and **Swatch style** in **Theme settings** > **Color swatches**. Learn more: [color-swatches](https://docs.foxecom.com/zest-theme/theme-settings/color-swatches "mention")
  {% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FkHXwKf3DfojYXR9YbRqm%2Fimage.png?alt=media&#x26;token=9a24241b-aa9b-473c-aaa4-55d97faff3af" alt=""><figcaption></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/zest-theme/theme-settings/product-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.
