Colour Swatch Border - Habitat Theme

[Chris032009]

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.

[Mr_Sam]

Add borders to all swatches via CSS for visibility, use a selected class with a checkmark (::after), and toggle it dynamically with JavaScript for user interactivity.

Kindly let me know if you need any more further enhancement or guides, I'll be always open to help!

[Kyle_liu]

Hi  @Chris032009 

Please share the link to your store

[Chris032009]

https://uklacrosse.myshopify.com/

Password: raythi

[ecoboostify]

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!

[Chris032009]

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:

[Chris032009]

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:

[ecoboostify]

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 </head> tag.
4. Paste the Liquid code below right before the </head> tag:
5. Save the changes. Result: (https://prnt.sc/IWBHow0eASj-)

<style>
.variations .product-form__input--color input[type=radio]+label {
    box-shadow: 0 0 0 1px var(--color-border) inset;
}

.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;
}
</style>

Let me know if you need further assistance!

[Chris032009]

Thanks!

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

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

[ecoboostify]

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.

[DaisyVo]

Hi @Chris032009 

Please kindly share the store URL ❤️

Best,

Daisy

[Chris032009]

https://uklacrosse.myshopify.com/

Password: raythi