Newsletter (compact)

The Newsletter (Compact) section promotes your email newsletter with a minimal on-page signup form. Customize this section with a flexible layout, multiple style blocks, social media icons, and an optional image.

See the Newsletter section for a more prominent sign-up form with further design elements. The Popup and Footer sections can also include a newsletter signup block.

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

2. Under Template, click (+) Add section and select Newsletter.

3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add headings

Add a section title and promotional text to your Newsletter section. The section headings are included as blocks nested within the section.

Steps

In the theme editor (Customize):

1. Click the Heading block to change the text ("Subscribe to our newsletter") for the section title.

   We recommended a short title of just a few words.

   Set the Heading size to Small, Medium, or Large.

2. Click the Subheading block to add a few sentences below the heading.

   We recommend two or three short sentences that tells customers what they can expect if they sign up.

   Set the Text size to Small, Medium, or Large.

3. (Optional.) Add a Accent block and enter text to display a small heading in all capitals above the main heading.

   We recommend a short one or two word label.

4. Click Save.

Style blocks

3. (Optional.) Use the drag and drop handles ⋮⋮ to change the order of the blocks.

   

   Click Remove block or the eye icon to delete or hide a block.

Section style

Customize the look of your section by changing the style and layout.

In your theme editor (Customize):

1. Click on the Newsletter section to open the settings.

2. Select a Spacing mode to change the distance between the headings and sign-up from. From smallest to largest: Compact, Space evenly, or Space between.

3. Select a Text alignment for the headings.

4. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

   Learn more about Section animations in Stiletto.

5. Choose to display a Top divider that separates sections with a Solid line.

   The Top divider uses the color of Lines and borders set in the Theme settings.

6. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

7. Set the Content width of the section to Full width or use the slider to use a custom width between 400 - 1000 pixels.

8. Click Save.