Hello, would anyone happen to know how to centre these color swatches?
url is tenora.co
Topic summary
A user seeks help centering color swatches on their product page.
Another community member provides a CSS solution:
Implementation steps:
- Navigate to Shopify admin → Online Store → Themes
- Click Actions → Edit code on the active theme
- Locate the main CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the following code at the bottom:
.color-swatches-container.color-swatches-container--size-medium {
justify-content: center;
}
- Save changes
The solution uses CSS flexbox alignment to center the swatch container. A screenshot showing the expected result is included in the response.
1 Like
Hi @EthanOSHOP
its password protected.
Sorry @Made4uo-Ribe , it’s open now
Thanks for the info, check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
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:
.color-swatches-container.color-swatches-container--size-medium {
justify-content: center;
}
And Save.
Result:
1 Like