How can I enlarge button size for product variants?

[vgodenir]

Hello everyone. I am wondering how to make the button size (of the circled buttons) and font within the buttons bigger. The product varients are from the app Easify product options, if that matters.

https://grace-and-glamour-sk.myshopify.com/

password: home

[Vinsinfo]

@vgodenir Do you want to display same as the options in https://grace-and-glamour-sk.myshopify.com/products/pharmacy-designation-pin or do you want to display the options like below image? Please share more details how exactly you want to display.

[niraj_patel]

Hello @vgodenir

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.tpo_buttons-wrapper > label{ padding: 0px 14px !important; font-size: 17px !important; } .tpo_buttons-wrapper > .tpo_shape_circle { height: 31px !important; min-width: 31px !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

Hi @vgodenir

Go to your Online Store > Themes > Edit code > open style.css, add this code at the bottom

.tpo_buttons-wrapper > .tpo_shape_circle {
height: auto !important;
width: auto !important;
}
.tpo_buttons-wrapper > label {
font-size: 18px !important;
padding: 4px 16px !important;
}

[PageFly-Henry]

Hi @vgodenir

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file style.css

Step 3: Paste the below code at bottom of the file → Save

.tpo_option-label label {

font-size: 22px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[vgodenir]

i apologize i didnt see this sooner! they all ended up working for me. thanks so much everyone!