Can the newsletter sign-up box color be altered?

Store Design
,

Topic summary

A user asks how to change the newsletter signup box colors—specifically making the input field white with black text—without affecting the entire section background.

Initial Solutions Provided:

  • PageFly-Richard suggests adding CSS code to email-signup.css targeting .email-signup.section with custom color variables
  • The code includes customizable Black and White values to fit the website design

Clarification & Follow-up:

  • Original poster clarifies they only want to modify the email input box colors, not the whole section background
  • PageFly-Richard appears to confirm the solution worked correctly
  • A second responder (oscprofessional) offers alternative CSS code targeting footer.css with specific styling for .signup-container input, .field label, and header elements

Status: The discussion appears resolved with working CSS solutions, though the second code snippet in the input is partially cut off. Both solutions involve adding custom CSS to theme files via the Shopify code editor.

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

Hi all,

Is it possible to change the colour of the email box on the newsletter sign up section (not footer)

Can the box be filled white and the text black?

URL:https://label-source.co.uk/

screenshot below

Screenshot 2023-02-23 at 14.39.59.png
Screenshot 2023-02-23 at 14.39.59.png926×1222 48 KB

2

Hi @Danielparsons ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/email-signup.css->paste below code at the bottom of the file:

.shopify-section .email-signup {
    --color-bg: black !important;
    --color-text: white !important;
    --color-body-rgb: white !important;
}

NOTE: You can change value Black and White to fit your website

I hope it would help you
Best regards,

Richard | PageFly

3

Hi Richard,

I only want to change the all colour of the email box not the whole section backgrounds this possible?

4

Hi @Danielparsons ,

Looks like it worked correctly, right?

5

Hello @Danielparsons

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->footer.css>Add this code at the bottom.

.section-spacing-padding.section-spacing--disable-bottom {
    background: #ffffff !important;
    color: #000000 !important;
}
.email-signup .section-header--content .h3 {
    color: #000 !important;
}
.field label {
    color: #000 !important;
}
.signup-container input {
    margin-bottom: 10px !important;
}