Solved

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

technase
Shopify Partner
110 1 25

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-...
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

 

 

 

technase
Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5977 1439 1775

This is an accepted solution.

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

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
5977 1439 1775

This is an accepted solution.

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

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


technase
Shopify Partner
110 1 25

Super Helpful.. Thank you so much. 

technase
Mujaida
Tourist
18 0 1

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?

 

technase
Shopify Partner
110 1 25

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

technase