Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

Solved

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

technase
Shopify Partner
195 1 45

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
9044 2161 2667

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
9044 2161 2667

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
technase
Shopify Partner
195 1 45

Super Helpful.. Thank you so much. 

technase
Mujaida
Tourist
25 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
195 1 45

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

technase
BudiGas
Visitor
1 0 0

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