Size Grid Shape Not Changing From Circle to Square (Dawn 15.4.0)

[crepscity]

Hi everyone,

I selected the option in my theme settings to change the size grid/variant buttons from circles to squares, but the shape isn’t changing on my product page. No matter what option I choose, the buttons stay circular.

Has anyone else had this issue, or know what might prevent the size grid shapes from updating?

URL: Off-White x Nike Dunk Low “Lot 50” – Creps City

Any help would be appreciated!

Thanks in advance.

[Michross]

This issue usually happens when your theme uses custom CSS or overrides that force the variant buttons to stay circular—even when you change the option in the theme settings.

Here are a few things you can check:

1. Check for Custom CSS

Sometimes a line of CSS like this can lock the shape:

border-radius: 50%;

If you added custom CSS (Theme → Edit Code → assets/theme.css or base.css), search for any border-radius on:

• .variant-button

• .swatch

• .product-form__input

• or anything similar

Try changing 50% to something like:

border-radius: 4px;

to make them appear square.

2. Check if the Variant Picker is Using a “Custom” Block

Some themes (like Dawn-derived themes or custom themes) override the default picker with a different component.
Look under:

Online Store → Themes → Customize → Product Page → Variant Picker

If you see something like “Custom Swatch Picker” or “Buttons (Custom)” selected, that may ignore theme settings. Switching back to the default picker should fix the issue.

3. Cached Styles

If your theme uses CSS minification, you may simply be seeing cached versions.

Try:

• Hard refresh (CTRL + F5)

• Check on private mode/incognito mode

• Try another device

If you’re comfortable sharing access

If you’d like, I can take a quick look at your theme structure and point you to the exact file that needs adjustment.

[Michross]

But try step 3 first that always works

[tim_1]

That setting is only for swatches, like “Color” swatches.
Your buttons are not swatches, so you’d need to configure theme elsewhere:

[crepscity]

This worked, thank you. However, after setting the variants to a square shape, there are still gaps between the squares, and the sizes appear uneven some squares are larger while others are smaller. I want all the squares to be the exact same size, perfectly aligned, and connected with no gaps at all.

I’d also like to remove the pre-selected size variant so that no size is automatically chosen when a customer opens a product page.