Make an option like Color render as swatches instead of buttons in the variant picker, with either flat colors or custom images.
Any product option whose name matches the Swatch option names field on the Variant picker block (default "Color, Colour") renders as a swatch automatically, as long as a matching swatch entry exists. Text swatches aren't a separate mode: without a matching entry, the option falls back to plain buttons.
Create the swatch metaobject entries
- In Shopify admin, go to Content > Metaobjects.
- Find the Squiggle and code swatch definition and click Add entry.
- Set the handle to match your option value exactly, lowercased and hyphenated. For example, an option value of "Pink/White" needs the handle "pink-white".
- Fill in Color one (required). Add Color two as well if you want a two-tone, split swatch.
- For an image swatch instead of a flat color, upload a file to the Image field.
- Click Save, then repeat for every option value you want a swatch for.
Choose the swatch style
- Open the theme editor and select your product page, or a Featured product section.
- Click into the Variant picker block.
- Confirm the option's name is listed in Swatch option names (comma-separated, case-insensitive).
- Set Swatch style to Color swatch or Image swatch. Image swatch falls back to color swatch automatically for any value that has no image set.
If you have any questions or issues, send us a message, we're more than happy to help you out!