# 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/MWaHYDomGLKVsMhTvtM1" 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)


---

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