Change Swatch Box Size

Highlighted
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

Highlighted
Shopify Partner
9659 1208 3376

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
Highlighted
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

Highlighted
Tourist
7 0 5

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

Highlighted
Shopify Partner
9659 1208 3376

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
Highlighted
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

Highlighted
Shopify Partner
9659 1208 3376

@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
Highlighted
Excursionist
16 0 4

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

Highlighted
Shopify Partner
9659 1208 3376

@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
Highlighted
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