Change outline color of variant picker and buy button

[HouseofHymnia]

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>

 

[LuffyOnePiece]

@HouseofHymnia  Can you please share a preview URL ?

[HouseofHymnia]

Off course https://www.houseofhymnia.com/collections/frontpage/products/cobra-king-pourer

[niraj_patel]

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.

[HouseofHymnia]

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]

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...

 

[HouseofHymnia]

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]

@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);
}

    

Now, it will look like below image.

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