Email Newsletter email box change to white

Technical Q&A

Topic summary

A user needs to change their newsletter subscription input box to white on the Impulse theme, as it currently blends with the background color.

Solutions Provided:

Two similar CSS code snippets were offered to add to the theme.css file:

  • Navigate to: Online Store > Themes > Edit code > Assets > theme.css
  • Add CSS targeting .newsletter__input-group input or .input-group-field.newsletter__input with white background and border colors using !important flags

Outcome:

The original poster confirmed one solution successfully resolved their issue. However, another user reported the code did not work for them, suggesting the fix may be theme-specific or require adjustment for different setups.

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

hello,

I am wanting to change the box for my newsletter subscription to white and not be the same as the background color. I cannot find any coding to help. IS this something that can be adjusted? I am using Impulse theme.

It is the subscribe section all in Pink, I want the box where customers input their email to be white.

Here is a link to a preview of my page: https://v3ab2eyeanjk3a2a-54968811584.shopifypreview.com

Thank you!

2

Here is an image of the spot I am talking about.

Screenshot 2022-08-09 153353.png
Screenshot 2022-08-09 153353.png885×432 51.1 KB

3

Hi! @NCCShop

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for

your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Go to Online Store-> Theme->Edit code

Asset-> theme.css ->paste the below code at the bottom of the file.

input-group-field.newsletter__input {

background-color: #fff !important;

border: 1px solid #fff !important;

}

Best regards,

PageFly

4

Hi @NCCShop ,

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

.newsletter__input-group .newsletter__input {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

Hope it helps!

1 Like
5

@LitExtension Thank you so much, again. This fixed the issue I was having. :slightly_smiling_face:

1 Like
6

this code did not work for me