How can I modify the variant picker buttons and size text on my product page?

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user wants to modify variant picker buttons on their product page: making them rectangular (removing rounded corners) and making the ‘SIZE’ label text bigger and bold.

Solution provided:

  • Add CSS code to base.css file:
    • font-weight: 600 for the form label to make it bold
    • border-radius: 0 !important to make buttons rectangular

Additional requests addressed:

  • Another user asked how to remove the “Select Size” text entirely, solved by adding display: none CSS to the form label
  • A third user inquired about keeping color swatches as colors instead of text labels, but resolved it independently

Status: Original issue resolved successfully. The CSS modifications are applied through the theme’s code editor (Online Store → Theme → Edit code).

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello, guys! I’d like to change the shape of the variant picker buttons like the one on the second picture and also make the ‘SIZE’ text bigger & bold.

Website: https://fddd3f.myshopify.com/

Mine:

Screenshot_2.jpg

How I want them to be:

Screenshot_1.jpg

2

Hello @kitchencrafted ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

legend.form__label {
    font-weight: 600;
}
.product-form__input input[type=radio]+label {
    border-radius: 0 !important;
}

Thanks

1 Like
3

Thank you!

1 Like
4

Hello Developer,
I also did and it worked. Also, how can i remove the “Select Size” text?
https://diversusoficialsite.myshopify.com/products/signature-t-shirt?variant=47628807733576

Thank you in advance.

5

@HELDERWRLD

add this css

.product-form__input legend.form__label {
    display: none;
}
1 Like
6

Thank you so much
It worked!

7

Yes but it’s hard to provide a solution for these requirements here.
I suggest hiring a developer to do it.

8

Do you know how I can keep the color section in color instead of replacing it with text like ‘Black’?

9

@Yaz3 Can you please share a screenshot and a URL ?

10

No nvm, I fixed it.
Thank you !