I need to change my add to cart button color, I would like to make it red. Ive been looking at my theme.scss.liquid folder for a while and I havent seen anything pretaining to the 'add to cart" button. I read that its possible to change it using hexcodes so that I can get the shade of red id like, is this possible?
This is May from Shopify.
I am not a coding expert myself, but by looking at the code, you are correct! You can change the color of your 'add to cart' button from your 'theme.scss.liquid' file.
For starters, you'll want to go to your admin and select 'Online Store > Theme > Edit code'. Then, select your 'Assets' folder and click on 'theme.scss.liquid'. From there, you'll want to search for a class called '.btn--add-to-cart' and add 'background-color: #[your hexcode here]' inside that class like so:
Then, click 'Save', to change the button color. If you are need help finding a hex color, I recommend checking out HTML Color Picker. It’s important to note that the 'theme.scss.liquid' can’t be reverted back to older versions, so it would be best to speak with a developer directly if you’re unsure of how to make this change.
After making this change you might find yourself wanting to change the color of the text as well. Making this change is outside of my knowledge, however, you can always reach out to our Shopify Experts. Alternatively, if your account is eligible, our theme support may be able to look into making the change as well.
I hope this helps! If you have any questions, feel free to reply back!
I followed your instructions but could not locate .btn--add-to-cart' i am using the Brooklyn theme ..... The "theme.scss.liquid" only has 4166 lines of code in your email you are showing the code on line 4411 .....can you helpI want to change the cart background to #33cc33
Also having the same trouble. When I search for .btn--add-to-cart it doesn't show up anywhere. It says that shopify uses sass and not css, one would have to change it to css -- is that the issue here? I'm v new to editing code so not sure if something has changed since the "solution" was written. Help pls :( can't keep having a transparent add to cart button
I FOUND AN EASY WAY TO DO IT - without using code
I had never noticed that when you go into your theme to customize it there is a small drop-down menu on the left at the top next to the name of your theme. Mine sys Home Page. Click the down arrow and Product page then click on Product pages. There is a section the called add to cart button.