Hello !
My website is www.lothaire.fr and I’m using the Impulse theme. What would be the best way to make these variant frames on product pages thinner ? Or to generally customize them anyway ?
Thank you very much.
Let try to add this custom CSS code to your theme settings or edit code then add end of file theme.css:
.variant-wrapper .variant-input-wrap input[type=radio]:checked+label {
box-shadow: 0 0 0 1px var(--colorTextBody);
}
the result:
- Go to Online Store → Theme → Edit code.
- Open your theme.css / based.css file and paste the code in the bottom of the file.
.variant-input-wrap input[type=radio]:checked+label {
box-shadow: 0 0 0 1px var(--colorTextBody) !important;
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 
(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
Hello @LothaireBordeau
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
.variant-input-wrap input[type=radio]:checked+label {
box-shadow: 0 0 0 1px var(--colorTextBody);
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
This solution is great but it seems to have added a black stroke around the first thumbnail, right ? Can this be hidden ?
Yes but it express as current selected variable, you want hide it? Then user can’t see which variable they chose
let try this
Sorry if I was unclear. It’s not the thumbnail I want to hide, it’s the black thick stroke around it.
Yes if you want to reduce the size of thick stroke around the variant thumbnail. let try to use this CSS:
.variant-wrapper .variant-input-wrap input[type=radio]:checked+label {
box-shadow: 0 0 0 1px var(--colorTextBody);
}
No, it doesn’t seem to have worked, although I have pasted it in the same place than the other code you suggested.