Customizing the Success after user signs up for email

[Gloomy]

Is there a way to customize the Success message box after user signs up for email newsletters? I’ve search google and on my own going through every link on the menu bar to no avail. I’d like to add a custom image and change the text font. I currently use the horizon theme. Thanks

[anmolkumar]

Hi @Gloomy

If you’re using the Shopify Forms app like in your screenshot, customization of the Success message is unfortunately quite limited.

Edit the success headline and text
Add or change a background image
Adjust basic colors
However, you can’t fully customize the layout or independently change the font of just the success message from within the Forms app. The typography is inherited from your theme settings.
If you want more control (custom fonts, different styling, more design flexibility), you have two options:
Option 1: Add Custom CSS
You can override the styling by adding custom CSS in your theme (Online Store → Themes → Edit Code → base.css or theme.css). This lets you change font family, font size, spacing, background styling, etc.

Option 2: Use the Horizon Theme’s Newsletter Section Instead
If design flexibility is important, consider using the built-in Newsletter section in the Horizon theme instead of the Forms app. It allows better typography control through theme settings and gives you more layout flexibility.

In short: the Forms app is designed to be simple and functional, but not deeply customizable without code.

Hope that helps!

[oscprofessional]

@Gloomy
Yes, but with limits and it depends on how the newsletter signup is implemented in your Horizon theme.

From your screenshot, you’re editing Shopify Forms (the built-in Forms app). That success message box has very limited customization.

What you can customize (native Shopify Forms)

Inside Shopify Admin → Apps → Forms → Your Form → Success:

Change success text
Show a discount code
Change heading & body fonts
Cannot fully control font styles
Cannot inject custom HTML
Cannot freely style the success modal with CSS
Image options are limited and not true custom layout

Build a custom newsletter form

Instead of Shopify Forms:

1. Create a custom newsletter section in Horizon
2. Use Shopify’s native customer endpoint:

<form method="post" action="/contact#newsletter" accept-charset="UTF-8">
  <input type="hidden" name="form_type" value="customer">
  <input type="hidden" name="utf8" value="✓">
  <input type="email" name="contact[email]" required>
  <button type="submit">Subscribe</button>
</form>

3. Detect success using:

• URL hash #newsletter
• Or form.posted_successfully?

4. Show *your own success block:

• Custom image
• Any font
• Animations (fade in/out)
• Full CSS control

[tim_tairli]

No “custom CSS” or editing theme stylesheets will apply inside Shopify Forms.
Explanation/solution is here Custom font on Shopify Forms (inline + popup) - #3 by tim_1

[Gloomy]

Thanks for help guys! Are there any apps that available for customization for the Success message? I just want it to have the same background as the form itself. Thanks again. Appreciate the help.

[Samcreativity04]

Sure, that is possible. There is a way to do that.

[tim_tairli]

if it’s just about the background, then solution referred in my post should do.

Share a link to your store (and preview password, if one is set) for exact code suggestions.

[Gloomy]

shopgloomy.com pw:ramsxms

thanks

[tim_tairli]

Try this for starters – Add a “Custom liquid” section in “Footer” section group and paste the code below.

This should apply the same background to success popup as the main form.

<script>
  window.formStyles || (window.formStyles = new Map());
  formStyles.set('success-background-rules', `
      div:has(>[data-testid="banner-success"]):before {
        content: "";
        background-image: var(--form-container-background-image); 
        background-size: var(--form-container-background-size);        
        opacity: var(--form-container-background-opacity);
        position: absolute;
        inset: 0;
      }
  `);
</script>

Should produce this:

[Gloomy]

Copied and pasted the code in “Custom liquid” in the “Footer” section and still nothing. It just shows the code on the website.

[tim_tairli]

Ah, sorry – my bad, it needs to be wrapped with <script> and </script>

I’ve updated the code above, please try again.

[Gloomy]

Thank you! It worked. Very much appreciated!