I am trying to figure out how to add a border around the color swatches on the landing page and product page. I have tried everything I think would change it. Nothing seems to do it. Any help would be greatly appreciated.
1 Like
Hi, I am just looking to add a black 1px border around the circle color swatches.
Hi @Paulloula
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:
.swatch__button .swatch__label {
border: var(--BORDER-WIDTH) solid var(--border);
}
And Save.
Result:
FYI, I copy the same border on the size.
1 Like
Go to your online store → customize → settings → custom css and pate this code there
.swatch__button .swatch__label {
border: 1px solid;
}
Thank You, this worked.