How to change the discount code color on Shopify forms

Store Design
, ,

Topic summary

A user wants to change the discount code text color to white (#FFFFFF) in a Shopify form embedded on their Dawn theme site. The form displays a discount code after email submission, but standard CSS customization isn’t working.

Key Finding:
The form uses a shadow DOM (form-embed element), which blocks external CSS styling. A community member identified this technical barrier and provided a JavaScript workaround:

document.querySelector('form-embed').shadowRoot.querySelector('[data-testid="banner-success"] span').style.color = '#fff'

Current Status:

  • The JavaScript solution requires additional code to detect form submission
  • The original poster didn’t implement a final solution and no longer needs the fix
  • Another user encountered the same issue but no follow-up resolution was provided

The discussion remains open for anyone needing to style shadow DOM elements in Shopify forms.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hi & Thanks for checking this out!

I have an inline Shopify form added to my website here: https://3rdday.co.uk/#shopify-section-template–23326105829668__1741186850702ce7ae and it provides a discount code when someone enters their email. I want to be able to change the discount code colour to #FFFFFF (which will allow me to change the background of the section - I know it’ll look strange for now) but can’t seem to get it to work using custom CSS. There is no option to change this using the Shopify Forms app or the custom styling options within the section editor (I’m certain). It could be that CSS won’t work and javascript is needed?

IF YOU ENTER YOUR EMAIL ADDRESS ON MY FORM TO TEST THINGS OUT & FIND A FIX, I WILL REMOVE YOUR EMAIL FROM THE MAILING LIST SO YOU DON’T GET ANY MARKETING EMAILS!!! :blush:

I’m using Dawn theme.

Thanks so much!

2

Hi 3rdDay, here’s what I saw after entering an email:

tobebuilds_0-1741462249963.png
tobebuilds_0-1741462249963.png587×210 14.2 KB

The form-embed element has a shadow DOM, so that probably explains why you weren’t able to style it. Unless the creator of the form-embed component had exposed parts of the component to be used with ::part() selectors, you wouldn’t be able to style this from the outside using just CSS.

However, using JavaScript, I was able to style it:

document.querySelector('form-embed').shadowRoot.querySelector('[data-testid="banner-success"] span').style.color = '#fff'

It’s up to you to add your own code to detect when the form is submitted, however. Hopefully this snippet serves as a useful starting point for you.

Best,

Tobe

3

Thanks so much for your help!

I appreciate it :slightly_smiling_face:

4

Hi 3rdDay,

I hope you are doing well!
I am having the same problem - did you manage to get it fixed?

5

Hi - I didn’t find a solution in the end. Sorry about that. Gave it a go and eventually didn’t need it. Do you still need a fix?