Email signup

Featured links

1. Company XYZ documentation on headers settings
2. Company XYZ documentation on section backgrounds settings
3. Company XYZ documentation on section padding settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on visibility settings
6. Company XYZ documentation on layout widths settings
7. Shopify documentation on sections and blocks
8. Shopify documentation on customizing sections

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to add a focused newsletter signup area wherever you want to capture interest, support a promotion, or grow your email list. It works best when the message is short, the benefit is obvious, and the form has enough visual separation from nearby content.

Section-specific settings

Color settings

These color controls let you override broader theme colors for this section only. Use them when the signup area needs stronger contrast, a campaign-specific look, or better separation from the surrounding page.

Pay close attention to readability if you add a background image, gradient, or video. Strong contrast between the background, heading, and supporting text usually matters more than decorative color choices.

If you use background media, check the section on both desktop and mobile to make sure the heading, text, and form remain easy to read.

Standard section settings

Header settings

Header settings control the introductory content above the signup form, including the icon, caption, heading, heading level, and supporting text. Use this area to explain why someone should subscribe and what they can expect.

Keep the copy concise and benefit-led. The icon is optional, so it is worth removing if it adds visual noise or does not support the message.

Tip

Choose the heading type based on your page structure, not just appearance, so the section fits cleanly into the rest of the page hierarchy. For a broader overview of how sections are arranged in the editor, see Shopify documentation on sections and blocks

Section background settings

Section background settings let you place the signup area on a color, gradient, image, or video background. Overlay settings help improve contrast and make text easier to read over media.

If you use both a color and a gradient, the gradient takes priority. The same applies to overlay gradients, so review the final combination instead of assuming both will appear together.

Padding settings

Padding settings adjust the space above and below the signup content. Larger spacing makes the section feel more like a featured callout, while tighter spacing helps it sit naturally between other content.

Check mobile spacing separately. Signup sections can feel crowded quickly on smaller screens, especially when the subheading is longer.

Separator settings

Separator settings add an optional line above or below the section. This is useful when the signup area sits between similar sections and needs a subtle visual boundary.

If the section already has a strong background or plenty of spacing, separators may be unnecessary. Keep them understated so they support the layout without competing with the form.

Visibility settings

Visibility settings control whether this section appears on desktop, mobile, or both. This is most useful when you want a different signup presentation for smaller screens.

Hide the section on one device only if you have a clear alternative elsewhere. Avoid removing an important signup opportunity from mobile without another visible path to subscribe.

Width settings

Width settings control the maximum width of the content and the overall width of the section wrapper. Use them to keep the form easy to scan or to create a broader campaign-style banner.

For most signup sections, a moderate content width keeps the message focused and readable. If you change section width while using a background, preview the live page as well as the editor to judge the effect more accurately. For setup guidance on editing sections in the theme editor, see Shopify documentation on customizing sections

Usage notes

1. Lead with value. Use the heading and subheading to tell visitors exactly why subscribing is worthwhile, such as exclusive offers, early access, or product updates.
2. Keep the section readable. Pair background media with enough overlay and text contrast so the signup area stays clear at a glance.
3. Use width to control focus. Narrower content widths usually suit simple signup prompts, while wider layouts work better for banner-style promotions.
4. Match spacing to importance. Increase padding when this is a primary call to action, and reduce it when the signup sits within a longer page flow.
5. Review mobile before publishing. Check heading length, spacing, and background readability on smaller screens so the section stays clean and easy to use.
6. Check both viewports. Desktop and mobile controls can change alignment, visibility, and media presentation differently, so review the section in both sizes before publishing.
7. Keep form states legible. Make sure success and error messages remain easy to read, especially when stronger background styling or media choices reduce contrast.