How to change ADD TO CART colour botton (Brooklyn Theme)

[Rainbowbowls]

Hello everyone, 

How to change ADD TO CART colour botton (Brooklyn Theme)? I would like green background and white text.

Thank you

[KetanKumar]

Hello, @Rainbowbowls 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[Esteban19]

Hi @Rainbowbowls, I can help you:

first, go to theme edit code, find product-template.liquid and go to line 227

next to <button tag simply add this:

style="background-color: #77be44; width: 100%; height: 65px; border-bottom: 6px solid #00000075; border-radius: 7px; box-shadow: 5px 5px 25px #dedede; font-weight: bold; font-size: 24px; color: white;"

so it should appear on line 227: <button  (copy and paste here the custom code.) and then hit save.

let me know if this this works.

[Rainbowbowls]

Hi @Esteban19 

don't work. 

Button tag appear on 228 line, please look my attached:

[PageFly]

Hi @Rainbowbowls,

There are two ways you can change the styling of the add-to-cart button:

• Config within your theme
• Add custom CSS code

Adding custom CSS code would be quicker. So let's try it:

.product-single__add-to-cart .btn--add-to-cart{
background: red;
color: red;
border-color: red;
}
.product-single__add-to-cart .btn--add-to-cart:hover{
background: red;
color: red;
border-color: red;
}

This is the code. DON'T FORGET TO REPLACE THE COLOR WITH THE COLOR YOU WANT.

You can search online for the code of the colors you want to use.

What you do is you add this code AT THE END of the CSS file of your theme. For the Brooklyn theme, it's named theme.scss.liquid.

From your Shopify Admin > Online Store > Themes > Actions > Edit Code. Then you search "theme" to find the theme.scss.liquid file.

[Rainbowbowls]

Dear @PageFly 

don't work...

- I selected "theme.scss.liquid"

- I insert  your code at the end of the file, and after I change the color "red" to "# 00ff00".

[PageFly]

@Rainbowbowls,

Did the color change?

You are using the same color for text and background.

The code for "Color" is for text color. 

[LAKB_Lisa]

@PageFly 

Your code and solution worked for me. Thanks !

[SimplifiedShop]

For those that may prefer a video here is one I made that goes through Debut, Brooklyn and Minimal as examples:

https://youtu.be/cn31pbcje7o

[MS-WEB-DESIGNER]

Dear @Rainbowbowls 

Hope the following suggestions will help you

• From your Shopify admin, go to Online Store > themes.
• Locate your current theme and then click Actions > Edit code.
• After that in the Assets folder, click to open your theme.scss.liquid file.
• Go to the very bottom of this file and paste the following code:

/* Start */
.btn--add-to-cart  {border: 1px solid green !important; color: #fff !important; background-color: green!important;}
.btn--add-to-cart:hover {color: green!important;}
/* End*/

• Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
• Save and check your theme by refreshing it.

If you still need help you can contact us by using the link or email given at signature.

[HighGirlJewelry]

can you help me also? Mine is white but like disappeared can you change the text color & border of the button to black? my URL is highgirljewelry.myshopify.com

[Kinjaldavra]

@HighGirlJewelry  your add to cart button text is black and border black what color do want to change button text and border ?

[HighGirlJewelry]

im sorry i figured it out already!