Hi there!
I’m having trouble changing the outline of the color swatches. One is black so it falls ‘away’ to the black background. Same goes for the buy button. I’ve tried adding several pieces of code to resolve this, but they did not work unfortunately. Website is houseofhymnia.com and the theme used is BeYours. Thanks already 
See below code I’ve tried using:
[data-option=“White”]{
border: 1px solid rgb(0 0 0 / 20%) !important; }
variant-picker button { border: 1px solid white !important; }
button.product-form__submit.button.button--full-width.button--primary:after { box-shadow: none !important; border: red 1px solid; } .product-form__input input[type=radio]:checked+label { border: red 1px solid !important; }
@HouseofHymnia Can you please share a preview URL ?
Hello @HouseofHymnia
Try this code
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
.swatch[data-option-value="White"] {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.product-form__submit.button.button--full-width.button--primary {
border: 1px solid white !important;
}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
1 Like
Hi Techlyser, thanks for your help and quick response! I’ve added the code to the theme.liquid file above but it’s not doing anything unfortunately.
Hi Ashbeel111, thanks for your reply and this is the way to go. When I inspect the elements in Chrome it shows code below for the buy button and brass color swatch. Should I make the changes here and add this to the theme file?
Add to cart
This is what I’ve added and after inspecting the elements on Chrome I would think this should work, but after previewing the website it doesn’t…
@HouseofHymnia Please follow below steps to add the outline color of the variant picker and buy button. Let me know whether it is helpful for you.
- From admin, go to “Online Store” → “Themes”, click “Customize” button in the current theme.
- Go to product page and click “Product information” section and paste below code in the “Custom CSS” field.
.product-form__input input[type=radio]+.color__swatch .color__swatch-dot:after {
box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
}
product-form button.product-form__submit {
border: 1px solid rgb(255, 255, 255);
}
Now, it will look like below image.
Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.
