> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/newsletter.md).

# Newsletter

The **Newsletter** section promotes your email newsletter with an on-page signup form. Customize this section with a flexible layout, multiple style blocks, social media icons, and an optional image.

> See the [Compact newsletter section](/stiletto/sections/theme-sections/newsletter-compact.md) for a more minimal design for any page. The Popup and Footer sections can also include a newsletter signup block.

{% 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 how to manage Shopify customer emails from their [Email subscriber list management](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management) and [Using Shopify Email for email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email) article.
{% endhint %}

<img src="/files/pTVkgzWrCmsgBXGGzQUk" alt="" width="563">

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Background</h2>

***

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

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="159">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><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.<br><br>You may want a different image that works best with mobile screen dimensions.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>For desktop and mobile, select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

### <mark style="color:$primary;">Background image overlay</mark>

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

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select a color scheme to apply background and text color. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr></tbody></table>

<h2 align="center">Add content blocks</h2>

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#accent">/pages/5U2s1qKTve492neoD35D#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#heading">/pages/5U2s1qKTve492neoD35D#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="/pages/5U2s1qKTve492neoD35D#text">/pages/5U2s1qKTve492neoD35D#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="/pages/5U2s1qKTve492neoD35D#button">/pages/5U2s1qKTve492neoD35D#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="/pages/5U2s1qKTve492neoD35D#image">/pages/5U2s1qKTve492neoD35D#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="/pages/5U2s1qKTve492neoD35D#video-player">/pages/5U2s1qKTve492neoD35D#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Border</strong></mark></td><td>Add divider between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#divider">/pages/5U2s1qKTve492neoD35D#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#spacer">/pages/5U2s1qKTve492neoD35D#spacer</a></td></tr></tbody></table>

### <mark style="color:$primary;">Change content layout</mark>

In the section settings, change the **width** and **alignment** of the content blocks area.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at <strong>full width</strong> or set a <strong>custom width</strong>.</td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the section: between <strong>400</strong> and <strong>1000 px</strong>.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Choose to align the content blocks to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the content area.</td></tr></tbody></table>

<h2 align="center">Collect customer names</h2>

***

In the **Newsletter signup**, 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/stiletto/sections/theme-sections/pages/J9rXgmXvITsLLIzjsXoR#id-5.1.0) — Learn how to [update your theme](/stiletto/general/theme-updates.md) to access the latest features.
{% endhint %}

<sub><mark style="color:$info;">Click Newsletter signup block to find settings<mark style="color:$info;"></sub>

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

***

> **Related links**
>
> [Compact newsletter](/stiletto/sections/theme-sections/newsletter-compact.md)\
> [Popup Signup](/stiletto/sections/popups/sign-up-popup.md)\
> [Footer newsletter](/stiletto/pages/footer/newsletter-block.md)\
> [Email subscriber list management](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/email-subscriber-list-management)\
> [Using Shopify email for email marketing](https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email)