> 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/newsletter.md). # Newsletter **Newsletter** is an email signup that sits in the flow of the page: a heading, a line explaining what subscribers get, an email field, and a submit button. It gives the visitors who are not ready to buy today a way to stay in touch, which is what turns a one off visit into a returning customer. Shoppers usually meet it low on the homepage or a landing page, after the products have made their case, and addresses submitted here land in your Shopify admin. Unlike the popup version, this form never interrupts anyone. It only works for shoppers who scroll far enough to see it, so the wording has to earn the address on its own.

### Where to find it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. Open the template where the signup should appear, for example the homepage. 3. Click **Add section** and choose **Newsletter** from the **Forms** group. 4. Write the heading and the description, saying plainly what subscribers receive. 5. Set the placeholder and the button label, then drag the section into position. {% endhint %} *Result:* the form renders in place, and each submission creates or updates a customer record in your Shopify admin. ### Section settings #### General setting

Setting	Description
Section width	How far the form spreads across the screen. Stretch width: the content runs close to both screen edges whatever the screen size. Fixed width: the content lines up with the page width set in Theme settings > Layout, so the form sits on the same grid as the rest of the page. Full width: the section fills the whole browser window and resizes with it, which suits a coloured signup band above the footer.
Color scheme	The background and text colours of the signup. Schemes are defined in Theme settings > Colors, and a scheme that contrasts with the page is what stops this form being scrolled past.

Setting

Description

Section width

How far the form spreads across the screen.

Stretch width: the content runs close to both screen edges whatever the screen size.
Fixed width: the content lines up with the page width set in Theme settings > Layout, so the form sits on the same grid as the rest of the page.
Full width: the section fills the whole browser window and resizes with it, which suits a coloured signup band above the footer.

Color scheme

The background and text colours of the signup. Schemes are defined in Theme settings > Colors, and a scheme that contrasts with the page is what stops this form being scrolled past.

#### Section header

Setting	Description
Heading	The line shoppers read first, and the one that has to give them a reason to hand over an address, for example `Get 10% off your first order`.
Description	A sentence under that line. Use it for the practical detail the heading has no room for: how often you send, and what the emails contain.
Heading size	How large that line is rendered. Heading 1: the biggest, for a signup that is the main purpose of the page. Heading 2: a middle size that suits most homepages. Heading 3: the smallest, for a quiet signup near the footer.
Alignment	Where the heading and description sit above the field. Left: lines up with the email field and reads naturally. Center: balanced over a full width band, the common choice. Right: rarely needed, use it to mirror a neighbouring section.

#### Newsletter setting

Setting	Description
Email placeholder	The greyed out text inside the email box before the shopper types, for example Enter your email. It tells them what the empty field is for at a glance.
Button label	The words on the submit button. Something that names the reward, such as `Get my code`, is answered more often than a bare `Subscribe`.

#### Section padding | Setting | Description | | ---------- | --------------------------------------------------------------------------------------------------- | | **Top** | Space added above the signup. Increase it when the heading sits too close to the section before it. | | **Bottom** | Space added below the signup. Increase it when the footer crowds the button. | #### Section divider | Setting | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | **Show divider** | Draws a thin horizontal line at the section edge, useful when the signup and its neighbour share a background colour and run into each other. | ### What changes on the storefront * Shoppers see a heading, a short explanation, an email field, and a submit button, all inline with the page rather than over it. * Each submission adds the address to your customer list in the Shopify admin, where your email tool can pick it up. * Placing this section on a page that also shows the newsletter popup asks the same visitor twice, so choose one or the other per page. * After a successful subscription, a confirmation popup appears with the configured success message and call-to-action button. The shopper can close the popup using the close icon or continue by clicking the button. ### Related pages * [Forms](/velare/customize-your-pages/forms.md): the group this section belongs to * [Newsletter block](/velare/customize-your-pages/forms-1/newsletter.md): the block version, for a signup placed inside another section * [Newsletter popup](/velare/customize-your-pages/overlay-group/newsletter-popup.md): the same signup presented as an overlay * [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets come from --- # 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/newsletter.md?ask=&goal= ``` `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.