Colour Swatch Border - Habitat Theme

Store Design
, , , ,
1

Hi,

I am trying to add borders around all colour swatches so that lighter colours are more obvious against a light background. I would also like to add a check mark in the selected option so that it is obvious what is selected.

Is this possible?

I have tried contacting the developers but they only suggested changing the White colour to off-white so that it shows up, but this is not an acceptable solution.

Many thanks in advance.

1 Like
2

Hi @Chris032009

Please share the link to your store

3

It would be easier if you could allow me to view your current store url.

However, I tested this with the default Habitat theme and added some custom CSS.
Here are the steps:

  1. Go to Shopify Admin > Online Store > Customize. (https://prnt.sc/5cyVy1-OLhIa)
  2. Go to Theme Settings > Custom CSS
  3. Copy the CSS code below, paste it into the Custom CSS box, and click Save.
.variations
  .product-form__input--color
  input[type="radio"]:checked
  + label:before {
  content: "✓";
  position: absolute;
  top: -2px;
  right: -2px;
  background: #2e8b57;
  color: #fff;
  border-radius: 50%;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  z-index: 10;
  text-indent: 0;
}

Hope this custom code is helpful to you!

4

Hi @Chris032009

Please kindly share the store URL :heart:

Best,

Daisy

5

https://uklacrosse.myshopify.com/

Password: raythi

6

https://uklacrosse.myshopify.com/

Password: raythi

7

Hi,

Thank you so much for this. So it shows on the Preview in the Customisor, but when I hit Save I get the error message ‘Online Store editor session can not be published’. Also, the tick mark is cut off slightly:

Screenshot 2024-11-25 at 13.35.59.png

8

Actually, the tick now appears in full now that I have added inventory but the borders are not showing and I still can not save the changes:

Screenshot 2024-11-25 at 13.41.59.png

9

It seems that the method of adding custom code might be limited. You can try the following approach instead:

  1. Go to Shopify Admin > Online Store > Actions > Edit Code. (https://prnt.sc/H7wLFspJNLoY)
  2. Open the theme.liquid file. (https://prnt.sc/jrF6DzLcWX7T)
  3. Look for the closing tag.
  4. Paste the Liquid code below right before the tag:
  5. Save the changes. Result: (https://prnt.sc/IWBHow0eASj-)

Let me know if you need further assistance!

10

Thanks!

So I added that in and have the following result (I think the borders are too light against the background):

Screenshot 2024-11-25 at 14.28.11.png

How can I change the colour of the borders so that they are all black and the selected colour is different? Say, red?

11

Hi @Chris032009

General Code for All Colors
To set the border color for all color options, you can use the following code:

.variations .product-form__input--color input[type=radio]+label {
box-shadow: 0 0 0 1px var(--color-border) inset;
}
  • var(–color-border): This represents the border color and can be replaced with any hex color code or named color.
    For example, if you want black borders, replace it with #000000 (or black)
.variations .product-form__input--color input[type=radio]+label {
box-shadow: 0 0 0 1px #000000 inset;
}

Custom Code for Specific Colors
If you need to customize the border for a particular color, add this code:

.variations .product-form__input--color input[type=radio][value=White]+label {
box-shadow: 0 0 0 1px red inset;
}
  • [value=White]: This targets the color White specifically. Replace White with the name of the color you want to style, ensuring it matches the name defined in your product options.
  • red: This is the border color, which can be replaced with any color code, such as #ff0000 for red.
12

Hi @Chris032009

The password seems wrong. Could you please check it again ?

Best,

Daisy