Please help me fix to pill instead of square selector , prestige theme

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-swatch class in theme.css
  • Full pill shape with alignment fix: Use border-radius: 999px !important; along with line-height: 24px !important; and height: 41px !important; to achieve pill-shaped selectors with proper vertical alignment

Implementation steps:

  1. Navigate to Online Store → Themes → Edit code
  2. Locate the theme.css file
  3. 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.

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

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

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