How to Change Swatch Image Size in Magento 2

A swatch in Magento 2 is a feature to offer product variations to the customers.

A Magento 2 configurable product displayed on the frontend with swatches allows the customers to choose easily from the options available.

The default Magento 2 swatch types are text, color, and image swatches that make the product description more insightful and boosts the conversion process. Read more about Color Swatches in Magento 2.

Now if you want to change swatch image size in Magento 2 store as per the theme, you can do so with the below code.

Adjust the image swatch size in such a way that gives the visitors a better visualization of the product variation and encourages sales!

Here’s how the default swatch image looks like:

Method to Change Swatch Image Size in Magento 2:

If you have Magento 2 installed in your local with the Luma theme and change the size of swatch:

Open vendor\magento\module-swatches\etc\view.xml

Replace the below code:

<image id="swatch_image" type="swatch_image">
    <width>30</width>
    <height>20</height>
</image>

with

<image id="swatch_image" type="swatch_image">
    <width>210</width>
    <height>210</height>
</image>

If you have a theme installed, open app/design/frontend/[theme]/etc/view.xml file and search for “swatch_image”

If it is available then change code:

<image id="swatch_image" type="swatch_image">
    <width>210</width>
    <height>210</height>
</image>

if not,

place the below line into media tag

<images module="Magento_Catalog">
    <image id="swatch_image" type="swatch_image">
        <width>210</width>
        <height>210</height>
    </image>
</images>

That’s it. You can also resize specific product image in Magento 2 using command that will help you optimize website performance by ensuring that product images are of the right size, reducing load times.

Once done, you can check the updated image swatches as shown here:

Also, please share the solution with the Magento community via social media.

Thank you.