Product detail Swatch Size

[tonysargma79f8]

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

[johnwebdes40a5]

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