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

Rainbowbowls
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

 

KetanKumar
Shopify Partner
17277 1871 6460

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
Esteban19
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
Rainbowbowls
Tourist
5 0 1

Hi @Esteban19 

don't work. 

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

Immagine.png

0 Likes

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.

 

 

 

PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.
Survive 2021 with top secrets from e-commerce leaders
Rainbowbowls
Tourist
5 0 1

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

 

 

ImmagineRRR.png

 

0 Likes

@Rainbowbowls,

Did the color change?

You are using the same color for text and background.

The code for "Color" is for text color. 

PageFly - Advanced Shopify Page Builder - Empowering 90.000+ active merchants.
Survive 2021 with top secrets from e-commerce leaders
LAKB_Lisa
New Member
1 0 0

@PageFly 

Your code and solution worked for me. Thanks !

0 Likes
SimplifiedShop
Tourist
9 0 2

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

0 Likes

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.

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes