You can add color swatches to your product pages.

Screenshot 2022-01-27 at 16.36.25.png

To activate it, please follow these steps:

  1. From the Shopify admin, go to the Theme editor (Online Store > Themes > Customize)

  2. Navigate to the product section where you want to add the color swatches

  3. Add or expand the "Variant picker" block

  4. On the "Variant option for swatches" input field, introduce the variant option name you want to activate. Use a comma separated list to support multiple options: "Color, Material":

    Screenshot 2022-01-27 at 19.19.11.png

    <aside> ⚠️ IMPORTANT: color names that are not part of the standard CSS Colors list will not automatically show up. Example of valid color names are: "Red", "Green", "Indigo" or "GoldenRod".

    </aside>

If your color names are not part of the CSS Colors list, or you are using a texture or material, you can still use color swatches following these steps:

  1. Create a small squared JPG image of 100 x 100 pixels with the color, texture or material you want to use.
  2. For the file name, use the same option value, but in lowercase and dashes. Some examples:
    1. Wood → wood.jpg
    2. Rustic Cherry → rustic-cherry.jpg
  3. Once you have the files, upload them files to your store’s Files folder (https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads)
  4. And that’s it. The theme’s code will automatically look for those files and show up as the color swatches.