A user seeks help organizing size selection bubbles on a Shopify product page to reduce visual clutter. The current layout appears misaligned and messy.
Two CSS solutions were provided:
AnneLuo’s approach: Add custom CSS code to the theme.liquid file, placed above the </head> tag. This method modifies the theme’s global styling.
Rahul_dhiman’s approach: Navigate to component-product-variant-picker.css in the theme’s assets folder and append CSS targeting .product-form__input elements with border-radius: 6px !important to create uniform pill-shaped buttons.
Both solutions include visual examples showing the improved alignment. The user also asked about converting bubbles to squares as an alternative styling option.
Status: Multiple solutions offered; awaiting user feedback on which approach works best.
Hello, I would like to ask if anyone knows how to makde sure that all the size bubbles are aligned on the product page in order not to look so messy! Maybe make them into squares instead of bubbles?
Thank you in advance,
Chris
URL: Trinitysneakers.com
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag
Result:
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Hello @ChrisM187
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-product-varient-picker.css
add this code at the end of the file.
.product-form__input--pill input[type=radio].disabled+label {
border-radius: 6px !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
