Changing "Add to Cart" buttons that appear on all of my pages to a solid colour Dawn Theme

SteveRileyArt · ‎05-19-2024

I have tried a lot of resources on here but they do not seem to solve my issue of changing all of my Add to Cart buttons to a solid colour. I was able to change the product page button by turning off the Show dynamic checkout buttons. But I would like to have all the "Add to Cart" buttons present as a solid colour not an outline. Even better I would rather they use those buttons to simply buy the product outright, not just add to cart.

Is anybody able to help me?

I have tried this suggestion but it does not work
https://community.shopify.com/c/shopify-design/how-can-i-change-my-add-to-cart-button-from-outline-t...

My store url below
https://vrmediadecor.vrmedia.com.au/

Thank you in advance

Regards

Steve

devcoders · ‎05-19-2024

Hi @SteveRileyArt

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/base.css, and paste the code provided below at the end of the file.

.swym-btn-container .swym-button {
background: #ff6201!important;
}
.quick-add__submit {
background-color: #ff6201 !important;
color: #fff !important;
}
.quick-add__submit:after {
box-shadow: none !important;
}

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

SteveRileyArt · ‎05-19-2024

You nailed it @devcoders it was all the "Add to Cart" buttons I wanted to change to orange. The view all button is something I think I can suss out a bit later and change it to something complimentary. But this is exactly what I was after. Thank you so much.

View solution in original post

devcoders · ‎05-19-2024

Hi @SteveRileyArt

Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Dan-From-Ryviu · ‎05-19-2024

Hi @SteveRileyArt

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.quick-add__submit {
    background-color: #ff6201 !important;
    color: #fff !important;
}
.quick-add__submit:after {
    box-shadow: none !important;
}
</style>

- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

devcoders · ‎05-19-2024

Hi @SteveRileyArt

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/base.css, and paste the code provided below at the end of the file.

.swym-btn-container .swym-button {
background: #ff6201!important;
}
.quick-add__submit {
background-color: #ff6201 !important;
color: #fff !important;
}
.quick-add__submit:after {
box-shadow: none !important;
}

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

SteveRileyArt · ‎05-19-2024

Thank you @devcoders I will try that now. ChatGPT had me all over the place looking for "product-form__submit" which does not exist

devcoders · ‎05-19-2024

Hi @SteveRileyArt
Which button's color do you want to change? Can you send me a screenshot?

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

SteveRileyArt · ‎05-19-2024

You nailed it @devcoders it was all the "Add to Cart" buttons I wanted to change to orange. The view all button is something I think I can suss out a bit later and change it to something complimentary. But this is exactly what I was after. Thank you so much.

devcoders · ‎05-19-2024

Hi @SteveRileyArt

Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

SteveRileyArt · ‎05-19-2024

Another thank you also @devcoders for changing the colour in the add to wishlist button. That was not something I requested but in hindsight I should have. So thank you for your proactive solution.

Much appreciated

Regards

Steve

Najoua · ‎06-30-2024

could you please help me with this: double add to cart appear in my product pages how to solve this

kdotti · ‎07-12-2024

Hello! Loved this solution previously but today I updated to Dawn 15.0.0 and this update did not copy over. So I added it back into the assets>base.css file again and it does not seem to be doing the trick. Is there a code modification that needs to happen with the theme update?

Changing "Add to Cart" buttons that appear on all of my pages to a solid colour Dawn Theme

Changing "Add to Cart" buttons that appear on all of my pages to a solid colour Dawn Theme

Community Blog Articles