> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/forms-1/newsletter.md).

# Newsletter

The **Newsletter** block is a single email box with a button, for collecting addresses you can market to later. It is added inside a section, which lets a signup sit at the end of a story, under a product row, or beside a picture instead of taking a whole section for itself. Because it asks for one thing only, it interrupts the page far less than a form with several fields, and shoppers finish it more often.

<figure><img src="/files/gnvAYF225eQpmPZ8REbO" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section that should carry the signup.
3. Click **Add block** and choose **Newsletter**.
4. Write the placeholder for the email box and the label for the button.
5. Set the width for desktop and mobile.
   {% endhint %}

*Result:* the email box and its button appear inside the section, with the wording you entered.

### General settings <a href="#general-settings" id="general-settings"></a>

| Setting                    | Description                                                                                                                                                                                           |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Email placeholder text** | <p>The greyed out prompt inside the email box before shoppers type, for example <em>Enter your email</em>.</p><p>It disappears as soon as they start typing, so it is a hint rather than a label.</p> |
| **Button label**           | The words on the button that submits the address. Wording that names the reward, such as "Get 10% off", works harder than a plain "Subscribe".                                                        |

### Size <a href="#size" id="size"></a>

| Setting                 | Applies To | Description                                                                                                                                                                                                                                                                         |
| ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width**               | Desktop    | <p>How wide the signup runs on a computer screen.</p><ul><li>Fit (Default, the box stays as wide as it needs)</li><li>Fill (the box spans the space it is given, which makes the signup the focus of that area)</li><li>Custom (you set the share of the width yourself).</li></ul> |
| **Custom Width**        | Desktop    | <p><em>Only visible when Width is Custom</em>.</p><p>The exact share of the available width the signup takes, from 0% to 100%.</p>                                                                                                                                                  |
| **Mobile Width**        | Mobile     | <p>The same choice on phones, where a wide box is easier to tap and type into.</p><ul><li>Fit</li><li>Fill (Default)</li><li>Custom.</li></ul>                                                                                                                                      |
| **Custom Mobile Width** | Mobile     | <p><em>Only visible when Mobile Width is Custom</em>.</p><p>The exact share of the phone screen the signup takes, from 0% to 100%.</p>                                                                                                                                              |

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the gap between the signup and the line of wording that offers the reason to join. Accepts 0px to 100px. |
| **Bottom** | Leaves space under the signup so the next block does not crowd the button. Accepts 0px to 100px.              |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers can join your list from wherever the block sits, without opening another page or a popup.
* Only an email address is asked for, so the step is short enough to complete on a phone in a few seconds.
* The wording on the button is what most shoppers read before deciding, so it carries more weight than the placeholder.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Contact form](/velare/customize-your-pages/forms-1/contact-form.md): the longer form for questions rather than signups
* [Text](/velare/customize-your-pages/basic/text.md): the line explaining what subscribers get
* [Forms](/velare/customize-your-pages/forms-1.md): the group this block belongs to


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/forms-1/newsletter.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.