Brooklyn Theme Add-To-Cart Button Colour Change

Highlighted
Tourist
6 0 1

I've seen a couple posts about this, with some either not working or have had no response. I'd like to change the add to cart button from White and Black to Red and White so that it stands out a bit more.

Any help would be greatly appreciated!

0 Likes
Highlighted
Tourist
4 0 1

Hi Alex,

There's two ways to do this.  

First way:

You can change the color of all buttons in the Theme by clicking the customize button.Then toward the top left of the screen you'll see a link that says theme settings, click that then go into colors.The one that says primary buttons will change the color on all buttons on the entire site to the color you set.  So that will change all buttons on the site to that color.  

For me, I want my payment/add to cart button to be a different color and I only want that button to be that color. 

Second way (The way I do it):

I wanted my add to cart and shipping address button to be the only buttons that were green. So I set my buttons in the area I described above to one color, and used css code to change the button color for those two buttons.

To do that, here's what you do. Instead of clicking the customize button, click the drop down next to it and select edit code. Then scroll down to the assets setting and click the theme.scss.liquid file. Before you do anything, copy all the code in there and save it somewhere else in case you mess something up, then you can easily restore back to the settings you have now. Don't worry though, this is easy. But make a copy anyway.

Once you open the file, scroll all the way to the bottom and paste in the code I'm about to attach.

/*===== Change Add to cart button color ======*/
.product-form__cart-submit {
background-color: #8dc63f;
&:hover {
background-color: #75ad27 !important;
}
}

/*===== Change Enter Shipping Address button color on Cart page ======*/
.cart__submit {
background-color: #8dc63f;
&:hover {
background-color: #75ad27 !important;
}

Use the # symbol and the 6 charcter code of letters and numbers to set the colors you want. The first code in each section shows the color that displays, the second shows the color that is shown when someone hovers over the button.

 

1 Like
Highlighted
Tourist
6 0 1

Interesting, that also hasn't changed anything, I changed the hex numbers to red, but I pasted it straight to the bottom.

 

 

0 Likes
Highlighted
Shopify Expert
9811 92 1574

If this is for your current theme you'll find a simple example of changing the background to red below. That should give you a good head start for reference the element.

#AddToCart--product-template { background: red }

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Tourist
6 0 1

Amazing, I've managed to change the text to White by replacing "background" with "color" too, which is exactly what I wanted!

Cheers fellas!

1 Like
New Member
1 0 0

Hi is there a way to change the color of text for "add to cart". Btw i managed to change the color of the button thanks.

0 Likes
Highlighted
New Member
1 0 0

I added this code below the button color code to change button text to white and it worked.

#AddToCart--product-template { color: white }

0 Likes