> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

![A Newsletter section with heading, text, and sign-up form centered on a background image (Skatewear preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/news-1_1suk08m.jpg)

**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
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Newsletter**. The section comes with a Subheading, a Heading, a Description, and a Newsletter form.
3. Under **Image**, select a **Background image**. A 2880 x 1200 px .jpg is recommended.
4. 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.
5. 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
1. Click the **Subheading**, **Heading**, or **Description** block and enter the **Text**.
2. For the Heading block, choose a **Text size** from H2 to H5.
3. Click the **Newsletter form** block. Enter a **Submit button label** and choose a **Submit button style**.
4. Drag the blocks to change their order.
5. 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
1. Click the **Newsletter** section.
2. 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.
3. Choose a **Section height on large screen** and a **Section height on mobile**.
4. 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.
![The Newsletter section on a phone, with an email entered and the Subscribe button below the field (Skatewear preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/news-2_e4j0rz.png =390x480)


## 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](https://help.ecomx.co/en/article/electro-how-to-use-electro-popup-section-1xxucv0/)
- [Electro How to Use Electro Footer Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-footer-section-1og04vg/)
- [Electro How to Use Electro Image Banner Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/)
- [Electro How to Use Electro Contact Form](https://help.ecomx.co/en/article/electro-how-to-use-electro-contact-form-yudoyc/)