I want to change the color purple to a green color
The website link is https://astropots.com/products/levitating-plant-pot?variant=45715542311166
A user wants to change purple-colored elements to green on their product page at astropots.com, specifically targeting the add-to-cart button and quantity selector controls.
Multiple solutions provided:
• Method 1 (Moeed): Add custom CSS via theme.liquid file, placing code above the </body> tag
• Method 2 (Made4uo-Ribe): Edit main.css/base.css in the Asset folder, targeting .btn.btn--primary, .product-quantity__button elements, and product select options
• Method 3 (Tech_Coding): Insert CSS in theme.liquid before </body>, focusing on the .js-product-add-to-cart button with green background and border-color
• Method 4 (websensepro): Place CSS before </head> tag in theme.liquid
• Method 5 (ZestardTech): Add CSS to theme.css in Asset folder, including hover states for the add-to-cart button
The user confirmed the general approach but noted that hover and border colors still show purple, indicating the solution needs refinement. All approaches involve custom CSS targeting specific button classes with background: green and border-color: green properties, often using !important flags.
I want to change the color purple to a green color
The website link is https://astropots.com/products/levitating-plant-pot?variant=45715542311166
Hey @astropots
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @astropots
I just like to confirm, which background you are referring to?
Is this one?
This is the code I use,
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
select#ProductSelect-option-0 {
background: #76c8a0;
color: white;
}
.product-quantity input, .product-quantity__button--minus, .product-quantity__button--plus {
background:#76c8a0;
color: white;
}
.btn.btn--primary {
background: #1AA360;
}
And Save.
It’s not fullt change yet, the hover and border are same purple color. I just like confirm it first. Thanks!
Hello @astropots
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Yes thank you, something like that is what i’m going for! Can you continue the code?
Hi @astropots

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!
Hi @astropots
.js-product-add-to-cart {
background: green!important;
border-color: green!important;
}
.js-product-add-to-cart:hover {
background: green!important;
border-color: green!important;
}