Help changing the border color of color swatches

Store Design
, ,
1

Hello, can anyone help me with changing the border color around the color swatches to white? The current theme is Berlin and we are using the dark theme/black background. You can’t see the black color swatches and hard to see other darker colors. I’d like to change this globally; as we have products on the homepage and also the product page itself.

https://questionableteez.com/

Screenshot 2023-10-21 at 3.32.36 PM.png
Screenshot 2023-10-21 at 3.32.36 PM.png649×947 144 KB

I’ve tried adding the following into the custom css section and it didn’t change anything

.color-swatch {
  --swatch-bg: white;
  background-color: var(--swatch-bg);
  width: 100px; /* Adjust the width as needed */
  height: 100px; /* Adjust the height as needed */
  border: 1px solid #000; /* Add a border for better visibility */
  /* Add any other styles you want for your color swatch */
}

I also tried this from someone else’s question and changed the color for ours, still nothing

.swatch input[type="radio"]:checked + label span {
    border: 1px solid white;
}

I also tried using this answer from someone else but couldn’t find that file in the code editor https://community.shopify.com/c/shopify-design/color-swatches/m-p/1844705

Thank you in advance!

1 Like
2

Hi @questionable313

Try 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:
.product-form__controls-group input:checked:not(.disabled)+label.color-swatch {
    border-color: white !important;
}
1 Like
3

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.product-form__controls-group input:checked:not(.disabled)+label.color-swatch {
    border-color: #fff !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly