Highlight Selected Color Variant on Product

Store Design
, ,
1

Is there a way to Highlight, or add a black circle around a selected color variant on my product page? When someone is looking at a product, the size has a black box so you can see what size is selected, but it’s hard to see what color has been selected as well.

www.theothelabel.com

Thanks

2

Hello @JoeyRoo ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your product.css file and paste the following code at the bottom:

input[type="radio"]:checked+label {
    border: solid 1px #000 !important;
}

If you need further help don’t hesitate to contact me.
You can find the email in the signature below.

Thanks

3

Perfect. Thank you

4

Hi Guleria,

Is there a way to make the box round on this instead of square? I am looking for a small circle that will act as a border around the color without having all that extra space between the color and the black border.