Change outline color of variant picker and buy button

HouseofHymnia
New Member
6 0 0

Hi there!

I'm having trouble changing the outline of the color swatches. One is black so it falls 'away' to the black background. Same goes for the buy button. I've tried adding several pieces of code to resolve this, but they did not work unfortunately. Website is houseofhymnia.com and the theme used is BeYours. Thanks already 🙂

 

See below code I've tried using:

 

[data-option="White"]{

border: 1px solid rgb(0 0 0 / 20%) !important; }

 

<style> variant-picker button { border: 1px solid white !important; } </style>

 

<style> button.product-form__submit.button.button--full-width.button--primary:after { box-shadow: none !important; border: red 1px solid; } .product-form__input input[type=radio]:checked+label { border: red 1px solid !important; } </style>

 

 

Product page.png

Replies 7 (7)

LuffyOnePiece
Shopify Partner
503 75 88

@HouseofHymnia  Can you please share a preview URL ?

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

techlyser_web
Shopify Partner
1473 274 292

Hello @HouseofHymnia 
Try this code

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

  .swatch[data-option-value="White"] {
      border: 1px solid rgba(0, 0, 0, 0.2) !important;
   }

   .product-form__submit.button.button--full-width.button--primary {
        border: 1px solid white !important;
    }

</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
HouseofHymnia
New Member
6 0 0

Hi Techlyser, thanks for your help and quick response! I've added the code to the theme.liquid file above </body> but it's not doing anything unfortunately.

 

HouseofHymnia
New Member
6 0 0

This is what I've added and after inspecting the elements on Chrome I would think this should work, but after previewing the website it doesn't...

Code.png

HouseofHymnia
New Member
6 0 0

Hi Ashbeel111, thanks for your reply and this is the way to go. When I inspect the elements in Chrome it shows code below for the buy button and brass color swatch. Should I make the changes here and add this to the theme file?

 

<button type="submit" name="add" class="product-form__submit button button--full-width">Add to cart</button>

 

<label for="template--17955574481161__main-Color-0" class="color__swatch color__swatch--round" style="--swatch-background-color: brass;" title="Brass">
<span class="color__swatch-dot"></span>
</label>

Vinsinfo
Shopify Partner
248 90 82
@HouseofHymnia Please follow below steps to add the outline color of the variant picker and buy button. Let me know whether it is helpful for you.
 
1. From admin, go to "Online Store" -> "Themes", click "Customize" button in the current theme.
2. Go to product page and click "Product information" section and paste below code in the "Custom CSS" field.

 

.product-form__input input[type=radio]+.color__swatch .color__swatch-dot:after {
    box-shadow: inset 0 0 0 0.1rem rgb(var(--color-border));
}
product-form button.product-form__submit {
    border: 1px solid rgb(255, 255, 255);
}

 

 

priyavinsinfo_2-1709045359945.png    priyavinsinfo_3-1709045418950.png

 

 

Now, it will look like below image.
priyavinsinfo_0-1709045122338.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.