# Newsletter

Add the **Newsletter** section to display an email sign-up form with an optional banner image.

{% hint style="success" %}
Newsletter subscribers are added to your "accepts marketing" [Customers](https://shopify.com/admin/customers?query=\&accepts_marketing=1) list. You can learn more about managing customer emails in Shopify's guides for [Email subscriber lists](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and [Email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email).
{% endhint %}

<figure><img src="/files/PRg1wlvDYhvptYbPTLb6" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Newsletter**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Add background image

***

Add and customize the background image for your email signup section.

`Click Newsletter section to find settings`

<table><thead><tr><th width="118">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image to display as the background of the banner.</td></tr></tbody></table>

### Add image overlay

***

The image **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

* Choose a **Color scheme** for the overlay and overlay text
* Change the **Opacity** to make the overlay more or less transparent

`Click Newsletter section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br>Set the opacity to 0% to turn off the overlay.</td><td><strong>0-100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40</mark></td></tr></tbody></table>

### Set banner height

***

`Click Newsletter section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Banner height</mark></td><td>Change the maximum height of the banner. The Adapt to image option sets the banner height to the full height of your image, which avoids cropping.</td><td><strong>Adapt to image</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Custom</strong></td></tr><tr><td><mark style="color:blue;">Custom desktop height</mark></td><td>For desktop, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>250 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr><tr><td><mark style="color:blue;">Custom mobile height</mark></td><td>For mobile, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>150 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr></tbody></table>

### Change image animation

***

Add animation effects to your image banner.

`Click Newsletter section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image banner transition</mark></td><td>Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.</td><td><strong>None</strong><br><strong>Fade</strong><br><strong>Iris wipe</strong></td></tr></tbody></table>

## Add content blocks

***

Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<div><figure><img src="/files/y6QvuNTjUyDpm7r7AO5y" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" alt=""><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#heading-block">/pages/1RQDWwxKzKWmtVBL177n#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#text-block">/pages/1RQDWwxKzKWmtVBL177n#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#overline-block">/pages/1RQDWwxKzKWmtVBL177n#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#image-block">/pages/1RQDWwxKzKWmtVBL177n#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#spacer-block">/pages/1RQDWwxKzKWmtVBL177n#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#divider-block">/pages/1RQDWwxKzKWmtVBL177n#divider-block</a></td></tr></tbody></table>

### Change text alignment

***

`Click Newsletter section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="336">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

## Collect customer names

***

In the **Email form**, you can choose to show required fields for the customer's first and last name.

{% hint style="info" %}
This option was added in [v5.1.0](https://help.fluorescent.co/eclipse/sections/pages/Di96NGkvSFpr2vzlTBuY#id-5.1.0-latest-release) — Learn how to [update your theme](/eclipse/changelog/update-your-theme.md) to access the latest features.
{% endhint %}

`Click Email form block to find settings`

<table><thead><tr><th width="207.48028564453125">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collect customer name</mark></td><td>Enable option to show required fields for the customer's first and last name.</td></tr></tbody></table>

## Edit default wording

***

The **Newsletter form** includes default text for the submit button ("Subscribe"), email placeholder ("Your email"), and confirmation message ("Thanks for subscribing!"). You can edit this text in the default theme content editor.

* In your theme editor, click the **Actions (**<kbd>**...**</kbd>**)** button and select **Edit default theme content**.
* Search "Newsletter" to find the default text under **General >** **Newsletter form**.
* Replace the default text in the field and click **Save**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/email-signup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.