How to change the discount code color on Shopify forms

[3rdDay]

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!!! 😊

I'm using Dawn theme.

Thanks so much!

[tobebuilds · Accepted solution]

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

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

[3rdDay]

Thanks so much for your help!

I appreciate it 🙂