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:
|
1 2 3 4 |
<image id="swatch_image" type="swatch_image"> <width>30</width> <height>20</height> </image> |
with
|
1 2 3 4 |
<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:
|
1 2 3 4 |
<image id="swatch_image" type="swatch_image"> <width>210</width> <height>210</height> </image> |
if not,
place the below line into media tag
|
1 2 3 4 5 6 |
<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:
Any doubts about the solution can be mentioned in the Comments section below. I’d be happy to help you out.
Also, please share the solution with the Magento community via social media.
Thank you.
6 Comments
Changing in vendor/* any file will be reverted on next composer install/update. In the php world, it is FORBIDDEN to change in vendor/* files
Hey Madalin Don’t do the changes in the Vendor File,
Instead override that file in theme and then make the changes.
Is it possible to change the size image swatches without changing the size of text swatches?
Hello Alvin,
You can change the size of image swatches by applying custom CSS
Thank You
This is helpful, but on my product lists I’m getting this inline style applied to each single image swatch:
background-size: initial;
width: 30px;
height: 20px;
where is this coming from?
How do i change this? thanks
Hey,
You can update it in the CSS path.
Thanks.