How can I increase the swatch variant box size in my online store?

Store Design
1

Hello, is there a way to make the Swatch variant box size bigger?

store is https://dayru.myshopify.com/ password is nuveum

swatch.png
swatch.png468×139 6.57 KB

2 Likes
2

Hello, @Diequit

Welcome to the Shopify community!
and Thanks for your Good question.

  1. Go to Online Store->Theme->Edit code
  2. **Asset->/theme.scss.liquid->**paste below code at the bottom of the file.
.swatches .swatches__option {
   min-height: 80px;
    min-width: 80px;
    background-repeat: no-repeat;
    background-size: cover;
}
2 Likes
3

Sir, you are the real MVP. thanks for your time.

I have another question, I tried to fix my footer to look like this first photo but it didn’t work and instead looks like the photo 2, what should I do?

footer 1.png
footer 1.png507×124 1.07 KB

footer 2.png
footer 2.png550×368 2.09 KB

1 Like
4

Also, is there a way to make the swatches don’t group above when there are more than 4?

1 Like
5

sorry i can’t see this view

1 Like
6

Hello

i should like to add this code but i have not Asset->/theme.scss.liquid in our theme Flex by outofthesandbox

https://africa-wax.myshopify.com/ password africawax

Thanks

Pascal

1 Like
7

@PascalR

Thanks for post

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.scss.liquid->paste below code at the bottom of the file.
.swatch .color label {
    min-width: 80px;
    height: 80px !important;
}
1 Like
8

Hello. Thanks a lot. It is exactly what i wanted

1 Like
9

@PascalR

Thanks for update and support.

1 Like
10

Hello do you have a soluce for this problem. When we slide the product image the color of the image change but not the color in swatche. Is it possible to select color by sliding image instead on select swatches Regards

1 Like
11

@PascalR

Thanks

yes i have check this but is working fine can you please share video further issue

1 Like
12

Hello, look the video. In the first party we slide on the big image on the reight and the color 462 don t change.

In the second party we click on the watche of color and the big image on left change each time.

Is it possible to have the same with the big image when we slide big image the color change

Video sent by wetransfer

Regards

1 Like
13

@PascalR

Thanks for sharing video let me find if possible to fix this issue

1 Like
14

Hi KetanKumar,

In my theme Envy by wetheme there is no Asset->/styles.scss.liquid or Asset->/theme.scss.liquid-. Would you be kind to assist me on the matter? Thanks in advance.

1 Like
15

@adurma

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

1 Like
16

https://lazzoni-nl.myshopify.com/

1 Like
17

@adurma

Thanks for store url

can you please let me know which box do you need change size

18

Thanks for the reply. I want to increase the size of color swatch boxes in order for the fabrics to be more visible.

Product example: https://www.lazzoni.nl/collections/living-chairs/products/arte-armchair?variant=37648323575970

19

@adurma

Thanks for it

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-product.min.css->paste below code at the bottom of the file.
.color.swatch-element label {
min-width: 44px; /* change value as you like */
min-height: 44px; /* change value as you like */
}
1 Like
20

@KetanKumar Thank you very much! It is really helpful! Exactly what I needed.

1 Like