Shopify themes, liquid, logos, and UX
Hello, is there a way to make the Swatch variant box size bigger?
store is https://dayru.myshopify.com/ password is nuveum
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;
}
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?
Also, is there a way to make the swatches don't group above when there are more than 4?
sorry i can't see this view
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
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;
}
Hello. Thanks a lot. It is exactly what i wanted
Thanks for update and support.
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
Thanks
yes i have check this but is working fine can you please share video further issue
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
Thanks for sharing video let me find if possible to fix this issue
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.
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.
Thanks for store url
can you please let me know which box do you need change size
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
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 */
}
it's my pleasure to help us
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
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
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
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;
}
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
oh sorry i can not see above code can you please add?
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
can you please share prduct url?
Hi Ketan
Product URL: https://apqf64elqegg00dt-57125896385.shopifypreview.com/collections/kids-t-shirts/products/kids-glow...
Many thanks,
Troy
great thanks
sorry bt i can't see above code can you please add min and let me know
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
yes i have checked its working now
Hi, I am using the broadcast theme and am not seeing the right area in assets to add this code to.
yes, please provide store url
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024