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

[Raghav2]

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

[ZestardTech]

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 */
}

[Raghav2]

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

[Raghav2]

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

[Raghav2]

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]

@ZestardTech do check

[Raghav2]

@niraj_patel @debutifysupport can you please help?

[niraj_patel]

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>

[Raghav2]

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

[ZestardTech · 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;
}

[Raghav2]

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

[ZestardTech]

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.