Changing size of variant options on product page

byneilvernon
Tourist
21 0 3

Hi, 

 

I'm having trouble reducing the size of my sizing variant options. This is what my website currently looks like, see how the sizing boxes are extremely big:

Screen Shot 2023-09-30 at 1.01.46 pm.png

 

This is what I'd like it to look like:

Screen Shot 2023-09-30 at 1.01.04 pm.png

 

My website url is: https://768950-4.myshopify.com/ 

 

Any help is greatly appreciated!

Shanelle

Replies 2 (2)

Moeed
Shopify Partner
3672 928 1159

Hey @byneilvernon 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__align-left .radio__button label {
    padding: 0 !important;
    display: inline-flex !important;
}
</style>

RESULT:

Moeed_0-1696052061876.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
byneilvernon
Tourist
21 0 3

Thankyou so much Moeed! It helped reduce the size, but is there any way to reduce the spacing between each size box so that all the sizes can appear on one line? Instead of how it looks now where the size 'XL' is on the next line.

 

Screen Shot 2023-10-01 at 6.04.03 pm.png