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

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
Shopify Staff
Shopify Staff
335 31 67

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

1 Like
New Member
2 0 1

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

1 Like
New Member
2 0 1

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