How do I set up color swatches?

Color swatches allow you to display color pills instead of standard variant pills when a product has a color variant. 

Color swatches are configured through the color swatch theme settings. Color swatches are enabled by default and can be disabled by unchecking the "Enable color swatches" setting in theme settings. Color swatches apply to product variants whose names have been added as "Variant names" in the color swatch theme settings.

If no custom colors have been configured in the theme settings, then color swatches will only work for standard CSS colors. The list of standard CSS colors can be found on the following page. If a color option is not a standard CSS color and has not been configured in the theme settings, then it will be shown as a transparent color pill.

For example, if a product has a variant type called "color" that has been added as color swatch variant name and one of the variant options is "green", then the HTML color #008000 will automatically be shown.

To add new colors to the color swatch or to modify the color shown for a standard CSS color, use the custom color setting in the theme settings. Custom colors can be defined as HTML colors or images. To use an image as a color swatch, first upload the image as a file in the Shopify admin, then add the image file name (including the file extension) in the custom color setting.

Names and colors in the "Variant names" and "Custom colors" settings should be separated by commas, with no spaces.

See below example color swatch theme settings.

• Related Articles

• Color settings

  Color settings are used to set the color schemes and colors that will be used throughout the theme. Color scheme settings are set out in the table below and are accessed through the theme editor. Setting Description Background Set the background ...

• Color swatch settings

  Color swatch settings are used to configure and customize color swatches displayed in product cards and product sections. Color swatch settings are listed below and are accessed through the theme settings. Setting Description Enable color swatch Use ...

• How do I use color schemes?

  Color schemes allow you to define groups of colors that are tailored for your store and work well together. Having a predefined set of color groups makes it quicker and easier to customize the colors used throughout your theme. A color scheme will ...

• How do I set up custom product badges?

  To set up a custom product badge, add a tag to the product that you wish to add the custom badge to, using the following format: "custom_badge_1-Name". The parts of the tag that should be changed are bold and italicised. The number represents the ...

• Do you provide code customization or theme set up services?

  If you require assistance that is not covered by our theme support, such as code customisation or theme set up, please contact us by submitting a ticket using the link at the bottom of the page. All additional services will incur an additional fee, ...