How can I create a thicker outline for size boxes?

Shopify Discussion

Topic summary

A user seeks help making the outline of product size selection boxes thicker on their Shopify store.

Solution Provided:

  • Navigate to Online Store ā†’ Theme ā†’ Edit Code
  • Open the section-main-product.scss file in the Assets folder
  • Add CSS code at the bottom of the file:
    .product-form__input input[type=radio]+label {
  border: 2px solid white !important;
}

Outcome:
The solution successfully resolved the issue. The CSS targets the radio button labels (size boxes) and applies a 2-pixel solid white border with important flag to override existing styles.

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

How can i make the outline of these size boxes thicker? Please help

shop url: https://c1e46d.myshopify.com/products/bear-trap-zip-hoodie?variant=44312818745660

l;l.png
l;l.png514Ɨ109 4.04 KB

2

Hi @suoshie ,

This is Kate from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

.product-form__input input[type=radio]+label {
   border: 2px solid white !important
}

Hope my answer will help you.

1 Like
3

works perfectly thanks :slightly_smiling_face: