Change variant picker to square

Store Design
, , ,

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.
1

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

Screenshot 2025-03-18 at 15.40.07.png
Screenshot 2025-03-18 at 15.40.07.png602×330 25.6 KB

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

Screenshot 2025-03-18 at 15.42.20.png
Screenshot 2025-03-18 at 15.42.20.png469×364 27.6 KB

where it is a square/rectangle

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

2

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

Thanks!

3

hello, this didnt work

4

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>

PageFlyRichard_0-1742346875256.png
PageFlyRichard_0-1742346875256.png400×273 47.4 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly