Here you can find the instructions on how to create the color attribute and add a color swatches to the Simple Product in Magento 2.
Create a Color Attribute
- Go to the Store > Products section.
- Click on the Add New Attribute button.
- Select Visual Swatch from the Catalog Input Type for Store Owner option dropdown.
- Set the Update Product Preview Image option to Yes
*In case of filtering by the color attribute the product image on catalog page will be updated.
- Select colors for swatches in the Manage Swatch (Values of Your Attribute) section.
Add a swatch
- Press the Add Swatch button.
- Select Choose a color from the swatch’s dropdown, if you want to use a simple color for the swatch.
- You can upload an image file for your swatch as well. (select Upload a file option from the swatch’s dropdown) *Click Clear if you want to reset the changes to default values.
- Enter the name for the specific color in the Admin column. This name will NOT be displayed on the frontend.The names you specify in the Default Store View, store view, store view 2 will be visible on the frontend.
Advanced Attribute Properties
- Enter the Attribute Code without spacing (e.g. color) in the Advanced Attribute Properties option field.
- Set the Scope option to Global.
- Set the Unique Value option to No.Set Add to Column Options and Use in Filter Options to Yes.
Storefront Properties
- Go to the Storefront Properties tab, and select Filter (with results) from the Use in Layer Navigation option dropdown.
- Select Yes for Use for Promo Rule Conditions and Used in Product Listing options.
- Save the Attribute (press the Save Attribute button).
Add the Color Attribute to the attribute set
- Go to Stores > Attribute Set section.
- Open the Default attribute set. Drag the created color attribute into Product Details and click Save.
Add Swatches to the Simple Product
- Search for the product you want to add the color swatches to.
- Check the product status (should be enabled).
- The Visibility option should be set to Catalog, Search.
- Click the Create Configurations button (under the “Configurations” tab).
- In the pop up window you will see the list of the product configurations. Choose the Color attribute (the attribute you’ve created) and click on the Next button.
- Select values from the attribute you want include in this product (select colors).
If your product comes in different colors, you need to select them. E.g. Pink, Blue, Green etc.
- Click the Next button.
- At this stage you are able to customize images, price and quantity for your new products.
Upload Images
- If you want product to have different images for each color, you need to select Apply unique images by attribute to each SKU and the Attribute Color.
- It will show up three image fields with a specific color on them (you can select more than one image for a color ). You only need to browse the images (one or more than one image).
The first uploaded image will be set as Base, Small, Thumbnail and Swatch Images.
Specify the Price
- If you want product to have different Price for each color, you need to select Apply unique prices by attribute to each SKU and the Attribute Color. Then you need to specify the price for each field.
Set the Quantity
- To set Quantity for each product click on Apply unique quantity by attribute to each SKU and enter the quantity in each field.
- After click on the Next button.
On the next page you will see a summary of the Products that are added.
To check the product status open the configurable product to edit.
Go to the Configurations section and expand the tab. You’ll see the table with the current product variations. Click on the product title to open the product settings.
The Stock Status should be “In Stock”. If not, select In Stock from the Stock Status option dropdown. Remember to Save the settings (click on the Save button).
Add the primary image
The primary image of the product is the Image you see on the product page after the one is fully loaded.
- Open the configurable product to edit. (Products > Catalog > click on the configurable product title link.)
- Navigate to the Images And Videos section and expand the tab.
- Upload the image you want to see as the primary on the frontend.
- Remember to Save the settings.
[notice type=”warning”]Clear the cache and reindex the data. You need to do this in order new product configurations appear on your website.
