Add to cart button color - dawn theme

Store Design
,

Topic summary

Goal: change Dawn theme product-page “Add to cart” button to #3bc2c3 and remove a persistent black outline in the Dawn theme.

Attempts and issues:

  • Custom CSS set background and text color, but a thin black line remained. Adding a border didn’t remove it.
  • A hover rule was tried but initially written with a space (.product-form__submit :hover), which targets a descendant rather than the button itself, so the issue persisted.
  • Screenshots were shared to show the remaining line and subsequent changes; images are helpful to understand the visual issue.

Resolution (final working fix):

  • In Online Store > Theme > Edit code > assets/base.css, add:
    • .product-form__submit and .product-form__submit:hover with background: #3bc2c3 and color: #ffffff.
    • .product-form__submit.button–secondary:after { box-shadow: none !important; }
  • The key fix was removing the box-shadow on the :after pseudo-element, which was creating the black outline.

Outcome:

  • The black line was removed and the button displays in the desired color.
  • The thread was resolved after private store details were reviewed to confirm the fix.
Summarized with AI on December 12. AI used: gpt-5.
1

I need help with changing the color of the ‘‘add to cart’’ button in the product page.

i used this code in the custom css section of the product information page

.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}

And got this result

Capture.PNG

But i want that black line also to be in this color #3bc2c3.

Please help. im using dawn theme

1 Like
2

Hello @Xakhil

Try this code.

.product-form__submit {
  background: #3bc2c3;
  color: #ffffff;
  border: 1px solid #3bc2c3;
}
.product-form__submit:hover {
  background: #3bc2c3;
  color: #ffffff;
  border: 1px solid #3bc2c3;
}
3

@devcoders thank you for the code but the black line is still there.

The outline color changed though

Capture.PNG

4

@ali768 @devcoders

i have updated the code to this

.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
}

and im getting this result

Capture.PNG

1 Like
5

Hello @Xakhil

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

6

@devcoders i messaged you the details please look

1 Like
7

Hello @Xakhil

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit.button--secondary:after {
box-shadow: none!important;
}

devcoders_0-1734157336349.png
devcoders_0-1734157336349.png630×544 28.2 KB

devcoders_1-1734157351950.png
devcoders_1-1734157351950.png1352×534 263 KB

8

Hello @Xakhil

You’re very welcome! I’m glad to hear that you’re pleased with the outcome. Please feel free to reach out if you need further assistance.

If my assistance was helpful, please consider liking and accepting the solution. Thank you!

1 Like