Change variant picker to square

Topic summary

A user wants to change their variant picker for ring sizes from circular to square/rectangular buttons while keeping color swatches unchanged. The site uses the Dawn theme.

Attempted Solutions:

  • First response provided CSS code to add before the </body> tag, but this did not work.
  • Second response from PageFly support provided alternative CSS targeting .product-form__input--pill label with border-radius: 5px !important;

Implementation Steps:

  1. Navigate to Online Stores > Themes > More Actions > Edit code
  2. Open theme.liquid file
  3. Add the CSS code above the </head> tag

Status: The discussion remains open as the user has not confirmed whether the second solution resolved the issue. Screenshots were provided showing the current circular design and desired square/rectangular appearance.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Hello, i want to change my variant picker to square for my sizes without changing my color swatches:

As you can see the Ring Size is currently a circle, i want it to look like this:

where it is a square/rectangle

my website is www.alexadrawestbrook.com , theme is dawn

Hi @ads18922
Please put this css in theme.liquid before body closing tag


Thanks!

hello, this didnt work

Hi @ads18922

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

<style>
.product-form__input--pill label {
    border-radius: 5px !important;
}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly