Hi, I added a color metafield but the color swatches are showing as rectangles when they should be circles. I have tried changing in the theme settings but it’s not working.
Any help is appreciated.
P/W: Password
Thanks.
Topic summary
A user encountered an issue where color swatches on their collection page display as rectangles instead of circles despite attempting to adjust theme settings.
Solution Provided:
- Navigate to: Admin → Online Store → Themes → Edit theme
- Locate the Asset folder and open the main CSS file (main.css, base.css, style.css, or theme.css)
- Add CSS code at the bottom of the file to set
border-radius: 50%on the color filter elements - Save changes
The response includes a code snippet and visual result showing the corrected circular swatch appearance. The issue appears resolved through this CSS modification.
1 Like
Hi @SaucyPeach
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.filter.filter--color .color-filter {
border-radius: 50%;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like