How to display color swatches on the single product page?

In order to display color swatches  as the following image, you can follow the instruction below:

Step 1: You need to create the color attribute under Products > Attributes.

  1. Enter the name of the attribute.
  2. Enter slug
  3. Select type of how attribute display. (Choose Color if you create the color attribute)
  4. Select Default sort order
  5. Press Add Attribute.
  6. Click Configure terms.

Note: If you want to edit the type attribute display, you can click to Edit under the color name. And select other type.

Step 2: After click to Configure terms, you will direct to the window that allows you to create new color:

  1. Enter the name of the color.
  2. Enter slug
  3. Select color.
  4. Click Add New Color.

Note: You also can edit the name or color by click the Edit under the color name.

Was this page helpful?
Yes No