# Quick shop

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Quick shop**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

## What is a quick shop or view?

A "quick view" feature allows customers to get a brief overview of a product without leaving the current page or opening a separate product page. The quick view feature enables customers to effortlessly add products to their shopping cart without the need to leave the current page.

## Quick shop settings

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FbQ5lJudOjKMJ0nNIaUle%2Fquick_shop.png?alt=media&#x26;token=eb1f7a60-5a16-4ca6-b36e-ffbf082521c8" alt=""><figcaption></figcaption></figure>

### Quick shop type

* **Drawer**
* **Popup**

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2F9i6l4dalDpbG1Bf3loJo%2Fquick_view.png?alt=media&#x26;token=80f061a0-662c-400a-a3d9-b5971027f709" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2F4qSv0O2Uct9izWqQj2et%2Fquick_view_drawer.png?alt=media&#x26;token=51fbdf8b-5863-4cf0-80e1-5d72b087491d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Variant picker type

* **Dropdown**
* **Button**

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

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2Fofp4trt1cCAMDFtxYC97%2Fquick-view-dropdown.png?alt=media&#x26;token=a1c712ee-37b6-4a3b-9dde-53ab1bec86ed" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FEM7fKFkV8VOUxp5mKNQk%2Fquick_view_button.png?alt=media&#x26;token=26f96474-740f-45cd-84bc-7353b122358c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Color swatches

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FRM9xSUfUFvKnMOagNEGs%2Fcolor_swatch_quick_view.png?alt=media&#x26;token=3b55b64f-2b85-4038-93ae-4080e9560bdf" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Required! The variant picker type must be 'Button'**
{% endhint %}

| Settings                  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable color swatches** | You can eanble/disable the color swatches                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Swatch type**           | <ul><li><strong>Color swatch (Default selected)</strong></li><li><strong>Variant image</strong> (You can display a variant image instead of the color swatch )</li></ul><p><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FHHx89TPvDpccgFg0kkfS%2Fquick_radio.png?alt=media&#x26;token=92e8835f-4a96-47f7-815f-d695da42a595" alt="" data-size="original"></p><p></p>                                     |
| **Option name**           | <p>Define the color option name. Eg. <strong>Color, Colour</strong>, etc.</p><p></p><p><strong>The name you used for the variant color option name must be entered exactly as it was there.</strong><br><br><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FDvugaO4j1xXWPyfuxWRZ%2Fcolor_option_name.png?alt=media&#x26;token=6e760ddd-5038-45e7-b3a3-e32a3f7fdee2" alt="" data-size="original"><br></p> |
| **Color option style**    | <ol><li><strong>Round</strong></li><li><strong>Square</strong></li></ol>                                                                                                                                                                                                                                                                                                                                                                                                                  |