How to create outlines for variants

Solved

How to create outlines for variants

Luminora
Tourist
7 0 6

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"

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an 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: 

BSSCommerceHDL_0-1720455217565.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an 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: 

BSSCommerceHDL_0-1720455217565.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Luminora
Tourist
7 0 6

Thank you SO much!

BSSCommerce-HDL
Shopify Expert
1004 342 408

@Luminora, No problem. Have a good day 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSS-TekLabs
Shopify Expert
480 147 165

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

BSSTekLabs_1-1720455483677.png

 

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!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency