Electro How to Use Electro Newsletter
Theme: Electro · Section type: All-template section
The Newsletter section shows a sign-up form on top of a background image, so customers can join your email list from any page. Customers who sign up are added automatically to the Email subscribers customer list in your Shopify admin.
Note: You can add this section to any template, but not to the header or footer. Each section holds 1 Newsletter form block. To add a sign-up form to the footer, use the newsletter settings in the Footer section.
What you can do
- Add the section and your background image
- Write the text and set up the form
- Position the text and set the height
- See what customers see
- Change the section settings
- Fix common problems
Add the section and your background image
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Newsletter. The section comes with a Subheading, a Heading, a Description, and a Newsletter form.
- Under Image, select a Background image. A 2880 x 1200 px .jpg is recommended.
- Optional: select a Mobile background image (optional). A 750 x 1400 px .jpg is recommended. If you don't add one, phones show the main image.
- Click Save.
Tip: Choose an image with a calm area behind the text, and raise Overlay opacity if the text is hard to read.
Write the text and set up the form
- Click the Subheading, Heading, or Description block and enter the Text.
- For the Heading block, choose a Text size from H2 to H5.
- Click the Newsletter form block. Enter a Submit button label and choose a Submit button style.
- Drag the blocks to change their order.
- Click Save.
To add a block you removed, click Add block and choose it. Blocks with empty text don't show on the storefront.
Position the text and set the height
- Click the Newsletter section.
- Under Layout, choose a Content position on large screen and a Content position on mobile: Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center.
- Choose a Section height on large screen and a Section height on mobile.
- Click Save.
Setting | What it does |
|---|---|
Section height on large screen, Section height on mobile | Sets the height to fit the text and form (Adapt to content), 50% or 70% of the screen height, or the shape of the image (Adapt to image). The section grows if the content needs more space. |
What customers see
- Large screens: the background image fills the section, with the overlay on top and the text and form at the content position you chose. The email field and the Subscribe button sit side by side.
- Phones: the mobile background image is shown if you added one. The email field and the button stack on top of each other.
- Subscribing: customers enter their email and click the button. The page reloads and a confirmation message appears below the form. If the email isn't valid, an error message appears instead.
- Scrolling: the background image zooms out slightly as the section comes into view.
Settings reference
General
Setting | What it does |
|---|---|
Color scheme | Sets the text and button colors of the section. You edit color schemes in Theme settings > Colors. |
Overlay opacity | Darkens the image so the text is easier to read, from 0 to 90 %. With a top or bottom content position on large screens, the overlay fades toward the side away from the text. |
Custom mask overlay | Sets the color of the overlay. If it's empty, the overlay uses the default color. |
Custom text overlay | Sets the color of the text on the image. If it's empty, the text uses the color scheme. |
Layout
Setting | What it does |
|---|---|
Section height on large screen | See "Position the text and set the height" above. |
Content position on large screen | Places the text and form at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center on large screens. |
Section height on mobile | See "Position the text and set the height" above. |
Content position on mobile | Places the text and form at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center on phones. |
Image
Setting | What it does |
|---|---|
Background image | Sets the image behind the content. A 2880 x 1200 px .jpg is recommended. |
Mobile background image (optional) | Sets a separate image for phones. A 750 x 1400 px .jpg is recommended. |
Block settings
Setting | What it does |
|---|---|
Text | Sets the text of the Subheading, Heading, or Description block. The Description supports bold, italic, and links. |
Text size | Sets the heading size, from H2 to H5. Heading block only. |
Submit button label | Sets the text of the subscribe button. Newsletter form block only. |
Submit button style | Sets the subscribe button style: Primary, Secondary, or Tertiary. Newsletter form block only. |
Troubleshooting
I can't find my subscribers.
In your Shopify admin, go to Customers and open the Email subscribers segment. New subscribers appear there automatically.
The text is hard to read on my image.
Raise Overlay opacity, or set a Custom mask overlay and Custom text overlay color with more contrast.
The section looks cropped on mobile.
Add a Mobile background image (optional) in a portrait shape, or set Section height on mobile to Adapt to image.
I can't add the Newsletter section to the footer.
This section can't be used in the header or footer. Use the newsletter settings in the Footer section instead.
Related articles
- Electro How to Use Electro Popup Section
- Electro How to Use Electro Footer Section
- Electro How to Use Electro Image Banner Section
- Electro How to Use Electro Contact Form
Updated on: 30/10/2026
Thank you!