How to modify the variant pills?

Store Design
, , , ,

Topic summary

A user working with Shopify’s Craft theme wanted to reduce the font size of variant pills and make them fully rounded.

Solutions Provided:

  • CSS customization: Add custom CSS to the base.css file to modify pill appearance
  • Font size reduction: Use .product .product-form__input--pill input[type=radio]+label { font-size: 12px; } to decrease text size
  • Rounded corners: Apply border-radius: 9999px !important; for fully circular pills, or adjust via Theme Settings > Variant pills section
  • Additional styling: Optional hover effects and background colors can be added for enhanced visual appeal

Resolution:

The issue was successfully resolved. The user confirmed the CSS solution worked after locating the correct class selector. Multiple community members offered help, with one providing a screenshot showing the theme settings location for corner adjustments.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I am using Craft theme. I want to reduce the size of the font in those pills and make them round.

2

Hey @Happyyesh ,

Welcome to the Shopify community. Could you please share the store url and password [if applicable] so that I can take a look and provide you with the solution code.

Thanks

3

Hello @Happyyesh ,

Please share the store URL.

Regards
Guleria

4

Hello @Happyyesh !

To reduce the font size and make the filter “pills” round in the Craft theme on Shopify, you’ll need to make some custom CSS edits. These pills are typically generated in collection or search filter sections.

Steps:1. Log in to your Shopify Admin

Go to Online Store > Themes > Craft > Click “Customize”.

  1. Click “Edit code” (in the top right of theme editor).

  2. In the left sidebar, under Assets, locate and open:

    1. base.css
    2. (or sometimes theme.css or styles.css, depending on the version of Craft.)

Add This CSS to the Bottom of base.css:

/* Adjust filter pills /
.facets__label, .facet-checkbox__label, .active-facets__button {
font-size: 12px; / smaller font size /
border-radius: 9999px !important; / fully rounded /
padding: 6px 12px; / adjust padding for better pill shape */
}

You can adjust the font-size and padding values as needed.

Optional: Add Hover or Style Improvements

If you want to further style them, for example adding background color or hover effects:

.facets__label, .facet-checkbox__label, .active-facets__button {
background-color: #f2f2f2;
color: #333;
transition: background-color 0.2s ease;
}

.facets__label:hover,
.facet-checkbox__label:hover,
.active-facets__button:hover {
background-color: #e0e0e0;
}

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!

5

You can do that by adding this code at the bottom of base.css file.

.product .product-form__input--pill input[type=radio]+label { font-size: 12px; }

To change the corner of the pill, please go to store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Variant pills

Screenshot 2025-06-23 at 14.04.09.png
Screenshot 2025-06-23 at 14.04.09.png2186Ă—1864 215 KB

1 Like
6

Sorry, I don’t think sharing URL is possible as I’m working on a draft. Live store is on a different theme.

7

The solution worked. I was not able to find this class. Thanks mate!

1 Like
8

You are most welcome!