FROM CACHE - en_header

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

 

Replies 12 (12)
KetanKumar
Shopify Partner
33393 3351 11052

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
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.

Rainbowbowls
Tourist
5 0 1

Hi @Esteban19 

don't work. 

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

Immagine.png

PageFly
Shopify Partner
2745 383 1727

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 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.

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

 

PageFly
Shopify Partner
2745 383 1727

@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 100.000+ active merchants.


Check our Evergreen List of Best Platforms To Sell Online.

LAKB_Lisa
New Member
1 0 0

@PageFly 

Your code and solution worked for me. Thanks !

SimplifiedShop
Excursionist
29 0 7

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
Shopify Partner
3012 181 488

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.

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
HighGirlJewelry
Tourist
6 0 1

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
Shopify Partner
2302 569 1407

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

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder
HighGirlJewelry
Tourist
6 0 1
im sorry i figured it out already!