Variant picker and swatches
The Variant picker block shows the product's options. Text options appear as buttons or dropdowns; color options as swatches using the colors set in Shopify, a color map, or each variant's image.
How to set it up
Step 1: Set up the picker
- In Product details, click Variant picker.
- Pick a Style (1): buttons or dropdown.
- Turn on Show color swatches (2) and choose the Swatch style: a color dot or the variant's image.
Step 2: Tell Treble which options are colors
- Open Theme settings > Variants & swatches.
- In Color option names, list the option names that are colors, separated by commas, for example
Color, Colour, Finish. - Colors come from Shopify's swatches (set on the option values in Shopify admin). For values without one, add lines to the Swatch color map, for example
Midnight: #1b2230.
Step 3: Style the options
- In the same group, set the size, text option shape, selected style, the slide animation between options, how unavailable options look, and the swatch shape and ring.
Settings reference
Variant picker
| Style | Options: Buttons, Dropdown. |
|---|---|
| Show color swatches | Uses the swatches set in Shopify admin, or the color map in Theme settings > Swatches. |
| Swatch style | Variant image needs an image on every color variant. Options: Color, Variant image. |
| Show selected value next to the option name | Turns this on or off. |
| Option name and value | Options: Side by side, Name left, value right. |
| Text options | Options: Fit to text, Equal columns. |
| Columns | Slider. |
Variants & swatches
| Variant options | |
|---|---|
| Size | Text options, swatches and variant images. Options: Small, Medium, Large. |
| Text option shape | Options: Same as buttons, Square, Rounded, Pill. |
| Selected text option | Options: Outline, Filled, Soft tint. |
| Slide the selection between options | The selected outline or fill glides to the option the shopper picks. |
| Unavailable options | Options: Faded, crossed out text, Faded, diagonal line, Faded. |
| Selected swatch ring | |
| Thickness | Slider. |
| Gap | Space between the ring and the swatch. |
| Thin border around swatches | Keeps light colors visible on light backgrounds. |
| Swatches | |
| Shape | Options: Circle, Square, Material chip. |
| Swatches on product cards | Variant image shows each color's product photo instead of a dot. Options: Color, Variant image. |
| Color option names | Comma separated. Options with these names show as swatches. |
| Swatch color map | One per line, e.g. "Midnight: #1b2230". Used when an option value has no Shopify swatch. |
How it works
- Variant image swatches need an image on every color variant.
- Unavailable combinations stay visible but faded, so shoppers see what exists.
- Product cards can show swatches too: Theme settings > Product cards > Show color swatches.