> 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/cornerstone/pages/theme-sections/newsletter-compact.md).

# Newsletter compact

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

> See the [Newsletter](/cornerstone/pages/theme-sections/newsletter.md) section for a more prominent sign-up form with further design elements. 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](/cornerstone/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Newsletter compact**. 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="/pages/CBsbGCpJAMAjEg83Oxwb#section-colors">/pages/CBsbGCpJAMAjEg83Oxwb#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-padding">/pages/CBsbGCpJAMAjEg83Oxwb#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-animations">/pages/CBsbGCpJAMAjEg83Oxwb#section-animations</a></td></tr></tbody></table>

## Add background image

***

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

`Click Newsletter compact section to find settings`

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

### Change overlay colors

***

When text appears on top of images, sections use **Image overlay** colors for the text. You can use the **default colors** from *Theme settings > Colors*, or select **custom colors** for the section.

The overlay also applies a **tint** over top the image. You can use a **solid** or **gradient** color, or turn it off.

{% hint style="info" %}
Overlay colors with high contrast help keep text readable and [accessible for everyone](/cornerstone/general/editing-themes/accessibility.md#color-contrast-for-text).
{% endhint %}

<div><figure><img src="/files/3tMU4IAlxRLfZ1lHpHfn" alt="" width="301"><figcaption></figcaption></figure> <figure><img src="/files/ozjRjvyjOsqFJrwmb3xE" alt="" width="563"><figcaption><p>Solid color with 70% opacity</p></figcaption></figure> <figure><img src="/files/RRJj153Ziy0rHHTn6nJD" alt="" width="563"><figcaption><p>Gradient color - bottom to top</p></figcaption></figure></div>

`Click Newsletter compact section to find settings`

<table><thead><tr><th width="185">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tint opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br><em>S</em>e<em>t the opacity to 0% to turn off the tint overlay.</em></td></tr><tr><td><mark style="color:blue;">Tint style</mark></td><td>Select a <strong>Solid</strong> color or <strong>Gradient</strong> color overlay for the tint. For gradients, select a <strong>direction</strong> of the fading color.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to use custom overlay colors, instead of the default theme colors.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the headings and text.</td></tr><tr><td><mark style="color:blue;">Tint color</mark></td><td>Select a custom overlay color.</td></tr></tbody></table>

## Add blocks

***

Click **(+) Add block** to find and select the following blocks. Use the drag-and-drop handles **`⋮⋮`** to change the order of the blocks.

<table><thead><tr><th width="214">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Newsletter signup</mark></td><td>Change the signup button text and style, and change the footer text below the signup field.</td></tr><tr><td><mark style="color:blue;">Text content</mark></td><td>Add multiple lines of rich text.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Add a small image with an adjustable size.</td></tr><tr><td><mark style="color:blue;">Social icons</mark></td><td>Show icons for your social media links added in your theme settings.</td></tr></tbody></table>

## Customize signup form

***

Change the signup button text, button style, 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;">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>

## Change layout

***

`Click Newsletter compact section to find settings`

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Spacing mode</mark></td><td>Change the spacing between elements to have <strong>Space between</strong>, <strong>Space evenly</strong>, use <strong>Compact</strong> spacing.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Align the headings to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> of the section.</td></tr></tbody></table>

## Section colors

<table><thead><tr><th width="183">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Forms</mark></td><td>Choose to Use default form colors or make the sign-up form Transparent.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><p>Change the color scheme applied to the section text and background.<br><br>Select the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default colors: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You may also select one of the two custom color schemas.</p><p><br>Learn more about <a href="/pages/7UqaWJHr530MKWscpEMp#color-schemes">Color schemes</a>.</p></td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to apply custom colors to the section. These colors will override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the heading and text. This setting applies only if the Override with custom colors option is enabled.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for section or block background. This setting applies only if the Override with custom colors option is enabled.</td></tr></tbody></table>

***

> **Related links**
>
> [Newsletter](/cornerstone/pages/theme-sections/newsletter.md)\
> [Popup Signup](/cornerstone/pages/popups/sign-up-popup.md)\
> [Footer newsletter](/cornerstone/footer/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)