Please help me fix to pill or circle instead of square selector with ability to choose font style , prestige theme. Store password is ENZO.
Thanks!!
i want it like this
Topic summary
A Shopify store owner using the Prestige theme needs help converting square product variant selectors (for options like Size and Single/Pair) into pill-shaped or circular buttons, with the ability to customize font styles.
Solutions Provided:
Two community members offered CSS code solutions:
- Basic rounded corners: Add
border-radius: 60px !important;to.block-swatchclass in theme.css - Full pill shape with alignment fix: Use
border-radius: 999px !important;along withline-height: 24px !important;andheight: 41px !important;to achieve pill-shaped selectors with proper vertical alignment
Implementation steps:
- Navigate to Online Store → Themes → Edit code
- Locate the theme.css file
- Paste the CSS code at the bottom of the file
One responder included a screenshot showing the pill-shaped result on the store. The issue appears resolved with the provided CSS modifications, though font style customization wasn’t directly addressed.
Hey @tigrisjewelryco
To add the rounded corner to your swatch selector add the following code
Step 1: Go to Online Store > Theme > Edit code > find theme.css file and paste this at the bottom
.block-swatch {
border-radius: 60px !important;
}
1 Like
Hi @tigrisjewelryco ,
We have checked your website and follow below steps to achieve this.
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.css
Step 3: Insert the below style at the bottom of the file to make the elements shape pill/round.
.block-swatch {
border-radius: 999px !important;
line-height: 24px !important;
height: 41px !important;
}
The pill/round data in the “Size” and “Single or Pair” sections seems to require some vertical alignment adjustments. So, we have added line-height and height attributes to the selector to correct that. Please see the attached screenshot of the result on your website.
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
If this solves the problem, please Mark it as Solution!
Reagrds,
Sweans
1 Like