How can I change the color of the email signup box in Dawn theme?

Store Design
,

Topic summary

Issue: User wants to change the background color of the email signup input box in the Dawn theme footer.

Solutions Provided:

Two approaches were suggested, both involving editing the base.css file:

Option 1:

  • Navigate to Assets > base.css
  • Add CSS targeting .newsletter-form__field-wrapper .field__input
  • Modify the background property with desired color code
  • Remove box-shadow using !important flag

Option 2:

  • Go to Themes > Edit code > Assets > base.css
  • Add CSS targeting .footer__newsletter .field:after
  • Customize multiple elements including box-shadow color, form color, label color, and SVG button color
  • Also includes styling for the input focus state

Note: Both solutions use custom CSS added to the bottom of the base.css file and allow color customization by replacing the provided color values.

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

Hello!

I search for the way to change email entry box color in footer:

Olga_MLB_0-1668186719044.jpeg
Olga_MLB_0-1668186719044.jpeg1021×804 24 KB

Your help is much appreciated!

Page preview: https://t13kfndexohji9r0-55391682717.shopifypreview.com/

2

Hi @Olga_MLB ,

Go to Assets > base.css and paste this at the bottom of the file:

.newsletter-form__field-wrapper .field__input {
	background: #648B80 !important;
	border: 0.1rem solid #648B80 !important;
}
.newsletter-form__field-wrapper .field:before,
.newsletter-form__field-wrapper .field:after {
	box-shadow: none !important;
}

You can change the color code to your liking.

3 Likes
3

HI @Olga_MLB
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

/* change the color to color you like*/
.footer__newsletter .field:after {  
  box-shadow: 0 0 0 1px red;
}
.footer__newsletter .field__input:focus{
    box-shadow: 0 0 0 2px red;
}
.footer__newsletter .newsletter-form__button svg {
  color: orange;
}
.footer__newsletter .field__label {
  color: purple;
}
#NewsletterForm--footer {
  color: pink;
}
1 Like