0 votes from 0 votes

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.


  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.




  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.


  9. 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




    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.

Bulk Upload Magento Swatches FREE Start Now


Further Reading:

    Free upgrade to Magento 2 supported version