Swatch Resizing. Someone please help

Technical Q&A
1

Can someone help me resize the swatches for mobile please. I have spent the last 5 hours trying to do it and have go no where. I have managed to do it for desktop but not mobile. Please can someone help me

2

Hello @RVWebsitehelp ,

I hope you are doing well!

Can you please provide the store URL so that I can check and provide you with the CSS that will fix and the swatches will appear as the required size.

3

Hey @RVWebsitehelp!

Can you provide the following info?

  • Your shop URL
  • Directions to the location of the swatches you are looking
  • The name of the Shopify theme you are using

From there we can help point you in the right direction

Cheers!

4

If you go onto the soft plastics>v2.0 renaissance and then view the product in mobile view the swatches are not the same size as the one on desktop. I need them to be just as large with a scrollable carousel of swatch images. If you need a reference of what I would like then please see this as an example: Rapala® X-Light Shad | Rapala® United Kingdom

My theme is Focal

5

Please copy and paste the code below to base.css or theme.css. To find base.css or theme.css go to Online store >> Theme >> Edit code >> Search for base.css or theme.css and paste the code to the top.

Alternatively, if you were not able to paste the code, please go to Online store >> Themes >> Customize >> Click on Settings icon to the left >> Search for custom css at the bottom and paste the code.

@media screen and (max-width: 768px) {
.color-swatch-list {
gap: 45px !important;
}

.color-swatch__item {
    width: 80px;
    height: 80px;
}

}

So, this will change the swatches’ size on mobile and it will appear like -

image
image504Ă—787 47.9 KB

6

Try this code, should be ok in “Product info” section “Custom CSS” setting:

.color-swatch-list {
  --swatch-size: 100px; /* can change this */
  grid-template-columns: repeat(auto-fit, var(--swatch-size));
}

label.color-swatch__item {
  width: var(--swatch-size);
  height: var(--swatch-size);
}

Screenshot 2025-09-17 at 2.45.30 AM
Screenshot 2025-09-17 at 2.45.30 AM398Ă—713 83.4 KB

1 Like
7

Hi @RVWebsitehelp,

Please go to Actions > Edit code > Assets > theme.css.liquid file and paste this at the bottom of the file:

@media screen and (max-width: 740px) {
.color-swatch-list {
    grid-template-columns: 50px !important;
}
.color-swatch__item {
    width: 50px !important;
    height: 50px !important;
}
}
8

Hi @RVWebsitehelp I hope you’re doing well. :raising_hands:

It seems like you’re having trouble adjusting the swatch size on mobile - while you’ve been able to do it on desktop, customizing it for mobile requires fairly complex and time-consuming code changes.

In this case, Easify Product Options can help you solve the issue cleanly without touching any theme code. Swatch sizing can be fully managed directly within the app.

Here’s an example I’ve created so you can see how it works:

  • This is the result:

image
image1464Ă—1366 152 KB

  • This is the app setting:

image
image2048Ă—1079 176 KB

First, you can simply create an option set in our app as usual. In the demo I’m working on, I’m using Color Swatches.

image
image1840Ă—968 132 KB

Then, simply go to Settings → App Design in Easify Product Options. There, you can adjust the size of image swatches, button swatches, as well as the spacing between options. These settings will automatically apply to both desktop and mobile, ensuring the swatches look clean, easy to view, and easier to interact with on smaller screens.

image
image1830Ă—964 135 KB

Overall, the app is designed to handle UI-related issues like this in a clear and user-friendly way, so you won’t have to spend extra hours struggling with CSS anymore. If you need any further assistance during setup, you can simply reach out to our team directly via live chat inside the app.:smiling_face_with_three_hearts: