# 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 lets customers 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F0808Ma36efr0xO05FCqD%2FScreenshot_156.png?alt=media&#x26;token=401b10fb-a0e9-4bfe-ae2c-59be38d8245d" alt=""><figcaption></figcaption></figure>

### Quick shop type

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

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

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FkZNG8oRehSTkvhGKJMXn%2FScreenshot_157.png?alt=media&#x26;token=3dad7432-3f8e-40fb-ae28-f995df0c21b4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FDyWVXpx9nHbvvhLw19Jw%2FScreenshot_162.png?alt=media&#x26;token=d25eff6d-5b62-40ec-ab21-604c4e0876aa" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Variant picker type

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

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

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FsVG0mnc7GgPQRpwbDlsT%2FScreenshot_158.png?alt=media&#x26;token=e68a73a1-003f-4227-bd6c-ecfafeec6179" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FmlXSxLyfFUeaD9aO0AHE%2FScreenshot_163.png?alt=media&#x26;token=efb3cd14-9a48-4037-bacf-b9fea66a5197" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Color swatches

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FNFNU4eNmwYrU5uSBPbET%2FScreenshot_159.png?alt=media&#x26;token=87a2a8c1-b4f7-4607-b4a6-917a984bf719" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F4wQrfJQAXduUcX9meSxG%2FScreenshot_160.png?alt=media&#x26;token=3c8a5304-7fe6-4fde-bcd2-440a90b4678e" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FFEwZEHxYNOoYIUrObHCD%2FScreenshot_161.png?alt=media&#x26;token=48048760-587c-4096-a702-ad2f6acbd3f9" alt="" data-size="original"><br></p> |
| **Color option style**    | <ol><li><strong>Round</strong></li><li><strong>Square</strong></li></ol>                                                                                                                                                                                                                                                                                                                                                                                                                |