Using Color Swatches in Magento 2 provides a visually appealing experience for your website visitors. It allows visitors to instantly see the corresponding image when choosing a colour before adding it to their shopping cart, improving the user experience.

Besides colour choice, customisable swatches also offer options for size, material and texture. In this article, we will look specifically at using the Color Swatch.

Setting Up Color Swatches in Magento 2

Step 1: Configure Color Attribute Settings

1. Navigate to Admin Interface:

- Go to Stores -> Attributes -> Product.
 

- Click on the color attribute.

2. Settings Configuration:

   - Catalog Input Type for Store Owner: set to `Visual Swatch`.

   - Values Required: set to `No`.

   - Updated Product Preview Image: Set this to `Yes` if you want the product image to change based on the chosen colour.

   - Use Product Image for Swatch if Possible: set to `No`.

   - Don't change the settings of Advanced Attribute Properties.

Stap 2: Add a new Color Swatch

1. Add a new swatch:

   - Click on `Add Swatch`.

2. Choose color:

   - Select `Choose a color` from the dropdown or upload a file.

   - For `Choose a color` you can select a color through the color picker or by using the hexadecimal code.

3. Give the swatch a name:

   - After choosing a color, you name the swatch in the Admin. Enter the exact name matching the attribute in Tweakwise

4. Upload a file(optional):

   - If you want to upload a file, choose `Upload a file` and select your file. Make sure it is a square image.

   - Check that the new colour swatch is correct.

5. Save the attribute:

   - Don't forget to save the attribute.

Step 3: Updating products with the Colour Swatch

1. Go to Catalog -> Products:

   - Select the products you want to add the new colour swatch to.

   - Click on `Edit Configuration` or `Create Configuration`.

2. Adjust attributes:

   - Add adjustments to the product attributes.

   - Select the attributes you want to activate and click `Next`.

   - Choose the specific attributes for the product and click `Next` again. Each unique combination of attributes creates a unique product SKU.

3. Link images (optional):

   - You can choose to link a selection of images to all SKUs.

Step 4: Batch update of products

1. Go to Admin -> Catalog -> Products:

   - Select the products to which you want to attach swatches.

   - In the ‘actions control’ dropdown, select `Update Attributes`.

2. Change colour:

   - Scroll to ‘colour’, choose `change`, and select the colour swatch you want to apply.

   - Save the changes.

3. Empty the cache:

   - Remember to empty the cache via the `Cache Management` tab.

By following these steps, you can easily set up and manage Color Swatches in Magento 2, contributing to a better user experience on your website.