Email signup
The Email Signup section helps you collect customer emails to grow your mailing list and stay connected with your audience. It’s perfect for sharing promotions, news, and updates from your store.
There are 2 ways to add a Section to your store
1. Add a pre-made section from our demo?
2. Add the Email signup section manually?
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Email signup".
Section Settings
Layout setting
Direction
Set content layout direction for Desktop: vertical or horizontal.
Direction on mobile
Set content layout direction for Mobile: vertical or horizontal.
Alignment
Align content to the left, center, or right.
Position
Set position of content
Gap
Adjust the spacing between elements from 0 -> 100px
Size
Width
Width of email box
Height
Height of email box
Appearance
Color scheme
Choose the color style applied to this section.
Background media
Choose None/ Image/ Video
Image ( If you choose option "Image" on Background media setting)
Select image for Background media
Video ( If you choose option "Video" on Background media setting)
Select a video for Background media
Image position ( If you choose option "Image" on Background media setting)
Set how the image is displayed: cover or fit within the container.
Video position ( If you choose option "Video" on Background media setting)
Set how the video fits in the container: cover or contain.
Borders
Choose the border style for the element: none or solid.
Corner radius
Adjust the roundness of element corners (0–100px).
Background overlay
Toggle to enable or disable the background overlay.
Padding
Top
Adjust the spacing at the top of the section.
Bottom
Adjust the spacing at the bottom of the section.
Left
Adjust the spacing at the left of the section.
Right
Adjust the spacing at the right of the section.
Block Settings
[BLOCK] Heading
Text
Enter text to show
Special text
Toggle to enable or disable special text style.
Highlight
Toggle to enable or disable text highlight.
Spacing text
Toggle to enable or disable text spacing adjustment.
Stroke
Add or adjust the outline (stroke) of the text.
Width
Set the element width for Desktop: fit content, fill container, or use custom size.
Inherit text alignment
Toggle to inherit text alignment from the parent section.
Tablet width
Set the element width for Tablet: fit content, fill container, or use custom size.
Mobile width
Set the element width for Mobile: fit content, fill container, or use custom size.
Preset ( Typography)
Select a predefined typography style for text.
Background
Toggle to enable or disable background for the title.
Enable border
Toggle to enable or disable the border.
Enable bottom border
Toggle to Enable bottom border
Effects
Choose an animation effect for the element.
Top
Adjust the spacing above the heading.
Bottom
Adjust the spacing below the heading.
Left
Adjust the spacing to the left of the heading.
Right
Adjust the spacing to the right of the heading.
[Block] Text
Text
Enter text to showSpecial
Typing text
Toggle to enable or disable special text style.
Highlight
Toggle to enable or disable text highlight.
Spacing text
Toggle to enable or disable text spacing adjustment.
Stroke
Add or adjust the outline (stroke) of the text.
Width
Set the element width for Desktop: fit content, fill container, or use custom size.
Inherit text alignment
Toggle to inherit text alignment from the parent section.
Tablet width
Set the element width for Tablet: fit content, fill container, or use custom size.
Mobile width
Set the element width for Mobile: fit content, fill container, or use custom size.
Preset ( Typography)
Select a predefined typography style for text.
Background
Toggle to enable or disable background for the title.
Enable border
Toggle to enable or disable the border.
Enable bottom border
Toggle to Enable bottom border
Effects
Choose an animation effect for the element.
Top
Adjust the spacing above the heading.
Bottom
Adjust the spacing below the heading.
Left
Adjust the spacing to the left of the heading.
Right
Adjust the spacing to the right of the heading.
[Block] Email signup
Show subscription form on promotion click
Toggle to show the subscription form when a visitor clicks a promotion
Width
Adjust the width of the element for Desktop: Fill or cusom
Tablet width
Adjust the width of the element for Tablet: Fill or cusom
Mobile width
Adjust the width of the element for Mobile: Fill or cusomt
Inherit color scheme
When enabled, the element follows the color scheme
When disabled, you can apply a custom color scheme for this element.
Background
When “Inherit color scheme” is disabled, you can choose a solid background color
Background gradient
When “Inherit color scheme” is disabled, you can apply a gradient color background.
Headings
When “Inherit color scheme” is disabled, you can set a custom color for headings.
Text
When “Inherit color scheme” is disabled, you can set a custom color for regular text.
Links
When “Inherit color scheme” is disabled, you can define a color for links
Hover links
When “Inherit color scheme” is disabled, you can define how links or elements change color on hover.
Borders
When “Inherit color scheme” is disabled, you can customize the border color.
Shadow
When “Inherit color scheme” is disabled, you can choose the color for shadow
Borders
Choose how the border is displayed for this element.
Label
Text displayed on the input field.
Border
Choose to show borders on all sides, underline only, or none.
Border thickness
Adjust the thickness of the border from 0 -> 4 px
Corner radius
Adjust the roundness of the corners from 0 -> 100px
Alignment
Set the horizontal alignment of the content.
Text preset
Choose a predefined text style for consistent typography.
Enable conditions
Enable or disable display conditions for this section. "Agree to terms and conditions newsletter (GDPR compliant)"
Condition text
Entert text to show
Top
Padding top
Bottom
Padding bottom
Show description
Toggle to show or hide the description text.
Style
Select the visual style for the submit button.
Display
Choose to display text or icon
Label
Enter the text for label
Text preset
Select a predefined text style for the label.
Integrated button
Toggle to enable or disable the integrated button.
Gap
Adjust the space between elements when the integrated button is disabled.
Desktop width
Set the input width on desktop when the integrated button is disabled.
Mobile width
Set the input width on mobile when the integrated button is disabled.
Width
Define the input field’s width when the integrated button is disabled.
Top
Adjust the space above the element
Bottom
Adjust the space below the element
Left
Adjust the space on the left side of the element
Right
Adjust the space on the right side of the element
[BLOCK] Group
Link
Enter the link of the group
Open link in new tab
Enable/disable open link in new tab
Direction
Choose how elements are arranged — vertically or horizontally.
Direction on mobile
Choose how elements are arranged for Mobile— vertically or horizontally.
Alignment
Set the horizontal alignment of elements — left, center, or right.
Position
Set position of content
Mobile alignment
Set the horizontal alignment of elements for Mobile— left, center, or right.
Position mobile
Set position of content for Mobile
Gap
Adjust the spacing between elements.
Width
Set the element’s width for Desktop
Tablet width
Set the element’s width for Tablet
Mobile width
Set the element’s width for Mobile
Height
Set the height of the element.
Inherit color scheme
Toggle to inherit the parent section’s color scheme.
Background media
Choose an image or video to display as the section’s background.
Borders
Choose the border style for the element.
Corner radius
Adjust the roundness of the element’s corners.
Background overlay
Toggle to enable or disable the background overlay.
Enable parallax scroll
Toggle to enable or disable parallax scroll animation.
Shadow
Choose a color for the element’s shadow.
Horizontal offset
Adjust the horizontal position of the shadow
Vertical offset
Adjust the vertical position of the shadow
Blur
Adjust the blur intensity of shadow
Spread
Adjust the spread size of shadow
Top
Adjust the space above the element.
Top margin mobile
Adjust the space above the element for Mobile
Bottom
Adjust the space below the element.
Bottom margin mobile
Adjust the space below the element for Mobile
Adjust the space to the left of the element.
Left margin mobile
Adjust the left margin specifically for mobile devices.
Right
Adjust the space to the right of the element.
Top margin mobile
Adjust the space to the right of the element for mobile
Top
Adjust the space inside the element at the top.
Bottom
Adjust the space inside the element at the bottom.
Left
Adjust the space inside the element on the left.
Right
Adjust the space inside the element on the right.
Need More Help?
If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.
Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.
Last updated