Newsletter

The Newsletter section encourages visitors to subscribe to your email list, helping you build and maintain customer relationships through email marketing campaigns. The Newsletter section is built using two flexible blocks: Newsletter Media and Newsletter Form.

This structure allows you to combine visual content with a customizable signup form while maintaining full control over layout, colors, and actions.

How to Activate

1. Go to Theme Editor
   • Navigate to Online Store > Themes > Customize.
   • Click Add section and select Newsletter.

1. Customize Subscription Form
   • Add a heading and subheading to encourage sign-ups.
   • Customize placeholder text for the email input field.
   • Modify the button text to match your brand voice.
2. Configure Integration
   • If using an external email marketing tool (e.g., Klaviyo or Mailchimp), ensure it's properly integrated with your Shopify store.
3. Adjust Design Settings
   • Modify background color, text color, and alignment.
4. Save Your Changes
   • Click Save to activate the section.

Best Practices

• Keep messaging clear and compelling to encourage sign-ups.
• Offer incentives (e.g., discounts, exclusive updates) to increase subscriptions.
• Ensure GDPR compliance by adding a privacy disclaimer.

Section settings

Color scheme

Applies a color scheme to the entire newsletter section.

All default text, background, and UI colors inherit from the selected scheme unless overridden at block level.

Top padding

Controls the spacing above the newsletter section.

Bottom padding

Controls the spacing below the newsletter section.

Blocks

The Newsletter section supports multiple blocks to build the layout.

Newsletter Media

The Newsletter Media block displays visual content alongside the signup form.

Media

Image

Selects the image displayed in the media area.

Background type

Defines how the background is rendered:

• Background image
• Background color

Background color

Sets a solid background color when Background color is selected.

Tint color

Applies a color overlay on top of the background image.

Tint opacity

Controls the opacity of the tint overlay.

Content

Heading

Primary heading displayed on the media area.

Heading size

Controls the heading font size.

Text

Supporting text displayed below the heading.

Text size

Controls the size of the supporting text.

Content position

Sets the vertical alignment of the content:

• Top
• Middle
• Bottom

Content alignment

Aligns the content horizontally:

• Left
• Center
• Right

Design

Color scheme

Applies a color scheme specifically to the media block.

Image effect

Applies a visual effect to the image:

• None
• (Additional effects if enabled in the theme)

Newsletter Form

The Newsletter Form block contains the signup form and related content.

Content

Form heading

Small heading displayed above the form title.

Form title

Main title displayed above the form fields.

Form text

Supporting text displayed below the title.

Colors

Form text color

Controls the color of the form text.

Disable custom text color (use theme default)

Ignores custom text color and uses the selected color scheme instead.

Button

Button background color

Sets the background color of the submit button.

Button hover color

Sets the hover background color of the button.

Button color

Controls the button text color.

Disable custom button colors (use theme default)

Uses button colors from the active color scheme.

Button link target

Defines how links open:

• Same window
• New window

Terms & privacy

Terms description text

Text displayed below the form (e.g. reCAPTCHA notice).

Terms link text

Label for the terms link.

Terms link URL

Destination URL for the terms link.

Custom CSS

Custom CSS

Allows adding custom styles that apply only to this Newsletter section.

Behavior

• Media and form blocks align automatically for desktop and mobile layouts
• Form and button colors can either follow the color scheme or be overridden per block
• Tint and background options allow strong contrast on image-based layouts
• Fully responsive and accessible form structure

Accessibility & performance

• Supports lazy-loaded images
• Maintains accessible contrast when using color schemes
• Uses native Shopify newsletter form behavior