All things Shopify and commerce
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
Solved! Go to the solution
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"
Hello @ScanMe
It would be easier to help you if you would share your product page url.
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"
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?
To make it black replace "var(--variant-pills-border-opacity)" to "1".
border: 1px solid rgba(var(--color-foreground), 1);
Thanks!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024