Shopify themes, liquid, logos, and UX
Hi,
I would like to change the text colour on the add to cart button to hex DDBB8B
The text colour changes to this on hover but i would like it to display this colour as standard.
site not live - password to view - JOLENE456
Solved! Go to the solution
This is an accepted solution.
sorry for this issue can you please try this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.ProductForm__AddToCart {color: #DDBB8B;}
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.ProductForm__AddToCart {
color: #DDBB8B;
}
Thanks!
This is an accepted solution.
hello @lkdrumhirk if I want to change the background colour (the button itself) to a different hex colour you can use following code and then you change value of background-color yourself
Please add the following code at the bottom of your assets/theme.css file.
.ProductForm__AddToCart {
background-color: #6f5a3f;
}
This is an accepted solution.
sorry for this issue can you please try this
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.ProductForm__AddToCart {color: #DDBB8B;}
thanks so much, if I want to change the background colour (the button itself) to a different hex colour what line do I use?
This is an accepted solution.
hello @lkdrumhirk if I want to change the background colour (the button itself) to a different hex colour you can use following code and then you change value of background-color yourself
Please add the following code at the bottom of your assets/theme.css file.
.ProductForm__AddToCart {
background-color: #6f5a3f;
}
yes you can do it just change the Hexa code
Hi,
I am also using Prestige and this is not working for me.
It changes the color of the add to cart button for the first page when displaying a product one the front page - but there is no change on the product page itself.
What do I do?
hello @theithei
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
Hi, my website is: https://www.pulseofart.de/ (no password).
On the first page I display "1x Kartenständer aus Holz" and the "Add to Cart" Button (In German: Zum Warenkorb hinzufügen) is grey.
If you visit any product page (for example: https://www.pulseofart.de/collections/grusskarten/products/grusskarte-papa) the "add to cart" button is grey.
I want both of these colors changed to the same green color (#539E3C).
Thank you in advance for your help!
hello @theithei
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.ProductForm__AddToCart::before {
background: #539E3C !important ;
}
It worked, thank you SO much!
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance
Hi, this code doesn't seem to work. No matter what I do, it appears the theme's default button settings override the add-to-cart button settings in my .css. Here's what I have added to our theme.scss.liquid file at the end:
Our theme's primary button colour: #be8b70
Intended add-to-cart button colour: #7b895b
Code I've added:
.ProductForm__AddToCart {
background: #7b895b !important;
background-color: #7b895b !important;
border-color: #7b895b !important;
}
what's the code for add to cart button?
hello @yaseene
do you want to add add to cart button in which section let me know
Hello,
I also would like to change in my Theme (Prestige) the colour of the cart button. Can you please help me with that? I tried the way you said it in the upper article, it worked well for the colour of the text. I need to change the colour of the button (without animation). Is there a way?
Thank you!
Elisabeth
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.ProductForm__AddToCart {
color: #DDBB8B;
}
Thanks!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024