How Do I Change Image Variant Selection Border?

Store Design
1

I have made a lot of custom changes on the new shop I am building. However, I am unable to find the file or code to change for this. When my production variants show on my collections page and on my production page, I want the border of the selected color variant to be thicker so that the customer clearly sees that they have selected it. Right now, the selected item is Black (instead of pink and I would like to reverse this too) and the other options are pink. What I would like is the border for the selected item to be much thicker. I would also like to reverse the colors. I want the selected item to be pink and non selected items to be black. I have tried so many different code snippets and non have worked so far. I am using the MINIMOG v2.5.0 - BFCM theme. I want to change this for both the collections page and the product page. I have copied images of both below.

Here is a link to a page that has variant options listed: https://dresstoimpress-shop.com/collections/swimwear

  • On the collections pages, I just want to make the border thicker for the selected item and in pink instead of black

Here is a link to a product page: https://dresstoimpress-shop.com/products/leopard-print-crisscross-bikini-set

  • On the product pages, I would like make the border thicker for the selected item. I would also like to make the selected item border pink and the non selected items border either transparent, 0 thickness, or black.

Collections Page:

amyjones33_2-1657590272741.png
amyjones33_2-1657590272741.png2965×1251 946 KB

Product Page:

amyjones33_1-1657590060556.png
amyjones33_1-1657590060556.png2835×1417 585 KB

2

@amyjones33

Please add the following CSS code to your assets/chunk.aio.min.css OR assets/theme.aio.min.css bottom of the file.

.sf-po__option-button[data-selected=true] {border: 2px solid #df1995 !important;}
.product-option-item[data-option-type=image][data-selected=true] {border-color: transparent !important;border: 2px solid #df1995 !important;}
.product-option-item.border-color-border {border-color: #000 !important;}

Hope this work!

Thanks!

3

Dmwwebartisan, that worked great. I now want to round the edges on the variant images on the product page like they are on the collections page and also make the border of the non selected variant image have the thin grey border like the collections page.
Do you mind helping me with that please?

4

@amyjones33

Please remove the previously provided CSS code and add this new code.

.sf-po__option-button[data-selected=true] {border: 2px solid #df1995 !important;}
.product-option-item[data-option-type=image][data-selected=true] {border-color: transparent !important;border: 2px solid #df1995 !important;}
.product-option-item.border-color-border {border-color: #bdbdbd !important; border-radius: 10px !important;}

Thanks!

5

@amyjones33

If helpful then please Like and Accept the Solution.

6

Worked beautifully. Thank you very much.

7

My theme has an advanced section where I can add code. I just added there instead so I don’t have to remember where it is at next time. Thank you so much for your help.

8

@amyjones33

Please add the following CSS code to your assets/chunk.aio.min.css OR assets/theme.aio.min.css bottom of the file.