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

# Variant pickers

The variant picker is where customers choose product options before adding to cart. These settings control how it looks and behaves.

![Variant pickers setting panel](/files/BITGNWRlm4nVBoaHkvIN)

***

## Picker Type

Choose how variant options are shown — Button or Dropdown.

{% tabs %}
{% tab title="Button" %}
![Button variant picker](/files/a4D4njKiDguphIma17Ej)

Shows each option as a tappable button.
{% endtab %}

{% tab title="Dropdown" %}
![Dropdown variant picker](/files/0l2hMCHsfdVG5cc1z0zg)

Shows options in a collapsed menu.
{% endtab %}
{% endtabs %}

***

## Item Height

Sets the height of variant buttons so they stay easy to tap. Set separately for desktop and mobile.

***

## Spacing

Controls the spacing in the option form:

* **Group gap** — Space between option groups (e.g. Size and Color).
* **Label spacing** — Space between a label and its buttons.
* **Item gap** — Space between buttons.

***

## Variant Gallery

Filters the product gallery to show only the images of the selected variant. Selecting "Midnight Blue" shows only the blue photos; switching to "Sand" updates the gallery instantly.

{% hint style="info" %}
To add multiple images to a variant, see [How to set up multiple variant images](/helix/how-to-guides/how-to-set-up-multiple-variant-images.md).
{% endhint %}