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 8 (8)

LuffyOnePiece
Shopify Partner
362 61 61

@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
1423 268 282

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

Ashbeel111
Visitor
2 0 0

To change the outline color of a variant picker and buy button in a web application, you'll typically need to modify the CSS (Cascading Style Sheets) code associated with those elements. Here's a general guide on how you can achieve this:

1. **Identify the CSS Classes or IDs:**
Use developer tools in your browser to inspect the variant picker and buy button elements and identify their CSS classes or IDs. These are unique identifiers that you'll use to target these specific elements in your CSS code.

2. **Write CSS Code to Target the Elements:**
Once you have identified the CSS classes or IDs, you can write CSS rules to target these elements and change their outline color. For example:

```css
/* Target the variant picker */
.variant-picker-class {
outline: 2px solid #ff0000; /* Change the outline color to red */
}

/* Target the buy button */
#buy-button-id {
outline: 2px solid #00ff00; /* Change the outline color to green */
}
```

Replace `.variant-picker-class` and `#buy-button-id` with the actual CSS classes or IDs of your variant picker and buy button elements, respectively. Also, replace the color values (`#ff0000` and `#00ff00`) with the desired colors.

3. **Apply the CSS Changes:**
Once you have written your CSS code, you need to apply these changes to your website. You can do this by including the CSS code in your website's stylesheet file or by adding it directly to the HTML document within a `<style>` tag.

4. **Test and Adjust:**
After applying the CSS changes, test your website to ensure that the outline colors of the variant picker and buy button have been updated as desired. If necessary, adjust the CSS code to achieve the desired appearance.

more details at capcut templates

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
181 61 55
@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.