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

Highlighted
Tourist
5 0 1

Hello everyone, 

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

 

 

Thank you

 

1 Like
Highlighted
Shopify Partner
7704 1058 2679

Hello, @Rainbowbowls 

Thanks for post.

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
34 0 5

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.

0 Likes
Highlighted
Tourist
5 0 1

Hi @Esteban19 

don't work. 

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

Immagine.png

0 Likes
Highlighted

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.

 

 

 

Marketing Manager at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial]: Build an effective homepage with PageFly.
1 Like
Highlighted
Tourist
5 0 1

Dear @victorbui 

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".

 

 

ImmagineRRR.png

 

0 Likes
Highlighted

@Rainbowbowls,

Did the color change?

You are using the same color for text and background.

The code for "Color" is for text color. 

Marketing Manager at PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group
- [Tutorial]: Build an effective homepage with PageFly.
1 Like
Highlighted
New Member
1 0 0

@victorbui 

Your code and solution worked for me. Thanks !

0 Likes