Variant Pill with text inside

Store Design

Topic summary

A user wants to modify their product variant buttons to display text inside pill-shaped containers instead of the default style, specifically for a ‘Size’ variant on a foundation product page.

Initial Suggestions:

  • One respondent suggested checking theme settings for an option to configure size variants differently from color swatches.
  • Another provided custom CSS code to be added to the theme.liquid file before the </head> tag.

Resolution:

  • The custom code initially worked but later stopped functioning.
  • The helper revisited the issue, applied fixes directly to the store, and requested access to verify the implementation.
  • The solution appears to have been successfully applied to the online store.

Status: Resolved - the variant pill styling has been fixed and is now live on the store.

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

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 before the tag

Result:

AnneLuo_0-1729749499014.png
AnneLuo_0-1729749499014.png517×308 5.08 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like