# Variant picker

Variant picker block allows customers to select product variants (e.g., size, color) in a user-friendly manner.

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

### **Settings**:

1. **Desktop variant style**: Choose between Dropdown or Buttons layouts.

{% tabs %}
{% tab title="Dropdown" %}
Variant options appear as dropdown menus.
{% endtab %}

{% tab title="Buttons" %}
Variant options appear as clickable buttons.
{% endtab %}
{% endtabs %}

2. **Button layout:** Only applies when variant style is set to "*Buttons*".
   * **Default:** Full-width layout.
   * **2 Columns:** Buttons arranged in two equal-width columns.
   * **3 Columns:** Buttons arranged in three equal-width columns.
3. **Swatches:** let customers see and select color or pattern options visually. Navigate to “[*Theme settings → Swatches*](/swatches.md)” to configure swatch appearance.
   * **Enable swatches:** Toggle to display swatches for color or pattern variants.
   * **Size:**
     * **Regular**: Default swatch size.
     * **Large**: Bigger swatch for better visibility.
4. **Size guide:** adds a link to a size chart for relevant variant types (like Size or Fit).
   * **Enable popup link:** Displays a clickable "Size Guide" link beside relevant variants.
   * **Variant trigger name(s):** Enter the names of variant options that should trigger the size guide popup (e.g., `Size, Taille`).\
     Use commas to separate multiple names.
   * **Link label:** Text shown for the link (e.g., “Size Chart”).
   * **Page:** Choose the page that the size guide link should open.
5. **Mobile layout:**

* **Mobile variant style:** Offers the same layout choices as Desktop settings: Dropdown and Buttons.


---

# 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://help.byinspiredlabs.com/product-page/product-information/variant-picker.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.