Swatches
Swatches replace plain option buttons with small photos or colors, so shoppers see the choice instead of reading it.
Turn swatches on
Section titled “Turn swatches on”Swatches are off until you turn them on, because not every store wants them. There are three places to do it:
- In the product editor, the Swatches switch at the top of the color rows.
- On Variant swatches in the app menu: Product pages and Collection and search pages.
- At the top of Swatch style.
These switches cover your whole store. When you first turn swatches on, a short guide shows what changed and lets you edit your first swatch straight away.
Which options get swatches
Section titled “Which options get swatches”Each option has its own switch, per product. Open the option’s tab in the product editor and use the switch in the Swatches bar, for example Material swatches.
If you never touch the switch, an option gets swatches when it:
- is the option that changes the photos, usually Color,
- already has swatch colors or images in Shopify, or
- has swatches you set up in the app.
Every other option, like Size, keeps your theme’s own buttons.
Photos or colors for everything
Section titled “Photos or colors for everything”In the Swatches bar, Photos | Colors sets every value of that option at once. Photos uses each color’s main photo. Colors uses a color read from each name, which you can change.
Change one swatch
Section titled “Change one swatch”Click a color’s dot in its row. The swatch window opens:
- Photo or Color.
- For a color, pick it with Shopify’s color picker. Tick Second color (optional) for two-tone items like stripes.
- Choose from Shopify Files to use any image, such as a fabric close-up.
- Name shoppers see shows a different name on your storefront, for example “Sand dune” for Sand.
- Back to automatic undoes your changes for that value.
Click the Navy dot in the editor: the Navy swatch window with Photo | Color, the color field, Second color (optional) and Name shoppers see
A value with nothing to show keeps its name as a plain button, so shoppers can always tell choices apart.
The Variant swatches page
Section titled “The Variant swatches page”Variant swatches lists every product and its swatch state: Custom (you set some up), Automatic (shown from Shopify’s colors or your photos), Not set up, or No color option. Choose Customize to open a product at its swatches.
Replace your theme’s own swatches is for themes that draw swatches of their own: turn it on to show yours instead of theirs.