Swatches image size

Hello, I have one issue with swatches image size.
You can see it for example here https://new.roomfactory.sk/produkty/dizajnove-stolicky
Little thumbnails under main product image are loaded with size 416x510px even if it has real size 25x25px. And after choosing one color variant, it loads another image with almost same size. When taking into consideration that there can be hundrets of such images on one page, it takes much more time to load the page. Can you change it to make it load really small swatches? It would definitely help the page performance. Thanks.

Hello,

The swatch size on the product grid is predefined and no matter what image size you upload it would be 25x25px.

Please add this code to the Theme Settings > Custom CSS > Global to change the size as per your needs:

body .swatch-on-grid.swatch-with-bg {
    width: 25px;
    height: 25px;
}

Best Regards

Thank you for your response, I see, that the size is 25×25 but the background image, that is loaded is much bigger. I attach screenshot. So it load for example 35 images with size 600×400 while it could load 35 images with size 25×25 and its a big difference.

Hello,

You can add the custom code and increase the size as per your needs. Yes, swatches are small and in most cases, nobody needs bigger. If you have any difficulties please clarify.

Best Regards

As I can see, you dont understand the issue. I dont want to change the size of swatch, now its 25x25px and ist ok. But the image, that is loaded as a background of this small swatch has much bigger size than needed so the page loads for example 8,5 MB instead of 3 MB. The issue is, that it should load much smaller image for swatch background.

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

[Author]

Posts