Newsletter

What this section does

Email newsletter signup

Where it goes

• Can be used as many times as you like on one page.
• This section comes with the Newsletter plugin.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Centered

  Freecentered

  Centered layout

  Specific to this style: title, subtitle, showIcon, leadIcon, iconColor, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor

• Dark

  Freedark

  Dark background variant

  Specific to this style: title, subtitle, showIcon, leadIcon, iconColor, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor

• Split

  Page Editorsplit

  Content left, form right

  Specific to this style: title, subtitle, showIcon, leadIcon, iconColor, eyebrowText, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor

• Inline

  Page Editorinline

  Compact horizontal form layout

  Specific to this style: title, subtitle, showIcon, leadIcon, iconColor, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor

• Bold

  Page Editorbold

  Full-width centered section with a very large uppercase title — inspired by high-fashion newsletter CTAs. Email input inline below.

  Specific to this style: title, subtitle, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, dividerColor, textColor

• Split Hero

  Page Editorsplit-hero

  Lead-capture: copy + signup form on one side, a large image on the other

  Specific to this style: title, subtitle, showIcon, leadIcon, iconColor, eyebrowText, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, imageUrl

• Perks Card

  Page Editorcard-perks

  An elevated rounded card with a centered heading, pill-shaped inline form and a row of three benefit items

  Specific to this style: cardBg, cardBorderColor, title, subtitle, showIcon, leadIcon, iconColor, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, perks, perkIconColor, perkIconBg

• Split Perks

  Page Editorsplit-perks

  Two-column signup: heading, subtitle and inline email form on the left, a stacked list of perk rows on the right

  Specific to this style: cardBg, cardBorderColor, title, subtitle, showIcon, leadIcon, iconColor, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, perks, perkIconColor, perkIconBg

• Boxed Aside

  Page Editorboxed-aside

  A bordered box with an eyebrow and heading on the left and the email form stacked on the right

  Specific to this style: cardBg, cardBorderColor, title, subtitle, showIcon, leadIcon, iconColor, eyebrowText, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor

• Organic Band

  Page Editororganic-band

  A colored band with organic wave edges holding a centered heading, a pill signup form and an optional organically-clipped image

  Specific to this style: title, subtitle, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, bandColor, waveTop, waveBottom, showImage, imageUrl, imageAlt, clipStyle

• Joy Band

  Page Editorjoy-band

  An inset rounded band with a coral→orange gradient holding a centered headline, description, a pill email form and fine print

  Specific to this style: title, subtitle, eyebrowText, placeholder, buttonText, buttonIcon, privacyText, inputBg, inputTextColor, inputBorderColor, gradFrom, gradTo

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height