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

Store Design
, , , , , , , ,

Topic summary

Goal: make product option swatches (small color/fabric thumbnails) larger by reducing items per row in the Flex theme for better visibility.

Solution (Flex theme):

  • Edit Assets > style.css and adjust the swatch selector sizing, or append custom CSS at the end of the file:
    .swatch .color label { min-width: 50px !important; height: 50px !important; }
  • This increases each swatch’s dimensions; screenshots showed the successful result. OP confirmed it worked.

Image quality concern:

  • A participant reported blurry swatches after enlarging. Another user suggested using higher-resolution source images (e.g., 800×800 px) to retain clarity when displayed larger.

Theme variance:

  • A Dawn theme user couldn’t find style.css (Dawn uses different asset structure and often section/component CSS rather than a single style.css). No specific Dawn-targeted guidance was provided in the thread.

Status:

  • Resolved for Flex (CSS override works).
  • Partially unresolved: best practices for preventing blur beyond higher-res images, and where to apply equivalent CSS in Dawn. Attachments were illustrative; the key artifact is the CSS snippet.
Summarized with AI on December 26. AI used: gpt-5.
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