Variants and swatches
Variant options (size, color, material) show as buttons or swatches in the product form, Quick view and product cards. Theme settings > Variants & swatches sets how they look, and which option holds colors.
How to set it up
Step 1: Style the option buttons
- Go to Theme settings > Variants & swatches.
- Turn on Show swatches (1) to show color options as swatches, and Show variant image to use the variant's image in the swatch.
- Set the Variant option size, Shape and Corner radius, and the Details style (how the option label and selected value sit).
- Under Variant borders, set the border and the outline of the selected option.
Step 2: Shape the swatches
- Under Swatch appearance, choose a circle, square, 4:3 or 3:4 swatch and its corner radius.
Step 3: Map your colors
- In Color options name, enter the option names that hold colors, for example
Color, Colour. - In Custom color codes/images, add colors Shopify doesn't know, separated by commas or new lines, as
Name: #hexorName: image URL, for exampleOxblood: #4a0d12.
Settings reference
Variants & swatches
| Variant options | |
|---|---|
| Show swatches | Turns this on or off. |
| Show variant image | Turns this on or off. |
| Variant option size | Applies to swatches and text options in product forms. Options: Extra small, Small, Medium, Large, Extra large. |
| Shape | Options: Square, Rounded, Pill. |
| Corner radius | Slider. |
| Details style | Controls how option labels and selected values are arranged across product forms. Options: Style 1, Style 2. |
| Parallax cursor movement | Turns this on or off. |
| Apply to product cards | Turns this on or off. |
| Variant borders | |
| Border | Options: None, Solid. |
| Border thickness | Slider. |
| Border opacity | Slider. |
| Active border thickness | Slider. |
| Active border padding | Gap between the selected option and its outline. |
| Swatch appearance | |
| Shape | Options: Circle, Square, 4:3, 3:4. |
| Corner radius | Slider. |
| Color mapping | |
| Color options name | The option name that holds color values. E.g. Color, Colour, Shade, etc. |
| Custom color codes/images | Enter custom color codes or image URLs for the color swatches. Use the format 'Color Name: #HexCode' or 'Color Name: link'. Separate multiple entries with a comma or a new line. E.g. 'Red: #FF0000, Blue: #0000FF, Green: https://example.com/green.png' |
How it works
- A swatch uses, in order: the variant image (when Show variant image is on), your custom color codes, Shopify's own swatch set on the color option in Shopify Admin, then the color name itself (for example "Navy").
- The color option names are also used by variant media groups when you group media by color in alt text. See Variant media groups.