Email signup

A band on the page that asks visitors for their email address, with a heading, a line of text, the form and small print.

A band that stays on the page and asks for an email address: a heading, a line about what visitors will get, a field with a button, and a line of small print. Signups go to your customer list in Shopify. Choose it for the end of your home page or a page about an upcoming drop.

For a form that appears over the page instead, see Collect emails with a popup.

Email signup on a computer
Email signup, centered on a dark color scheme.

Add it

It can go on any page except the password page, and in the footer. Choose "Add section" and look for Email signup under Forms.

As first added it is centered in a narrow column, with Space above and Space below at Medium, and holds:

  • the heading "Get notified of the next drop";
  • the line "Sign up to be the first to know when something new is on the way.";
  • a field reading "Enter your email" and a "Join" button;
  • the small print "By signing up, you agree to receive email marketing and accept our privacy policy.", with a link to your privacy policy.

Settings

Setting What it changes Options
Color scheme The band's background, text, field and button colors. See shared settings. Any of your schemes. Default: Scheme 1.
Content alignment Where the column sits and how its lines line up. Left starts at the page margin, like the sections around it. Left, Center (default), Right
Content width How wide the column is: about 450, 670 or 900 px, or the whole page. Narrow (default), Medium, Wide, Page width
Space above, Space below See shared settings. Custom goes from 0 to 160 px. As added: Medium.

Blocks

You can remove, hide, reorder and add blocks. Besides the four below, the section takes the blocks used across Plain Jane (Button, Image, Social links and others) and app blocks.

Heading, Description and Small print

The words above and below the form. Each has the same settings as the Text block used across Plain Jane: the words, Width, Line length, Alignment, Style, Color, Background, spacing and an animation. As added, Heading uses Heading 3, Description uses Body and Small print uses Small note.

Email signup

The field and its button.

Group Setting What it changes Options
Input Placeholder The faint words in the empty field. Default: "Enter your email".
Input Label for screen readers Not shown. Screen readers say it when a visitor reaches the field. Default: "Email".
Input Border The line around the field. All sides (default), Underline, None
Input Border width How thick that line is. Hidden when Border is None. Thin (default), Thick
Input Field corners How round the field is. Hidden when Border is Underline. None, Slight (default), Round
Submit button Style Words or an arrow on the button. Text label (default), Arrow icon
Submit button Button label The words on the button. Appears when Style is Text label. Default: "Join".
Submit button Button inside the field Puts the button inside the field's border instead of next to it. Hidden when Border is Underline. Off (default)
Submit button Success message The line shown after someone signs up. Empty, it reads "Thank you for subscribing!". Text.
Size Width Full width stretches the field across the column. Compact keeps it as wide as the field and button need, placed by Content alignment. Compact, Full width (default)
Padding Top, Bottom Extra space above and below the form. None (default), Small, Medium, Large

The button takes its colors from the color scheme and its corners and lettering from your primary button in Theme settings.

On phones

The column fills the screen inside the page margin, whichever Content width you choose. The field and button stay side by side; the field gets narrower so the button always fits.

Tips

  • Say what people get in the Description, such as early access or a discount code. Then put the same promise in Success message.
  • Keep the small print and its privacy link. Many countries require visitors to know what they are agreeing to.
  • Use Button inside the field with Round corners for a compact, single-pill form.
  • Give the band a different color scheme from the sections around it, so it reads as its own thing.

Good to know

  • Signups land in your Customers list in Shopify admin, tagged newsletter. See where signups go.
  • After signing up, the page reloads and shows the thank-you line under the field. A wrong address shows an error there instead.
  • If Shopify suspects a bot, it may ask the visitor to complete a quick check first.