Change Swatch Box Size

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

Shopify Partner
11890 1465 4309

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
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

Tourist
7 0 5

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

Shopify Partner
11890 1465 4309

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
16 0 4

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

Shopify Partner
11890 1465 4309

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
16 0 4

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

Shopify Partner
11890 1465 4309

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Excursionist
16 0 4

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