> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/call-to-action/newsletter.md).
# Newsletter
A full-bleed sign-up banner with background image, optional countdown timer and promo code — built to grow your email list.
Email is the one audience you own — no algorithm sits between you and the people who asked to hear from you. The **Newsletter** section is a full banner — background image, overlay, heading, copy and an email field — designed to be the moment on the page where a visitor becomes a subscriber. It also accepts a **Promo code** and a **Countdown timer** block, so one section can carry the whole offer: *10% off, code WELCOME10, ends in 04:12:33*.
{% hint style="info" %}
**At a glance**
| Where to find it | **Add section → Call to action** |
| ---------------- | -------------------------------------------------------------- |
| Key blocks | Newsletter form (one per section), Promo code, Countdown timer |
| Allowed on | Any template, and the footer |
| Typical use | Welcome offer, launch list, footer sign-up strip |
| {% endhint %} | |
***
### How to add
{% stepper %}
{% step %}
### Add the section
Click **Add section** and pick **Newsletter** from the **Call to action** group. The preset arrives with a **Heading**, a **Text** block and the **Newsletter form** block.
{% endstep %}
{% step %}
### Set the background
Upload an **Image** and choose a **Height** — *Pixels* is the default, at 600 px. Add a separate **Mobile image** if the desktop crop doesn't survive a narrow screen.
{% endstep %}
{% step %}
### Write the offer, not the request
Replace the heading with what the visitor gets. *Get 10% off your first order* outperforms *Subscribe to our newsletter* because it puts a price on the address.
{% endstep %}
{% step %}
### Set up the field
Open the **Newsletter form** block to set the **Label**, **Placeholder** and an optional **Caption** under the field — frequency and an unsubscribe promise belong there.
{% endstep %}
{% step %}
### Add the offer mechanics (optional)
Add a **Promo code** block with your code and a **Countdown timer** block set to the end of the campaign.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
**Subscribing creates a customer account.** This is Shopify behaviour, not a theme choice: every sign-up through this form creates a customer record in your admin with email marketing consent. That's what your email app syncs against — and it's why the subscriber list lives in **Customers**, not in a separate list of its own.
{% endhint %}
{% hint style="success" icon="lightbulb" %}
### Good to know
* **Only one form per section.** The **Newsletter form** block is limited to one. If you need two sign-up points on a page, add two Newsletter sections.
* **Section framing has no *****Grid***** option here.** Most Volume sections offer *Disable / Enable / Grid*; Newsletter offers only *Disable* and *Enable*, because the banner is a single media surface rather than a grid of items.
* **Overlap is what lets it sit under the header.** Set **Overlap** to *Enable* (or desktop/mobile only) and the section slides under the one above it. When Newsletter is the **first** section on a template, this is also what makes a transparent header possible — see [My header is transparent over the banner](/docs/volume-themes/faq/navigation-and-header/my-header-is-transparent-over-the-banner-how-do-i-make-it-solid.md) for the full recipe.
* **Background animation is a separate group.** **Animation mode** *Custom* unlocks **On scroll behavior**: *Parallax*, *Sticky*, *Zoom in* or *Zoom out*, with their own speed and zoom sliders. Mobile has its own toggle — animation on mobile stays off unless you enable it.
* **Mobile gets its own image and height.** Upload a **Mobile image** with its own height type, and use **Content under image** if you'd rather the copy sat below the picture than on top of it on small screens.
* **Sticky content is for tall banners.** **Enable sticky content** pins the text block while the background scrolls past; **Sticky offset** (24–200 px, default 120) controls how far from the top it sticks.
* **It can go in the footer.** Newsletter is allowed in the footer section group as well as any template — the usual home for a sign-up strip.
{% endhint %}
### Customization ideas
Welcome-offer banner
Heading *Get 10% off your first order*, the form, a **Promo code** block carrying the code, and a **Countdown timer** block set to the end of the campaign. One section, complete offer.
Quiet footer strip
Skip the image entirely, set **Height** to a small pixel value, pick a neutral colour scheme and turn **Center text** on. The section stops being a banner and becomes a slim sign-up bar.
Editorial split
Turn **Center text** off, set **Horizontal content position** to the left, and let a large lifestyle photo fill the right-hand side of the frame.
Parallax hero
**Animation mode** *Custom* → **On scroll behavior** *Parallax*, speed around 10. Subtle depth without a video's weight on your LCP.
Reuse it as a promo banner
Delete the form block and keep the heading, text, button and countdown. The same section is now a campaign banner rather than a sign-up.
***
### Settings reference
Section settings
**Media**
| Setting | What it does |
| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Overlap | *Disable*, *Enable*, *Enable only on desktop*, *Enable only on mobile*. Slides the section under the one above it. |
| Image | Desktop background image. |
| Height | *Adapt to first image*, *Pixels* or *Percents*. Defaults to *Pixels*. |
| Pixels height | 200–1600 px, default 600. Only with Height → Pixels. |
| Percents height | 30–100%, default 70. Only with Height → Percents. |
| Center text | Centres the content. On by default. |
| Vertical / Horizontal content position | Where the content block sits inside the banner. Both default to centre. |
| Content width | *Narrow*, *Regular* or *Wide*. |
| Fill content | Stretches the content block to the available width. |
| Show overlay / Overlay opacity / Overlay color type / Overlay color / Overlay gradient | Darkening layer over the image, from the colour scheme, a solid colour, or a gradient. Mobile has its own set. |
**Background animation**
| Setting | What it does |
| ----------------------------------- | ------------------------------------------------------------------------- |
| Animation mode | *Default*, *Disable* or *Custom*. *Custom* reveals the settings below. |
| On scroll behavior | *Parallax*, *Sticky*, *Zoom in*, *Zoom out*. |
| Parallax direction / Parallax speed | Direction, and speed from −20 to 20 (default 10). |
| Zoom | 105–150%, default 120. |
| Enable custom animation on mobile | Off by default — mobile has its own behaviour and speed settings once on. |
**Mobile**
| Setting | What it does |
| ------------------------------------ | ------------------------------------------------- |
| Mobile image | Separate image for small screens. |
| Mobile height / Mobile pixels height | 100–1000 px, default 200. |
| Content under image | Puts the copy below the image instead of over it. |
**Section layout**
| Setting | What it does |
| ------------------------------------- | ------------------------------------------------------------------------------------ |
| Make full-width | On by default. |
| Grid | *Page*, *Alternative*, *Secondary* or *Custom*. |
| Width | Only with **Grid → Custom**: 1040–2560 px. |
| Disable grid max-width | Ignores the grid's maximum width. |
| Show bottom line | Draws a divider under the section. |
| Section framing | *Disable* or *Enable* only — **no *****Grid***** option in this section**. |
| Enable sticky content / Sticky offset | Pins the content block while the background scrolls. Offset 24–200 px, default 120. |
**Color / Spacing**
| Setting | What it does |
| ------------------------------------------- | ------------------------------------------------------------------------------ |
| Color scheme | Scheme for the area around the banner. |
| Banner color scheme | Scheme for the content inside the banner. |
| Overlapped header color scheme / Logo style | How the header renders when it sits over this section. Mobile has its own set. |
| Top / Bottom | Vertical spacing multiplier, 0–2. |
| Paddings | Inner padding, 0–3. |
Block reference
**Newsletter form** — the sign-up field. **Limited to one per section.**
| Setting | What it does |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Label | Field label. Defaults to *Email*. |
| Placeholder | Placeholder text inside the field. |
| Caption / Text style | A line under the field — use it for "No spam, unsubscribe anytime". |
| Enable checkbox / Make it required / Text | A consent checkbox with its own rich-text label, pre-filled with a link to your privacy policy. Adding a checkbox does not by itself make your store GDPR compliant. |
| Top spacing | Spacing above the block, 0–5. |
**Promo code** — shows a code the visitor can copy.
**Countdown timer** — counts down to a date and time.
| Setting | What it does |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| End date / End time | Format `YYYY-MM-DD` and `HH:MM`, based on the store's primary timezone. Keep the date within a 99-day range. |
| When the expiration date and time pass | *Hide the timer*, *Show zeros*, *Show message*, or *Show zeros and message*. |
| Complete message | Shown after expiry, depending on the action above. |
| Enable animation | Animates the digits as they change. |
| Timer style / Labels style | Background colour (default `#e8e8e8`), corner radius 0–50 (default 2), outline colour (default `#dcdcdc`), text and label colours. |
**Content blocks** — Heading, Subheading, Text, Image, Button, Video button, Icon, Context image, Inline image reveal, Stacking images on hover, Line, Empty space, Custom Liquid.
### Best practices
* **Say what they get.** "Subscribe to our newsletter" converts worse than "10% off your first order" or "First access to new drops". Give the address a price.
* **One field.** Every extra field costs sign-ups. Name and birthday can be collected later in a welcome email.
* **Set expectations under the field.** Use the **Caption** for frequency and an unsubscribe promise — it measurably reduces hesitation.
* **Don't stack it against a popup.** If you also run a sign-up popup, a visitor who meets both in one visit is a visitor who dismisses both.
{% hint style="danger" %}
**Check your consent requirements.** In the EU and UK, marketing email generally needs explicit opt-in, which is what the **Enable checkbox** setting is for. Confirm what applies to your markets with someone qualified — the theme gives you the control, not the legal answer.
{% endhint %}
## Related
* [Contact Form](/docs/volume-themes/sections/call-to-action/contact-form.md) — when you need a reply, not a subscriber
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/call-to-action/newsletter.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
