Newsletter
Section
Last updated
Section
Last updated
Add the Newsletter section to display an email sign-up form with an optional banner image.
Newsletter subscribers are added to your "accepts marketing" Customers list. You can learn more about managing customer emails in Shopify's guides for Email subscriber lists ↗ and Email marketing ↗.
In the editor side panel, click (+) Add section and select Newsletter. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
Add and customize the background image for your email signup section.
Click Newsletter section to find settings
| Setting | Description |
|---|---|
Image | Select or upload an image to display as the background of the banner. |
The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.
Choose a Color scheme for the overlay and overlay text
Change the Opacity to make the overlay more or less transparent
Click Newsletter section to find settings
| Setting | Description | Options |
|---|---|---|
Overlay opacity | Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. | 0-100 Default: 40 |
Click Newsletter section to find settings
| Setting | Description | Options |
|---|---|---|
Banner height | Change the maximum height of the banner. The Adapt to image option sets the banner height to the full height of your image, which avoids cropping. | Adapt to image Default Custom |
Custom desktop height | For desktop, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height). | Fixed height 250 - 750px Relative height 50 - 100% Default: 450px |
Custom mobile height | For mobile, set the Custom banner height to a fixed height (in pixels) or relative height (as a percentage of the screen height). | Fixed height 150 - 750px Relative height 50 - 100% Default: 450px |
Add animation effects to your image banner.
Click Newsletter section to find settings
| Setting | Description | Options |
|---|---|---|
Image banner transition | Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations. | None Fade Iris wipe |
Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.
Click Newsletter section to find settings
| Setting | Description | Options |
|---|---|---|
Text alignment | Set the position of the text content for desktop screens. | Top left Top center Top right Middle left Middle center Default Middle right Bottom left Bottom center Bottom right |
