Solved

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

vrmediadecor
Tourist
6 1 4

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

Accepted Solutions (3)

devcoders
Shopify Partner
190 31 48

This is an accepted solution.

Hi @vrmediadecor 

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;
}

 

devcoders_0-1716099108755.pngdevcoders_1-1716099133228.png

 

 

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

View solution in original post

vrmediadecor
Tourist
6 1 4

This is an accepted solution.

Screenshot 2024-05-19 at 4.45.21 pm.png

 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
Shopify Partner
190 31 48

This is an accepted solution.

Hi @vrmediadecor 

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.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7990 1560 1583

Hi @vrmediadecor 

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>

Screenshot_2.jpg

- Helpful? Like and Accept solution to let me know or Buy me coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

devcoders
Shopify Partner
190 31 48

This is an accepted solution.

Hi @vrmediadecor 

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;
}

 

devcoders_0-1716099108755.pngdevcoders_1-1716099133228.png

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
vrmediadecor
Tourist
6 1 4

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
Shopify Partner
190 31 48

Hi @vrmediadecor 
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.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
vrmediadecor
Tourist
6 1 4

This is an accepted solution.

Screenshot 2024-05-19 at 4.45.21 pm.png

 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
Shopify Partner
190 31 48

This is an accepted solution.

Hi @vrmediadecor 

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.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
vrmediadecor
Tourist
6 1 4

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