# 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 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 %}

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add background image

***

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

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

***

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

`Click section to find settings`

<table><thead><tr><th width="181">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay</mark></td><td>Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td><mark style="color:blue;">Overlay gradient</mark></td><td>Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</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>

## Add section headings

***

Add a section title and promotional text. The section headings are included as blocks nested within the section.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Heading** block to change the text ("Subscribe to our newsletter") for the section title.

   > we recommend a short title of just a few words.

   > Set the **Heading size** to **Small**, **Medium**, or **Large**.
2. Click the **Subheading** block to add a few sentences below the heading.

   > We recommend two or three short sentences that tells customers what they can expect if they sign up.

   > Set the **Text size** to **Small**, **Medium**, or **Large**.
3. (*Optional*.) Add a **Accent** block and enter text to display a small heading in all capitals above the main heading.

   > We recommend a short one or two word label.
4. Click **Save**.

</details>

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-a47f66c6c39f98e8d0c5a68d19f8858f0839cd32%2Fnewsletter-headings.jpeg?alt=media)

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

## Change layout

***

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

## Collect customer names

***

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/readme/changelog#id-5.1.0) — Learn how to [update your theme](https://help.fluorescent.co/stiletto/general/theme-updates) to access the latest features.
{% endhint %}

`Click Newsletter signup 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>

## Section colors

***

Change the colors of the background, text, and button elements.

`Click section to find settings`

<table><thead><tr><th width="174">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color of the section background.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of text.</td></tr><tr><td><mark style="color:blue;">Input color</mark></td><td>Select the color of the inputted text of the fields.</td></tr><tr><td><mark style="color:blue;">Input background</mark></td><td>Select the color of the section background.</td></tr><tr><td><mark style="color:blue;">Button</mark></td><td>Select the color of the button background.</td></tr><tr><td><mark style="color:blue;">Solid button text</mark></td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr></tbody></table>

\\

***

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