How to set border thickness of the ring on selected color swatches in Vessel theme

Store Design
1

Please can anyone help me on how to adjust the border thickness of the ring on the selected color swatches in my store (aluovi.com) to 1px.

Any help would be greatly appreciated. Thanks

1 Like
2

If I am not wrong you may talking about the color swathes on the product page.

I just check and found that it’s already has the 1px bolder. Whether you fix it or somehow it’s the default one?

Waiting to know from you. [See image below for more reference].

image
image1919Ă—822 351 KB

Once you confirm then I have a better idea.

3

Am talking about all the color swatches in the store. But it seems that the border thickness of the ring on the color swatches is already set at 1px for desktop and 2px for mobile by default. So I want to reduce the mobile to 1px.

4

You may have misunderstanding.

It’s also 1px on Mobile too.

5

It is thicker on mobile

6

You can check the mobile view, it is thicker on mobile and to be precise it is the ring on the selected color swatch am talking about.

7

Yes, it’s looking. But actually it’s 1px I check many times.

8

Is there a way to reduce or minimize shadow then if it is at 1px

9

This ring around selected swatch is already 1px.

May try to make it less dark though (the code can go to “Theme settings”-> “Custom CSS”)

.variant-option--swatches {
  --color-foreground: rgb( var(--color-foreground-rgb) / 0.5 );
}

Screenshot 2025-09-27 at 3.07.48 PM
Screenshot 2025-09-27 at 3.07.48 PM388Ă—172 2.61 KB
=>
Screenshot 2025-09-27 at 3.07.42 PM
Screenshot 2025-09-27 at 3.07.42 PM388Ă—172 2.57 KB

1 Like
10

Yes there is way to reduce the shadow. This is what called opacity. You can reduce the opacity of the circle to ensure it’s look real and authentic.

Here is the approach to reduce it.

Go to Shopify Admin >> Online Store >> Themes >> Edit Code >> styles.css

In the end of styles.css paste the following code.

.variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid rgb(0 0 0 / 60%);
}

Results:

image
image788Ă—342 19.8 KB

If you need more assistance then let me know.

Thanks

1 Like
11

Is it possible to reduce the border to 0.5 px or 0.75px for mobile. Thanks

12

No, you can’t really make things less than 1 pixel wide/tall.

Even though you can set a CSS parameter to a fractional value, monitors can’t really show half-pixels[1].

  1. well, mostly ↩︎

13

Thanks anyway. Appreciate your help

1 Like
14

Thanks for your assistance too

15

I am happy that it’s work for you.

If this was helpful don’t forget to like and Mark as Solution.

Thanks