If Your store is running on Magento 2 eCommerce Platform and you need to change the swatch image size on the product detail page then you are at the right place. Here you will learn three ways to change the image size of the swatches in the Magento 2 store.
First Method:
Go to your root Magento directory and open the view.xml file path: vendor\magento\module-swatches\etc\view.xml
Find the Code
|
1 2 3 4 5 |
<image id="swatch_image" type="swatch_image"> <width>30</width> <height>20</height> </image> |
And change swatch dimensions as per your need like
|
1 2 3 4 5 |
<image id="swatch_image" type="swatch_image"> <width>210</width> <height>210</height> </image> |
Second Method:
If you have a theme installed, open the app/design/frontend/theme_vendor/theme_name/etc/view.xml file and search for “swatch_image” If it is available then change the dimensions as you want
|
1 2 3 4 5 |
<image id="swatch_image" type="swatch_image"> <width>210</width> <height>210</height> </image> |
If this code is not available then place the below line into the media tag:
|
1 2 3 4 5 6 7 |
<images module="Magento_Catalog"> <image id="swatch_image" type="swatch_image"> <width>210</width> <height>210</height> </image> </images> |
Third Method:
You can change the Magento 2 swatches image size by using CSS. You need to add this CSS in your custom CSS of Magento 2 store
|
1 2 3 4 5 |
.catalog-product-view .page-wrapper .swatch-option { height: 50px; min-width: 50px; } |
After following this method you need to clear the Magento
Now Its time to check the result lets reload your Product Page.
Than You! 🙂
Read More
