Re: Change Outline Color of button pills

Solved

How can I change the outline color of my variant button pills?

ScanMe
Shopify Partner
15 0 1

Hi, can someone help me on changing the outline color of my variant button pills? I suppose it is set to white and I cant change it. I want to put it how it is on the "Whats my size?" button

ScanMe_0-1705958941031.png

 

Accepted Solution (1)
YOD_Solutions
Shopify Partner
250 26 35

This is an accepted solution.

In your "section-main-product.css" file in the "assets" folder change the border property of ".product-form__input input[type='radio'] + label" as shown here:

.product-form__input input[type='radio'] + label {
  border: 1px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

 

Replace "var(--variant-pills-border-width)"  with "1px"

 

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store

View solution in original post

Replies 6 (6)

YOD_Solutions
Shopify Partner
250 26 35

Hello @ScanMe 

It would be easier to help you if you would share your product page url.

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
ScanMe
Shopify Partner
15 0 1

sure, scanme-world.com 

the password is "feedback"

YOD_Solutions
Shopify Partner
250 26 35

This is an accepted solution.

In your "section-main-product.css" file in the "assets" folder change the border property of ".product-form__input input[type='radio'] + label" as shown here:

.product-form__input input[type='radio'] + label {
  border: 1px solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
  background-color: rgb(var(--color-background));
  color: rgba(var(--color-foreground));
  border-radius: var(--variant-pills-radius);
  color: rgb(var(--color-foreground));
  display: inline-block;
  margin: 0.7rem 0.5rem 0.2rem 0;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  text-align: center;
  transition: border var(--duration-short) ease;
  cursor: pointer;
  position: relative;
}

 

Replace "var(--variant-pills-border-width)"  with "1px"

 

Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
ScanMe
Shopify Partner
15 0 1

You're a legend. 

At the moment the outline is grey, if I change the rgba code it goes blue, I don't know why. Do you know how I can change it to black?

YOD_Solutions
Shopify Partner
250 26 35

To make it black replace "var(--variant-pills-border-opacity)"  to "1".

border: 1px solid rgba(var(--color-foreground), 1);
Founder @ JsRates: Custom Shipping Rates
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more about JsRates visit the JsRates home page or JsRates documentation
- Find JsRates on Shopify app store
ScanMe
Shopify Partner
15 0 1

Thanks!