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.

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

---

How to add

1

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.

2

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.

3

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.

4

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.

5

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.

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.

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

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.

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.

Related

• Contact Form — when you need a reply, not a subscriber