Magento 2.4.7 ( local development) .
I like to change the size of visual swatch on product detail page only . in my custom view.xml i have added following .
<image id="swatch_image" type ="swatch_image"> <width>50</width> <height>50</height> </image>
this change works .. however, It also effect the size of swatch on product listing which i don't what that to happen. I found other directive to add to view.xml , however, nothing else seems to work at all . any info would be appreciated.
Thanks
Hello @tonysargma79f8
To change the size of visual swatch images on the product detail page only in Magento 2, you can target the specific CSS classes related to the swatches and limit the scope of the change to the product detail page using the .catalog-product-view class.
/* Change the size of visual swatch images on the product detail page */
.catalog-product-view .swatch-option {
width: 50px; /* Adjust this value as per your design */
height: 50px; /* Adjust this value as per your design */
}
.catalog-product-view .swatch-option .swatch-option-image {
width: 100%; /* Ensure image fits the swatch box */
height: 100%; /* Ensure image fits the swatch box */
}
Hope it helps !
If you find our reply helpful, please give us kudos.
A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
WebDesk Solution Support Team
Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
Thank You,
WebDesk Solution Support Team
Get a Free Quote | Email | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
Location: 150 King St. W. Toronto, ON M5H 1J9