Variant Picker - Edit Style

[riveringroots]

I need help with the coding to edit some details of the variant picker on my product page.

I want to change the background and font color, adjust the radius to be squared off, and the border color, both when an option is selected or when it’s not (image below on issue) for the color and set size.

URL: https://riveringroots.com

pass: rtawqpz

Thank you for your help!

[riveringroots]

Oh, and how can I turn off the shadowing on the color variant when it’s sold out? I want to keep the line through but not shadow out the image to where you can tell what color is out of stock!

[BiDeal-Discount]

Hi @riveringroots

which color, style you want to change to?

[riveringroots]

I dont understand the question?

[BiDeal-Discount]

I mean what do you want to change the color and style to? i don’t see the value to change

[riveringroots]

background color #d5cec4

font color #352315

border color #352315

[Moeed]

Hey @riveringroots

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[riveringroots]

Okay, this helped; thank you! Can you figure out how to stop the out-of-stock item from being whitened and crossed out? I’d like to have only the line through the image, but leave the photo/color intact so that you can see the color of the out-of-stock item. Does that make sense? The image should be green, but it looks like grey. Thanks!

[riveringroots]

Last thing … how can I add this cursor hover pop-up with the color name shown below?

[BiDeal-Discount]

Hi @riveringroots

let try to add this custom CSS code to remove the variant image being whitened. We will keep the crossed out only:

.product-form__input .swatch-input__input:disabled+.swatch-input__label>.swatch, .product-form__input .swatch-input__input.visually-disabled+.swatch-input__label>.swatch {
  opacity: 1;
}

[BiDeal-Discount]

Let try this custom CSS for hover to show color name:

.swatch-input__label {
  position: relative;
}
.swatch-input__label:hover span.swatch + span.visually-hidden {
  visibility: visible;
  width: auto;
  height: auto;
  clip: inherit;
  background: black;
  color: white;
  border-radius: 7px;
  padding: 1px 9px;
  font-size: 13px;
  bottom: -31px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

[riveringroots]

I need help with, hopefully, one last thing.

What code do I use to change the product title (stone washed linen…) font size, and text transform to uppercase?

And how do I add a hover background color to the checkout button? It should be #7e775b

[BiDeal-Discount]

Hi @riveringroots

let try to use this Custom CSS:

.cart-item .cart-item__name {
  font-size: 17px;
  text-transform: uppercase;
}
#shopify-section-template--17121712210078__cart-footer .button:hover{
  background-color: #7e775b !important;
  color: #fff !important;
}

[riveringroots]

Can you help me edit the font size on the continue shopping link on the checkout page?