Reformation Theme query color variant

Store Design

Topic summary

A Shopify store owner using the Reformation theme sought help changing their color variant selector from a square with a small circle inside to a fully colored round circle.

Problem: The current design showed color swatches as squares with small circular centers, which the user found unappealing. They wanted fully round, solid color circles instead.

Solution provided: A helper requested the product page link and provided custom CSS code to modify the color variant display. After an initial attempt that didn’t fully resolve the issue, they updated the CSS to:

  • Adjust positioning values (top, left, right, bottom)
  • Remove the box-shadow from color labels

The code was added via Online Store > Themes > Customize > Theme settings > Custom CSS.

Outcome: The issue was successfully resolved. The color variants now display as fully colored round circles as desired.

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

Hi all,

Mu current color variant is square with a small round circle in the midle - It doesn’t look good. I would like to have it round fully coloured, Any ideas on how to achieve that? Thanks in advance

colorIconWanted.PNG

currentColorIcon.PNG
currentColorIcon.PNG321×235 1.66 KB

1 Like
2

Hi @Ahazoh

Please share the link to your product page so I can check and give you the code

3

Thank you for helping.

Please see below the link to my page:

https://www.ahazoh.com/collections/casualwear/products/cire-mens-t-shirt-with-side-detail

Psw:2025

4 
.product-information .variations .product-form__input--color input[type=radio]+label:after {
border-radius: 50%;
top: 9px;
left: 9xp;
right: 9px;
bottom: 9px;
}

Please add this code to Cutom CSS in Online Store > Themes > Customize > Theme settings

5

Hi Dan,

Thanks for that but no joy. See below the output:

Ahazoh_0-1738668295189.png
Ahazoh_0-1738668295189.png342×205 1.21 KB

I am looking for something like this:

Ahazoh_1-1738668345289.png
Ahazoh_1-1738668345289.png785×232 71.4 KB

I dont want to circle inside the square.

Thanks in advance for your help

6

Please update the code

.product-information .variations .product-form__input--color input[type=radio]+label:after {
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
}
.product-form__input--color label {
box-shadow: unset !important;
}
7

amazing! Thank you so much for all your help.

It is perfect now :slightly_smiling_face:

Have an amazing day . All the best