> For the complete documentation index, see [llms.txt](https://themihub.gitbook.io/isotech-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themihub.gitbook.io/isotech-shopify-theme/theme-settings/quick-shop.md).

# Quick shop

A complete guide to customizing the quick view on your website

{% 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://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/dPSfyaKoLijQ5JQOD64d/quick_shop.png" alt=""><figcaption></figcaption></figure>

### Quick shop type

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

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

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/1CquC6aifQk0R6YvhuK9/quick_view.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/fxueqTsEowX1ADpHvztW/quick_view_drawer.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Variant picker type

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

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

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/coI389pwVywSyBYnvWJk/quick-view-dropdown.png" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button" %}

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/XcQJ0RwyZ2AD8ZT6NUOB/quick_view_button.png" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Color swatches

<figure><img src="https://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/z2LGtRp7ZUDZzPdgBYk5/color_swatch_quick_view.png" 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://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/O0Fl2D0mfoYGskNPxJ0a/quick_radio.png" 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://content.gitbook.com/content/7Hg8cYZOt66iWZS4tTz7/blobs/zTT32ewluelXDOnuicjA/color_option_name.png" alt="" data-size="original"><br></p> |
| **Color option style**    | <ol><li><strong>Round</strong></li><li><strong>Square</strong></li></ol>                                                                                                                                                                                                                                                                                              |