How to create outlines for variants

[Luminora]

Hi,
Im fairly new to shopify, and cant seem to figure out how to create outlines for the variations that arent picked. Can someone help?

My shop name is "luminora.shop"

[BSSCommerce-HDL · Accepted solution]

Hi @Luminora, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
variant-selects label {
  border: 1px solid #e9787e !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Luminora]

Thank you SO much!

[BSSCommerce-HDL]

@Luminora, No problem. Have a good day 😍

[BSS-TekLabs]

Hi @Luminora,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.product-form__input--pill input[type=radio]+label {
    border: 1px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity)) !important;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!