Solved

REFRESH THEME: HOW TO CHANGE COLOUR OF ADD TO CART BUTTON

Raghav2
Shopify Partner
30 1 3

Hi,
I am using REFRESH FREE THEME.

How to change colour of “Add to Cart” Button.
I am asking for the colour of this button on "Collections Pages" and Home Page wherever we add a "Featured Collection"
Screenshot Attached: https://paste.pics/N6X7V

Accepted Solution (1)
ZestardTech
Shopify Expert
5393 971 1292

This is an accepted solution.

Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

REFRESH THEME: HOW TO CHANGE COLOUR OF ADD TO CART BUTTON

.quick-add__submit {
background-color: #0d684b;
color: #fff;
}
.quick-add__submit span {
color: #fff;
}
 

ZestardTech_0-1681821846910.png

 

ZestardTech_1-1681821846776.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 11 (11)

ZestardTech
Shopify Expert
5393 971 1292

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.liquid and paste this at the bottom of the file:

/* Change the color of the "Add to Cart" button on collections pages */
.grid__item .product-item__add-to-cart {
background-color: #ff0000; /* Replace with your desired color */
}

/* Change the color of the "Add to Cart" button on the home page for featured collections */
.featured-collections__product-item .product-item__add-to-cart {
background-color: #ff0000; /* Replace with your desired color */
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Raghav2
Shopify Partner
30 1 3

This is very interesting wow. Can I instead add as CSS option under the block? 

Raghav2
Shopify Partner
30 1 3

@ZestardTech can you please let me know if this can be done via CSS?

 

Raghav2
Shopify Partner
30 1 3

Hey,
This is not working. 

1. Under assets, there is nothing that is ending with liquid, all css
2. I saw in sections place and tried to edit but nothing happened. Attaching screenshots to show so that you can check if I did everything correctly.
https://paste.pics/N72L0



Also attached what is there in ASSETS dropdown - https://paste.pics/N72KK

 

Raghav2
Shopify Partner
30 1 3

@ZestardTech do check

Raghav2
Shopify Partner
30 1 3

@techlyser_web @debutifysupport can you please help?

techlyser_web
Shopify Partner
1404 262 276

hello @Raghav2 

You can add code by following these steps to change ATC background color

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid


<style>



button.add-to-cart {
background-color: #ff0000 !important; /* Replace with your color */
}
</style>


Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Raghav2
Shopify Partner
30 1 3

Hey,
I tried both but didn't work - please check - both files attached


Screenshot 2023-04-18 115553.pngScreenshot 2023-04-18 115722.png

ZestardTech
Shopify Expert
5393 971 1292

This is an accepted solution.

Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >base.css and paste this at the bottom of the file:

REFRESH THEME: HOW TO CHANGE COLOUR OF ADD TO CART BUTTON

.quick-add__submit {
background-color: #0d684b;
color: #fff;
}
.quick-add__submit span {
color: #fff;
}
 

ZestardTech_0-1681821846910.png

 

ZestardTech_1-1681821846776.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Raghav2
Shopify Partner
30 1 3

THANK YOU - THIS GOT SOLVED. THANK YOU SO MUCH. 


ZestardTech
Shopify Expert
5393 971 1292

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing