How can I resize and enlarge swatch images for better visibility?

Store Design
, , , , , , , ,
1

I am trying to enlarge the swatch images compared to their current size (as shown in the screenshot).
Currently, there are 11 images/variants displayed in a row. I aim to have eight images per row to enlarge their size and therefore visibility.

https://2znw6yz6gcmnq31a-62792532213.shopifypreview.com/collections/all-products/products/customise-fridgy-600ml-tumbler-grip-range?variant=44597297676533
storefront password: test
Theme I am using: Flex

Any help would be greatly appreciated.

screencapture-testingstoresandthemes-myshopify-products-customise-fridgy-600ml-tumbler-grip-range-2024-02-11-00_16_55.png
screencapture-testingstoresandthemes-myshopify-products-customise-fridgy-600ml-tumbler-grip-range-2024-02-11-00_16_55.png1688×711 86.5 KB

2

Hi @technase

Try to find this code on your style.css under asset folder.

Made4uoRibe_0-1707596818397.png

And change into your desire size.

Or paste another code on the very last of the style.css folder.

.swatch .color label {
    min-width: 50px !important;
    height: 50px!important;
}

And Save.

Result:

Made4uoRibe_1-1707596916197.png
Made4uoRibe_1-1707596916197.png1314×565 120 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Super Helpful.. Thank you so much.

1 Like
4

Hi there, I have increased size but even then my image is so blur that I can hardly notice the fabric quality. can you help out how do I retain the best resolution in swatches?

5

I usually use 800x800 px image for swatches, works best.

6

Hii, do you have the same solution for the dawn theme because I can’t find style.css anywhere