# 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FPgQaDn9yx0vu5kz1SBB3%2Femail-signup.jpg?alt=media&#x26;token=ecb65096-1b4e-42b0-8705-a0ba8383d658" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F2bJuQwRSZ37zWPCfgEVZ%2Fcontent-blocks-add.png?alt=media&#x26;token=b226c9a1-d607-4439-8f9a-325707fb411f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" 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="../overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="../overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="../overview/content-blocks#overline-block">#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="../overview/content-blocks#image-block">#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="../overview/content-blocks#spacer-block">#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="../overview/content-blocks#divider-block">#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/changelog#id-5.1.0-latest-release) — Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) 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**.