Newsletter
Collect email subscriptions in an image-led or content-led section.
Newsletter adds a Shopify customer email signup to a storefront page. Use it when the value of subscribing can be explained clearly and the store is ready to manage consent and follow-up messages.
[!NOTE] The labels, options, defaults, conditional overlay behavior, and form states below match the current Strata section implementation. Use an approved synthetic test address for browser evidence; never capture customer or account data.
Add Newsletter
In Shopify's theme editor, add Newsletter to a compatible template or open an existing section. It is not available in the header or overlay groups.
Content
| Setting | What it controls | Default |
|---|---|---|
| Heading | Main subscription message. | Join our newsletter. |
| Text | Rich text explaining the value of subscribing. | Receive new arrivals, stories, and updates by email. |
| Subtext | Supporting consent or unsubscribe information. | You can unsubscribe at any time. |
| Button label | Submit button text. | Subscribe. |
| Success text | Message shown after Shopify accepts the subscription. | Thank you for subscribing. |
| Email placeholder | Placeholder shown in the email field. | Email. |
Write Subtext and Success text to match the store's actual consent, privacy, and email workflow. Do not promise a discount or delivery unless the store has configured it separately.
Style
| Setting | What it controls | Options or default |
|---|---|---|
| Image layout | Chooses where the image sits relative to the signup content. | Image beside content, Content beside image, or Background image. Default: Background image. |
| Full width | Removes the normal page-width constraint from the section shell. | Disabled by default. |
| Image | Main image source. | No default. |
| Mobile image | Optional mobile-specific source. | Uses Image when blank. |
| Content alignment | Aligns heading, copy, and form. | Left, Center, or Right. Default: Left. |
| Content width | Limits the content column. | Small, Medium, or Large. Default: Medium. |
| Enable color overlay | Adds a color overlay when a background image is used. | Enabled by default. |
| Overlay opacity | Sets the overlay opacity. | 0–50%, step 1%. Default: 50%. |
| Overlay color | Sets the overlay color. | The global brand color. |
| Text color | Controls the heading and body text. | The global brand color. |
| Form color | Controls the input, placeholder, underline, button, and form messages. | The global brand color. |
Enable color overlay is rendered over the image only for Background image layout. For the two beside-content layouts, check the selected text and form colors directly against the surface.
Motion and controls
| Setting | What it controls | Default or dependency |
|---|---|---|
| Enable parallax for this section | Opts the background or supporting image into scroll parallax when permitted globally. | Enabled by default. Requires global Enable parallax effects; reduced-motion preferences turn it off. |
The email form is independent of parallax. The image must not carry the only explanation of what subscribing does.
Spacing
| Setting | What it controls | Options or default |
|---|---|---|
| Section spacing | Chooses the section's spacing scale. | None, Small, Medium, or Large. Default: Large. |
| Top spacing | Adds or removes the section's top spacing. | Enabled by default. |
| Bottom spacing | Adds or removes the section's bottom spacing. | Enabled by default. |
Form validation and states
The section submits a Shopify customer form and tags the submission as a newsletter signup. The email field is required and uses the browser's email validation. Shopify error output is shown when the submission fails; Success text is shown after a successful subscription.
Test an empty value, an invalid email, and an approved synthetic address. Confirm the message is readable, the field retains useful focus, and the success/error state does not obscure the surrounding content. The section does not define consent wording beyond the text you enter, so review the store's privacy and email-provider requirements separately.
Desktop and mobile behavior
The selected image layout, content width, and optional mobile image affect the composition. Preview the background crop or side-by-side image at desktop and mobile sizes, especially when the image contains text or a focal subject. Exact stacking and heights must be taken from an accepted current build, not inferred from the schema.
Accessibility and media
- Keep the subscription benefit and consent expectation in text, not only in the image.
- Check text and form contrast after changing Overlay color, Overlay opacity, Text color, or Form color.
- Use a meaningful alt text source for side-by-side images; a background image is decorative to assistive technology in the current implementation.
- Test keyboard focus, browser autofill, invalid email messaging, and the success status.
- Verify reduced motion with parallax disabled and the form still fully usable.
Common issues
| Symptom | Safe check |
|---|---|
| The image is not visible | Confirm Image is uploaded and the selected Image layout expects a visible image. |
| The mobile crop is wrong | Upload Mobile image or adjust the source focal point; a blank mobile field reuses Image. |
| Overlay changes have no visible effect | Enable color overlay is meaningful for Background image layout; check the layout and image first. |
| Subscription does not submit | Use a valid email and check Shopify's customer-form error message. |
| Success message is misleading | Rewrite Success text to match the configured email workflow and privacy notice. |
| Form controls have poor contrast | Tune Form color separately from Text color, then check focus and error states. |
Related guides
Evidence boundary
No screenshot is attached. Capture approved desktop/mobile compositions plus empty, invalid, and success states with a synthetic address. Crop out account, customer, and email-provider context before adding any future image.