# 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](https://help.fluorescent.co/cornerstone/pages/theme-sections/newsletter-compact) section 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 %}

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/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

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Add background image

***

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

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../section-styles#image-overlays">#image-overlays</a></td><td><a href="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F73JN6EXgS8wovHQZ2N6u%2Foverlay-solid.png?alt=media&#x26;token=780c4a79-021f-4cd4-96e1-f7ea21e4356e">overlay-solid.png</a></td></tr></tbody></table>

`Click Newsletter section to find settings`

<table><thead><tr><th width="157">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>

## Add content blocks

***

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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWpPCYcBnxJ7gJK27tZP0%2Fcontent-blocks.png?alt=media&#x26;token=ce14a103-e169-4e00-85db-8d29e3f830e6" alt="" width="212"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKuqYPr6WhFEJjniMYgYN%2Fcontent-blocks-left.png?alt=media&#x26;token=2db579fe-c354-46ff-a11d-f6f2603e6bde" alt="" width="268"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target 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="../content-blocks#accent">#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../content-blocks#heading">#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="../content-blocks#text">#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="../content-blocks#button">#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="../content-blocks#image">#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td>Add border between blocks.</td><td><a href="../content-blocks#divider">#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../content-blocks#spacer">#spacer</a></td></tr></tbody></table>

### Change content layout

***

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

`Click section to find settings`

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

## Customize signup form

***

Change the signup button text, button style, form width, and choose to collect customer names.

`Click section to find settings`

<table><thead><tr><th width="199">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><tr><td><mark style="color:blue;">Form width</mark></td><td>Set the width of the sign up fields and button: <strong>Wide</strong>, <strong>Medium</strong>, or <strong>Narrow</strong>.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>Change the default "sign up" button text</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button. Select Primary button (<strong>Solid</strong>), Secondary button (<strong>Solid</strong>), Tertiary button (<strong>Outline</strong>), or Current color scheme <strong>Solid</strong>.</td></tr><tr><td><mark style="color:blue;">Footer text</mark></td><td>Change the text that appears below the form fields. Use this text to share disclaimers or extra details about what customers are signing up for.</td></tr></tbody></table>

## Section colors

***

Change the general colors of the section. Apply a color scheme or use custom colors.

`Click Newsletter section to find settings`

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Forms</mark></td><td>For the sign-up field, use the <strong>default form color</strong> (from your theme settings) or set to <strong>transparent</strong>.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Change the colors of section text and background.<br><br>Use the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You can also select a <strong>custom color scheme.</strong> <a href="../../../theme-styles/colors#color-schemes">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Use custom colors for this section to override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the section text.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the section background.</td></tr></tbody></table>

***

> **Related links**
>
> [Compact newsletter](https://help.fluorescent.co/cornerstone/pages/theme-sections/newsletter-compact)\
> [Popup Signup](https://help.fluorescent.co/cornerstone/pages/popups/sign-up-popup)\
> [Footer newsletter](https://help.fluorescent.co/cornerstone/footer/footer/newsletter-block)\
> [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)