How to change color of "add to cart" button on [BOUNDLESS THEME]

Highlighted
New Member
2 0 0

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?

 

Thanks

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 134

Hi there!

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!

Kind Regards,

May
Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
New Member
2 0 2

Hi,

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

 

Thanks 

Richard

Highlighted
New Member
2 0 2

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

0 Likes
Highlighted
New Member
1 0 0

Hi Richard, 

Did you find a solution to this problem of changing the add to cart color? I have the same issue..

Thanks 

0 Likes
Highlighted
New Member
1 0 0

If you follow her instructions it will work. Each "theme" will have that string of code in a different place so use the CTRL + F to search for it. This works on all themes you just need to find the correct string of code.

0 Likes
Highlighted
New Member
2 0 1

I also can not find the code even when I use Ctrl F and paste it in

0 Likes
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
New Member
1 0 0

HEY CHARDSTEEN CAN YOU PLEASE SEND A SCREENSHOT OF YOURS IF YOU HAVE USED IT COS I CAN'T SEEM TO BE ABLE TO FIND.WOULD RALLY APPRECIATE

0 Likes
Highlighted
New Member
2 0 1

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.

 

Change colour of add to cart button.PNG