How to add swatch images in Magento 2

Magento 2 swatches are used by store owners in order to represent customers the variety of colors or patterns on configurable product page. It is an apt way to substitute drop-downs with a series of colorful buttons and visualize Magento 2 configurable product selections.

One of functional shifts, Magento 2 boasts of, refers directly to swatch images. Comparing to Magento 1.x swatch image handling has been simplified and the whole process now runs smoother.

Below in this post we’ll shed a light on how to configure swatch images in Magento 2 and get them displayed instead of ordinary drop-down options.

I. Create Configurable Attribute with Visual or Text Swatch Input Type

As you already know, configurable product creation starts from the attribute, used further to generate variations. Attribute is added in the following way:

1. Navigate to Stores->Attributes->Product in the admin sidebar to access Magento attribute list.


2. Press Add New Attribute button on the toolbar to start attribute setup.


3. Input all attribute related details: attribute label, scope, attribute code and other in Properties tab.







In order to display clickable swatches on the product page, you must select Visual Swatch option in Catalog Input Type for Store Owner dropdown. Please note, you have also Text Swatch option at disposal. Set this input type if you prefer to show clickable text options for your Magento 2 attribute values.
4. Consider Use Product Image for Swatch if Possible at this page. It allows you to display simple product images as clickable swatches at the product page. By default it is disabled and if you enable it, ordinary product patterns will be substituted with real product pictures.
   

   

   
   
5. Add Magento 2 swatch patterns that will display as selectable options at configurable product page. These are configurable attribute values further used to generate associated simple products.
1. Press Add Swatch button under Manage Swatch heading.







2. Specify attribute value name (swatch name).







3. Select pattern to be displayed for this color at the storefront. To do this, click the arrow beside Swatch image placeholder. Move the vertical slider to select color and click into color square for desired color cast.







If you have some specific color pattern and want to display the texture as it really looks like, you are welcome to assign your swatch image in Magento 2 via Upload a file







6. Having added all the swatches and their names, continue with advanced attribute properties, specify attribute code, scope, indicate whether unique values must be used.







7. Add attribute label in corresponding tab of attribute page.







8. Move to Storefront Properties tab and configure setting available on this page.








II. Create Magento 2 Configurable Product

Once you have configurable attribute, values for which will display as Magento 2 swatches, you can create product variations, as this article describes - Magento 2 Configurable Product Creating: Step by Step Guidance




Important

To get configurable product image swapped when Magento 2 swatch is clicked at storefront, you need to assign corresponding Base image to each of your associated simple products in the process of generation.








We have created test product with swatches and assigned corresponding images to each. Here are results.









Set diverse product catalog and make appealing product pages using Magento 2 swatches. Ensure positive customer experience using this alternate way to display options for configurable products.