Swatch option not available need to highlight

Store Design
1

Hi Experts,

I am facing issue to highlight swatch when product is not available , currently using canopy elegant theme.

https://capitalstoreoman.com/products/colours-eye-colour-palette?variant=47586925216046

There are 4 variant of the product 2 are out stock and 2 are in stock, i need to bold the cross line on the product may be red line instead that gray.

Salim629_1-1705314731466.png
Salim629_1-1705314731466.png1044×549 135 KB

2

Hey @Salim629 ,

Can you try this -

  1. Go to styles.css

  2. Search for .product-form .selector-wrapper.selector-wrapper–swatch.selector-wrapper–swatch-image a.unavailable:after

  3. There you will see background rule -

background-image: url(“data:image/svg+xml;utf8,”);

  1. Now for red color change the stroke=‘rgb(255, 0, 0)’ and to make it think make stroke-width=‘10’ (experiment with values until it looks good)

Thanks

Yash Garg

3

Hi Yash,

Thanks for the solution, its work. superb.

1 Like
4

Happy to help :slightly_smiling_face: