> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/theme-settings/variant-picker.md).

# Variant Picker

The **Variant Picker** settings in **Theme Settings → Variant Picker** allow you to customize how product options are displayed. These settings apply to the **Product Overview section** (Product template), **Quick View template**, and **Featured Product** section.

***

### Option Display Types

{% columns %}
{% column %}
There are four display (UI) types for variant options:

* **Dropdown**
* **Pill**
* **Color Swatch**
* **Variant Image**
  {% endcolumn %}

{% column %}
Additionally, there are two layout options:

* **Two columns**
* **In a row**
  {% endcolumn %}
  {% endcolumns %}

You can also adjust the **Input Size** with two options: **Big** or **Small**.

{% hint style="success" icon="lightbulb" %}
To apply a specific display type, enter the option name in the **Option Label** field.

![](/files/Vo3EykaXqdL8luR6sWVE)
{% endhint %}

#### Dropdown

This is the default design when no other display type is selected.

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

#### Pills

Applying the **Pills** display type to an option like **Size** allows you to choose from four layout variations:

{% columns %}
{% column %}

* **One-column pills with checkboxes**

<figure><img src="/files/NYhJGuOo45dIx9NFDYrE" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

* **Two-column pills with checkboxes**

<figure><img src="/files/cgz5MQpySDaYyINko5Z6" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

* **Pills in a row**

<figure><img src="/files/eSW5UoNNlUu84Vd2Rlua" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

* **Pills in two columns**

<figure><img src="/files/YGiFc7SPg6s5IiFAsvxU" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

#### Color Swatches

The **Color Swatch** settings work similarly to Pills, offering three layout options:

{% columns %}
{% column %}

* **One-column swatches (small)**

<figure><img src="/files/2WZShaXbaBCna957UQPq" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

* **Two-column swatches (small)**

<figure><img src="/files/nh0pwO8n6roCSg21Scud" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

* **Swatches in a row**

<figure><img src="/files/CDoW117PKh2HTm0lLyHm" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

{% endcolumn %}
{% endcolumns %}

Additionally, you can adjust the **Media Ratio** and **Corner Radius** for **Color swatches** style.

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

#### Variant Image

With this option, the variant image is displayed as a swatch.

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

In this case, the **Layout** settings do not apply. Instead, you get advanced controls for adjusting the **Image size** separately for desktop and mobile, as well as options for **Media Ratio** and **Corner Radius**.

{% columns %}
{% column %}
{% hint style="success" icon="lightbulb" %}
To apply different display types to different options, enter multiple option names in the **Option Label** field, separated by commas.
{% endhint %}

<figure><img src="/files/jdWk8pkfov0Jmf2jtASJ" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
{% hint style="success" icon="lightbulb" %}
The shape of input elements can be customized in **Theme Settings → Shapes**.
{% endhint %}

<figure><img src="/files/MOkC8yf4nNanH3ZZW1VM" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

***

### Linked products

Some of our clients choose to populate color variations as separate products instead of using Variants, as a workaround for Shopify's limitations:

1. Show each color as a separate product on Collection pages.
2. Display only images of the selected color in the product gallery on Product pages.

We've developed the **Linked Products** feature, which allows linking products and displaying them as a **Color swatches** block on the **Product page** in the **Product overview** section.

In **Theme settings → Variant picker → Linked products**, you can adjust:

* Image size for desktop and mobile.
* Media ratio
* Focal point
* Corner radius


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/volume-themes/theme-settings/variant-picker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.