Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Hello everyone,
How to change ADD TO CART colour botton (Brooklyn Theme)? I would like green background and white text.
Thank you
Hello, @Rainbowbowls
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
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.
Hi @Rainbowbowls,
There are two ways you can change the styling of the add-to-cart button:
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.
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".
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.
Your code and solution worked for me. Thanks !
For those that may prefer a video here is one I made that goes through Debut, Brooklyn and Minimal as examples:
Dear @Rainbowbowls
Hope the following suggestions will help you
/* 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*/
If you still need help you can contact us by using the link or email given at signature.
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
@HighGirlJewelry your add to cart button text is black and border black what color do want to change button text and border ?
User | RANK |
---|---|
151 | |
95 | |
64 | |
58 | |
57 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By