Shopify themes, liquid, logos, and UX
I would like to change the background colour of my variant pills and add to cart/choose options (both in the product cards and product pages) so that it matches the other buttons background (#7F5777).
My website is https://www.schikin.co.uk/
password is ohgleu
Many thanks!
Solved! Go to the solution
This is an accepted solution.
Hi @schikinoils ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.quick-add__submit {
background-color: #7F5777;
color: white;
}
.product-form__buttons [name="add"] {
background-color: #7F5777;
color: white;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: #7F5777 !important;
color: white !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hey Schikinoils,
You can easily change the background color of your variant pills and add-to-cart button using a bit of custom CSS. Based on the button background color you want (#7F5777), here are two CSS snippets that should work for both your product cards and product pages:
.quick-add__submit {
background-color: #7F5777;
color: white;
}
.product-form__buttons [name="add"] {
background-color: #7F5777;
color: white;
}
Here’s how to do that:
The first snippet targets the "Quick Add" button (.quick-add__submit), and the second snippet applies to the "Add to Cart" button ([name="add"]). Just drop these into your theme's custom CSS file (base.css), and both should match the rest of your site's styling.
Let me know if you need further help!
Many thanks,
Shubham | Untechnickle
We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee ☕️ and find the perfect solution for your store.
Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups
Hi many thanks for your quick reply.
It works perfectly for the Add to cart, many thanks!
Sadly it doesn't seem to work for the variant pills though. Any other ideas please? many thanks!
This is an accepted solution.
Hi @schikinoils ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.quick-add__submit {
background-color: #7F5777;
color: white;
}
.product-form__buttons [name="add"] {
background-color: #7F5777;
color: white;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: #7F5777 !important;
color: white !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
That works thanks!
Hello how can I change the color of the variant pills to red background white text, only for the variants that are on sale?
My bad! @schikinoils : Please accept my apologies. And, please use this code and paste this in your (base.css). That's the only code you need to add.
.product-form__input--pill input[type=radio]:checked+label {
background-color: #7F5777 !important;
}
Feel free to reach out in case you've any more questions 🙂 Also, it'd be great if you can like and mark the solution as accepted.
Cheers!
Shubham | Untechnickle
We’re here to simplify your Shopify experience!
Let’s chat over a virtual coffee ☕️ and find the perfect solution for your store.
Our Services: Store Build & Redesign | Theme Customization | Website Audit & Optimization | Bug Fixes | App Setups
Hi @schikinoils
Check this one .
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
.product-form__input--pill input[type=radio]:checked+label {
background: #7F5777;
color: rgb(var(--color-background));
}
And save.
result:
Please don't forget to Like and Mark Solution to the post that helped you. 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