Theme Help Centre

Color Swatches

Adding color variant

1. Log in to your Shopify admin panel.

2. From the Shopify admin dashboard, click on the “Settings” tab located at the bottom left.

3. In the Settings section, click on the “Custom Data” tab.

4. Under the Custom Data tab, click on the “Variants” section.

5. Click on the “Add definition” button to create a new custom variant definition.

6. Now, to add a color variant for products, follow these steps:

  1. In the “Definition Name” field, enter a name for the variant (e.g., “Color”).
  2. Set the “Type” as “Color” by selecting it from the dropdown menu.
  3. Namespace & key must be written as “color.value
  4. Select “One value” option. 
  5. Save the changes by clicking the “Save” button.

Store page > Products(left hand side) > click on a product > scroll down to “Options” section > (if options not enabled, click “This product has options, like size or color” to enable options) > Give “Option Name” as “Color”(spelt correctly) and add color options. 

Using drag toggle on left hand side, place “Color” option at the bottom below all other options.

Colors need to be added for each variant, to add color swatches click “Edit” button on a variant 

Once at the variant page, scroll down to the “Metafields” tab to add the color code. This needs to be done for each and every variant to render color swatches on the “Single Product” page/section.

Was this post helpful?