Change the shape of the sizes and add to cart button

Store Design

Topic summary

A user wants to modify the appearance of size selectors and add-to-cart buttons on their Shopify store to have small rounded corners, similar to a provided screenshot.

Specific Requirements:

  • Add rounded corners to both size options and cart button
  • Apply matching outline styling to size selectors
  • When a size is selected, the border should turn blue (matching the cart button color)

Proposed Solution:
A PageFly support representative suggests editing the theme’s CSS by:

  • Navigating to: Online Store → Theme → Edit code → Assets → base.css
  • Adding custom CSS targeting .product-form__input elements and radio button states
  • The code snippet includes styling for checked radio buttons with specific border, background, and color properties

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

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

hey, does anyone know how to change the shape of the sizes and add to cart button. I would like to have with a small rounded corner like in the screenshot.

and i would like to have the same outline for the sizes and if one size is selected the border turns into the same blue like atc button

shop: parfumprobenshop.de

pw: test1

thanks in advance

Screenshot_7.png
Screenshot_7.png671×113 4 KB

2

Hi @drew23

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.product-form__input input[type=radio]:checked+label {
    background: white;
    border: 2px solid #0470e5 !important;
    color: black;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like