hi, is it possible to transform the sizes to the form of rectangle instead of a pill?
https://winandgetrich.com/products/natural-tee
i am talking about the form around ‘xs’ ‘s’ etc.
i want it to be a rectangle
Topic summary
A user asks how to change product size selectors from pill-shaped buttons to rectangular ones on their Shopify store.
Solution Provided:
A PageFly support representative offers a CSS-based fix:
- Navigate to Online Store → Theme → Edit code
- Locate the base.css file
- Add custom CSS code at the bottom to override the border-radius property
The code targets product form input labels (specifically radio buttons for size selection) and sets border-radius: 0 !important to create sharp rectangular corners instead of rounded pill shapes.
The response includes a screenshot demonstrating the implementation steps. The solution appears straightforward and requires basic theme customization access.
This is Victor 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 base.css
Step 3: Paste the below code at bottom of the file → Save
.product-form__input input[type=radio]+label {
border-radius: 0 !important;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly