> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Collect email sign-ups with Facet's newsletter banner

> Add Facet's newsletter banner to collect email sign-ups, place a picture beside or behind the form, and write the heading and text around it.

The Facet newsletter banner is a card with an email sign-up form, a heading and text, and an optional picture. Shoppers who sign up are added to your customer list as email subscribers. This page covers the picture and layout settings, the sign-up form and where sign-ups go.

![The Newsletter banner section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/newsletter-banner/newsletter-banner-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=4556d7606d7f20c0aac4bdb12ddced3f)

## What this section controls

* The picture, with a separate picture for phones.
* Whether the picture sits left, right, behind the text, or not at all.
* The heading, text and sign-up form in the card.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Newsletter banner**. The section can't be added to the header.

**3. Pick a picture and layout**

Click **Newsletter banner**, choose an **Image**, and set **Image position**.

**4. Write your offer**

Edit the heading and text blocks to tell shoppers what they get for signing up.

![The theme editor with the Newsletter banner section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/newsletter-banner/newsletter-banner-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=909ac62273eddc982431f9d21089d02f)

## Section settings

### Picture

![Theme editor sidebar showing the Newsletter banner section settings: Image, Mobile image, Image position, Common settings, Color scheme, Top padding, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/newsletter-banner/newsletter-banner-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=29fa03b02f0af0222dac5dcbd0989ebf)

> [accordion] Image and Mobile image
>
> **Image** is the banner picture. **Mobile image** is an optional picture for phones, used only when **Image** is set. Without one, phones show **Image**. Until you choose a picture, a placeholder shows.

> [accordion] Image position
>
> * **Left** or **Right** (default): on screens 750 pixels wide and larger, the picture takes 40% of the card on that side. On phones it sits above the text in a 4:3 shape.
> * **Background**: the picture fills the card and the text and form sit centered on top of it.
> * **None**: the card shows no picture.

### Common settings

![Theme editor sidebar showing the Newsletter banner section settings (part 2, scrolled): Image position, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/newsletter-banner/newsletter-banner-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=f0bc52f3b6f5e99f1d3db2380d7fa85b)

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: the colors of the card, its text and the form.
* **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large.
* **Page width**: Narrow, Fluid (default) or Full.

## Blocks

### Heading and text

Add **Heading** and **Text** blocks to introduce the sign-up. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

### Newsletter

The **Newsletter** block is the sign-up form: an email field and a submit button. It has no settings.

When a shopper signs up, Shopify adds them to **Customers** in your admin as a subscriber to email marketing, tagged **newsletter**. The form then shows a thank-you message. If Shopify can't accept the email address, the form shows the reason under the field.

## Best practices

* **Say what shoppers get.** A concrete offer, such as early access or 10% off the first order, earns more sign-ups than "Join our newsletter".
* **Check contrast with Background.** Pick a calm picture and a color scheme whose text color stands out from it.
* **Send the welcome email.** Set up a welcome email in Shopify Email or your email app, especially when the banner promises a discount.

## Related guides

> [card] [Promotional pop-up](https://docs.shopify.lightsout.agency/themes/facet/sections/promo-popup.md)
>
> Ask for sign-ups in a pop-up instead.

> [card] [Footer](https://docs.shopify.lightsout.agency/themes/facet/footer/footer.md)
>
> Add a sign-up form to the bottom of every page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.