Why are product variant size boxes on my website not identical?

Store Design

Topic summary

A user encountered an issue where product variant size boxes displayed inconsistently on their website—the XS box appeared without an outline while Small, Medium, and Large boxes had visible borders. This created confusion, making customers think XS was out of stock.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes
  • Click Actions → Edit code on the active theme
  • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add the following CSS at the bottom:
label.variant__button-label {
  border: 1px solid black;
}
  • Save the changes

Outcome: The CSS fix successfully resolved the inconsistent border display, ensuring all size variant boxes now appear identical with uniform outlines.

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

Hi there,

I have an issue with my website www.prettyinpink.ie with the product varient size boxes. If you take a look, the XS box is not outlined, but Small / Med / Large are all outlined. Its leading my users to believe the XS is out of stock.

Ive added some extra CSS below which hasnt fixed the issue. I would appreciate help!

.line-item-property__field textarea {
border: 1px solid #ccc;
width: 100%;
}

1 Like
2

Hi @wixiemrs ,

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
label.variant__button-label {
    border: 1px solid black;
}

Result:

Ribe_Dagandara_0-1689280261887.png
Ribe_Dagandara_0-1689280261887.png452Ă—239 5.3 KB

I hope it help.

3

Thank you so much, that fixed the issue!

1 Like