Change Swatch Box Size

Diequit
Tourist
7 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

KetanKumar
Shopify Partner
20566 2126 7783

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
7 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
7 0 5

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

KetanKumar
Shopify Partner
20566 2126 7783

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
Excursionist
23 0 5

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
20566 2126 7783

@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
Excursionist
23 0 5

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

KetanKumar
Shopify Partner
20566 2126 7783

@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
Excursionist
23 0 5

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