How to create product with color swatch?

This is an example of product with color attribute. The product should be a variable product

Firstly we should have the Color Attribute which will assign to the product

Create an attribute:

From your admin Dashboard, navigate to Products > Attributes

You will see the left panel let you decide to create a new attribute

Once the new attribute is added, you can see its available on the right panel

Now you need to add more color to your swatch, click on Configure Terms

Add your custom colors here and repeat until you created all of your needed colors

Assign color swatch to your product

Navigate to Products > All products and choose to edit your desired product

One in the product page editor, scroll down to bottom of the page and you will see something like this in Product data tab

Select Attribute tab and add your newly created Color Swatch

Choose your product colors and remember to click on Save Attribute and Update your product.

Now you need to assign image for each product variant by select the Variations tab. If you don’t have any variation, create new set of variations, in this example, we created variations from all available attributes, you can choose by your own how variants is created

After variations created, you might see something like this

Set image for each variation by selecting it and choose image

Repeat the same steps for another variant and you will be able to see your product attribute in color swatch style.

Additionally, if you want to display the Color Swatches in your product loop item, you can refer to this Eveland theme document (All of our themes are using the same settings method): Variation Swatches

Was this helpful to you?