How to edit the background color and text color of the Add To Cart button

How to edit the background color and text color of the Add To Cart button

TRUONGPHAM_102
Tourist
14 0 1

I need to edit the background color and text color of the Add To Cart button
Where do I need to edit its code? I use the Dawn Theme
Thank you very much

 

Screenshot 2024-07-12 140912.png

Replies 4 (4)

niraj_patel
Shopify Partner
2391 516 513

Hello @TRUONGPHAM_102 

You can add code by following these steps

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>
.product-form__buttons button.product-form__submit.button {
background: #000 !important; /*change color according to you*/
color: #fff !important; /*change color according to you*/
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

 

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

devmont-digital
Shopify Partner
165 33 42

 

Navigate to Online Store -> Themes -> Edit Code. Search for the file base.css and go to the bottom of the file to paste the above code.

 

 

.product-form__submit {
    background-color: red;
    color: #fff;
}

 

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

GTLOfficial
Shopify Partner
769 160 169

Hello @TRUONGPHAM_102 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the bottom of the file.

#ProductSubmitButton-template--23051625955631__main {
background: #5a31f4 !important;
border-color: #5a31f4 !important;
color: #fff;
}

and the result will be
14.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

THodge
Tourist
8 0 1

To change the background and text color of the "Add to Cart" button, here's a straightforward approach:

  1. Find the Button's Settings: Locate the button in your website's editing tool or code.

  2. Edit the Colors:

    • Background Color: Look for an option or setting labeled "Background Color" and choose your preferred color.
    • Text Color: Find the "Text Color" option and select the color you want for the text.
  3. Save Your Changes: Save or publish the changes to update the button's appearance.

  4. Preview: Check your website to ensure the button looks the way you want.