Change Swatch Box Size

Diequit
Tourist
8 0 5

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

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

swatch.png

Replies 35 (35)

KetanKumar
Shopify Partner
36839 3635 11971

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Diequit
Tourist
8 0 5

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

Diequit
Tourist
8 0 5

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

KetanKumar
Shopify Partner
36839 3635 11971

sorry i can't see this view

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PascalR
Shopify Partner
39 0 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

KetanKumar
Shopify Partner
36839 3635 11971

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PascalR
Shopify Partner
39 0 6

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

KetanKumar
Shopify Partner
36839 3635 11971

@PascalR 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PascalR
Shopify Partner
39 0 6

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

KetanKumar
Shopify Partner
36839 3635 11971

@PascalR 

Thanks 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PascalR
Shopify Partner
39 0 6

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

KetanKumar
Shopify Partner
36839 3635 11971

@PascalR 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adurma
Tourist
11 0 4

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.

KetanKumar
Shopify Partner
36839 3635 11971

@adurma 

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

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

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adurma
Tourist
11 0 4
KetanKumar
Shopify Partner
36839 3635 11971

@adurma 

Thanks for store url 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adurma
Tourist
11 0 4

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 

KetanKumar
Shopify Partner
36839 3635 11971

@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 */
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
adurma
Tourist
11 0 4

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

KetanKumar
Shopify Partner
36839 3635 11971

@adurma 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Illuminated
Tourist
6 0 3

Hi Guys

I'm having the same problem with our theme Avenue on this page:

https://47tedmx2x6p1c5q2-57125896385.shopifypreview.com

 

Could you help with the CSS of just increasing the size of the color swatch. Maybe to 50-60px?

 

Many thanks,

Veronica

KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

Sorry you are facing this issue, it would be my pleasure to help you.

can you please give product url if swatch color i have check but i can't see any product

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Illuminated
Tourist
6 0 3

Hi

 

Thanks so much for getting back to me,

 

Please see link here: https://0orejpqouo4wxuhc-57125896385.shopifypreview.com/collections/kids-t-shirts/products/kids-glow...

 

We're trying to increase the size of just the color variant swatch. Not the sizing.

 

Many thanks,

Troy

KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

thanks for detail 

can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.min.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.swatch .swatch-element label:not(.error) {
height: 60px;
    line-height: 60px;
min-width: 60px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Illuminated
Tourist
6 0 3

Hi

Thanks for your quick reply. I just added the code, but it didn't change anything.

Please have a look at the page.

 

Not sure how it might work.

 

Many thanks,

Troy

KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

oh sorry i can not see above code can you please add?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Illuminated
Tourist
6 0 3

Hi Ketan

I added the code you mentioned:

.swatch .swatch-element label:not(.error) {
height: 60px;
    line-height: 60px;
min-width: 60px;
}

 Added it to css-variables.liquid folder

But this hasn't changes the colour swatch on our product page here: https://apqf64elqegg00dt-57125896385.shopifypreview.com

We would like the images to be 50-60px big.

 

Can you help?

 

Many thanks,

Troy

KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

can you please share prduct url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

great thanks 

sorry bt i can't see above code can you please add min and let me know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Illuminated
Tourist
6 0 3

Hi Ketan 

I'm a bit confused now?

You sent me a piece of code, I added this, but it didn't increase the size of the Color variant.

This is the page: https://www.illuminatedapparel.us/collections/kids-t-shirts/products/kids-glow-in-the-dark-t-shirt?v...

 

The code you told me to add was:

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.min.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.swatch .swatch-element label:not(.error) { height: 60px; line-height: 60px; min-width: 60px; }

I added this code and it didn't increase the swatch size.

 

Any ideas, what I can try?

 

Many thanks,

Troy

KetanKumar
Shopify Partner
36839 3635 11971

@Illuminated 

yes i have checked its working now 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
webmaster123
Visitor
2 0 0

Hi, I am using the broadcast theme and am not seeing the right area in assets to add this code to. 

KetanKumar
Shopify Partner
36839 3635 11971

@webmaster123 

yes, please provide store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
webmaster123
Visitor
2 0 0
https://roxbury-pet.myshopify.com
password: robertson

Thank you so much!!!