# Variant swatch style

### <mark style="color:red;">Prerequisites \*</mark>

Before setting up color swatches, make sure:

* **Your products have variants** (e.g. Color: Red, Blue, Green; Size: X, M, L, XL).
* If newly added variants are not appearing, **sync your product data** in the Globo Swatch app.

<figure><img src="/files/BXCQQApgtZoGvpLdyXkC" alt=""><figcaption><p>Add variants for product</p></figcaption></figure>

## Choose variant swatch style

* Go to admin GLOBO Color Swatch -> **Dashboard**, in **Options list** ->  column "**Display style**" you can choose style swatch each variant and **Save**

## List of available variant style

### <mark style="color:blue;">1. Swatch</mark>

{% hint style="info" %}
Image or color swatch with hover animation featured
{% endhint %}

<figure><img src="/files/nV5XFYMJk8E1AxdABbLW" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">2. Pill swatch</mark>

{% hint style="info" %}
Pre-styled image or color swatch for a compelling design
{% endhint %}

<figure><img src="/files/wGbDed9V9EJ77inQ4zkj" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">3. Swatch dropdown</mark>

{% hint style="info" %}
Elaborate the dropdown design with swatches on each option
{% endhint %}

<figure><img src="https://d17jlpjpup1x16.cloudfront.net/images/Depict-Swatch-dropdown-small.svg" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">4. Variant image dropdown</mark>

{% hint style="info" %}
Elaborate the dropdown design with image on each option
{% endhint %}

<figure><img src="https://d17jlpjpup1x16.cloudfront.net/images/Depict-Swatch-dropdown.svg" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">5. Button</mark>

{% hint style="info" %}
Text base options with variety of customized button styles
{% endhint %}

<figure><img src="/files/KbcRn67h6yxkdCDtXiqG" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">6. Button without border</mark>

{% hint style="info" %}
Plain text without background well suited for a minimal style
{% endhint %}

<figure><img src="/files/8RPjEMB11Y18gDTybZYF" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">7. Pill button</mark>

{% hint style="info" %}
A modern and user-friendly button design for encouraging interaction
{% endhint %}

<figure><img src="https://d17jlpjpup1x16.cloudfront.net/images/Depict-Pill-button.svg" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">8. Button with price</mark>

{% hint style="info" %}
Highlight the price on button with standout style
{% endhint %}

<figure><img src="https://d17jlpjpup1x16.cloudfront.net/images/Depict-Button-with-price.svg" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">9. Dropdown</mark>

{% hint style="info" %}
Flexible styling dropdown to fit your brand's look
{% endhint %}

<figure><img src="/files/9nyw5jVu2NNv9cdH982P" alt=""><figcaption></figcaption></figure>

***

## **Advanced settings appearance**

* If you need change more for variant type -> go to GLOBO Color Swatch ->  **Appearance page**
* In **Appearance page,** choose type variant you need change setitng and click **set up** button
* You can select the **On product page** or **On collection page** tab to set up separately

<figure><img src="/files/huGznWuQWHV0M6bfDnGj" alt=""><figcaption><p>Choose page apply setting</p></figcaption></figure>

#### **1. Shape And layout**

<figure><img src="/files/nrw3vQVZIm9ZO9kAvGn2" alt="" width="563"><figcaption><p>Shape And layout</p></figcaption></figure>

#### **2.** Color, Text, Border

{% tabs %}
{% tab title="Default style" %}

<figure><img src="/files/XKVyGLksNZQJ0B2Rtvkl" alt="" width="375"><figcaption><p>Variant default</p></figcaption></figure>
{% endtab %}

{% tab title="Hover style" %}

<figure><img src="/files/fD8BA8Gp8II6RCGCZO0V" alt="" width="361"><figcaption><p>Hover style</p></figcaption></figure>
{% endtab %}

{% tab title="Selected style" %}

<figure><img src="/files/FOtbdD3sw80NLotbzkkE" alt="" width="210"><figcaption><p>Selected variant</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### 3. Hover Effect And Animation

<figure><img src="/files/uPW6wEyeSOdbjQ4a3w5J" alt="" width="375"><figcaption><p>Hover Effect And Animation</p></figcaption></figure>

#### 4. In Stock Product Message

<figure><img src="/files/IhuhEVjrsWmwCDlhF1nD" alt="" width="563"><figcaption><p>In Stock Product Message</p></figcaption></figure>

***

<details>

<summary><a href="/pages/c4ede2KJN4Mjx8MnyZyA">Advanced setting variants swatch</a></summary>

1. [Show/hide variant name](/product-variants-swatch/advanced-setting-variants-swatch/show-hide-variant-name.md)
2. [Show/hide tooltip](/product-variants-swatch/advanced-setting-variants-swatch/show-hide-tooltip.md)
3. [Out of stock style](/product-variants-swatch/advanced-setting-variants-swatch/out-of-stock-style.md)

</details>

<br>


---

# 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.globo.io/product-variants-swatch/variant-swatch-style.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.