How to change Add To Cart Button Color in Dawn ver. 15.0.2

Store Design
, ,
1

Hi, I am working on my shop. I know how most of the things work but I stumbled upon a specific problem. How can I change the add to cart button in the new Dawn version 15.0.2? I think I have to change the code, but I don’t know how I can find it. I tried looking through the assets in search of add-to-cart or something similar in the code but to be honest I have no idea what I’m doing. Can someone help me? I want to change the button color to #F3E2FF and I want to change the color of the text to white or #F3E2FF.

2

Hey @funiki_nl

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello @funiki_nl , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
button.product-form__submit.button.button--full-width {
    background: #F3E2FF;
}

See the screenshot below,

dws_pvt_ltd_0-1723815209760.png
dws_pvt_ltd_0-1723815209760.png1821×958 127 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

4

Hello @funiki_nl

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product-form__buttons .button:before, .button: after{ box-shadow: unset; } .product-form__buttons .product-form__submit { color: #fff !important; background: #F3E2FF !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hello @funiki_nl
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

6

Hi @funiki_nl ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-form__submit.button {
    background-color: #F3E2FF !important;
}
7

Thank you, this worked :slightly_smiling_face:

Could you help me with another thing?

How can I change the color of the font to#685A81 because now you don’t see a text but only a lila color button :slightly_smiling_face:

8

Hi @funiki_nl ,

Please change code:

.product-form__submit.button {
  background-color: #F3E2FF !important;
  color: #685A81 !important;
}