Rating 4.5 stars - 4 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. Magento 2 Swatch Attribute in the Admin
    How to Add Swatch Images in Magento 2

  5. 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.
    Magento Swatch Setup
    How to Add Swatch Images in Magento 2

  6. 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. Add Magento Swatches
      How to Add Swatch Images in Magento 2

    3. Specify attribute value name (swatch name).

    4. Magento 2 Attribute Values
      How to Add Swatch Images in Magento 2

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

    Magento 2 Swatch Image
    How to Add Swatch Images in Magento 2

    Customize Magento 2 Swatch
    How to Add Swatch Images in Magento 2

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

  8. How to Add Swatch Images in Magento 2
    How to Add Swatch Images in Magento 2

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

  10. Magento 2 Attribute Label
    How to Add Swatch Images in Magento 2

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

  12. Magento Swatch Image Storefront Properties
    How to Add Swatch Images in Magento 2

    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

    Magento 2 Configurable Product Images
    How to Add Swatch Images in Magento 2

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

    Magento 2 Swatch Changes Main Product Image
    How to Add Swatch Images in Magento 2

    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

Related Articles:

Add Magento 2 Visual Swatches With Store Manager for Magento

Add Magento 2 Visual Swatches

Find out how to add visual swatches to configurable products at the step of their creation or assign to already existing products manually or via import. Read More...

how import configurable products to magento 2 article

How Import Configurable Products to Magento 2

Learn how to create Magento 2 configurable products from scratch and update them and assign existing simple products to configurable. Read More...

what to do if magento swatches do not work

Magento Swatches Do Not Work? Here Are Things To Be Checked

Find out what you should do when swatch images do not appear on the front-end (drop-downs are still there or instead of images you got image placeholders etc). Read More...

Converting Magento Simple Products into Configurable

Converting Magento Simple Products into Configurable

Find out how to easily change Magento simple product type into configurable select associated items and configurable attributes for it. Read More...

Live Chat