cancel
Showing results for 
Search instead for 
Did you mean: 

Product detail Swatch Size

Product detail Swatch Size

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

1 REPLY 1

Re: Product detail Swatch Size

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