# Email signup

<figure><img src="/files/zIUtC2nLWdKjX0FsUCW4" alt=""><figcaption></figcaption></figure>

## There are 2 ways to add a Section to your store

### **1. Add a pre-made section from our demo?**

[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)

### **2. Add the** Email signup **section** manuall&#x79;**?**

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose **"Email signup".**

<figure><img src="/files/IUpZHAguVZkBSZLWtXYD" alt=""><figcaption></figcaption></figure>

## Section Settings <a href="#section-settings" id="section-settings"></a>

### Layout setting <a href="#section-settings" id="section-settings"></a>

| Setting             | Meaning                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------------------ |
| Direction           | Set content layout direction for <mark style="color:$primary;">Desktop</mark>: vertical or horizontal. |
| Direction on mobile | Set content layout direction for <mark style="color:$primary;">Mobile:</mark> vertical or horizontal.  |
| Alignment           | Align content to the left, center, or right.                                                           |
| Position            | Set position of content                                                                                |
| Gap                 | Adjust the spacing between elements from <mark style="color:orange;">0 -> 100px</mark>                 |

### Size <a href="#section-settings" id="section-settings"></a>

| Setting | Meaning             |
| ------- | ------------------- |
| Width   | Width of email box  |
| Height  | Height of email box |

### Appearance <a href="#section-settings" id="section-settings"></a>

| Setting                                                                    | Meaning                                                            |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| 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 <a href="#section-settings" id="section-settings"></a>

| Setting | Meaning                                          |
| ------- | ------------------------------------------------ |
| 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

| Settings               | Meaning                                                                                                                  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| 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 <mark style="color:$primary;">Desktop</mark>: 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 <mark style="color:$primary;">Tablet</mark>: fit content, fill container, or use custom size.  |
| Mobile width           | Set the element width for <mark style="color:$primary;">Mobile</mark>: 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

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Text</td><td>Enter text to showSpecial </td></tr><tr><td>Typing text</td><td>Toggle to enable or disable special text style.</td></tr><tr><td>Highlight</td><td>Toggle to enable or disable text highlight.</td></tr><tr><td>Spacing text</td><td>Toggle to enable or disable text spacing adjustment.</td></tr><tr><td>Stroke</td><td>Add or adjust the outline (stroke) of the text.</td></tr><tr><td>Width</td><td>Set the element width for <mark style="color:$primary;">Desktop</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Inherit text alignment</td><td>Toggle to inherit text alignment from the parent section.</td></tr><tr><td>Tablet width</td><td>Set the element width for <mark style="color:$primary;">Tablet</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Mobile width</td><td>Set the element width for <mark style="color:$primary;">Mobile</mark>: fit content, fill container, or use custom size.</td></tr><tr><td>Preset ( Typography)</td><td>Select a predefined typography style for text.</td></tr><tr><td>Background</td><td>Toggle to enable or disable background for the title.</td></tr><tr><td>Enable border</td><td>Toggle to enable or disable the border.</td></tr><tr><td>Enable bottom border</td><td>Toggle to Enable bottom border</td></tr><tr><td>Effects</td><td>Choose an animation effect for the element.</td></tr><tr><td>Top</td><td>Adjust the spacing above the heading.</td></tr><tr><td>Bottom</td><td>Adjust the spacing below the heading.</td></tr><tr><td>Left</td><td>Adjust the spacing to the left of the heading.</td></tr><tr><td>Right</td><td>Adjust the spacing to the right of the heading.</td></tr></tbody></table>

### \[Block] Email signup

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show subscription form on promotion click</td><td>Toggle to show the subscription form when a visitor clicks a promotion</td></tr><tr><td>Width</td><td>Adjust the width of the element for Desktop: Fill or cusom</td></tr><tr><td>Tablet width</td><td>Adjust the width of the element for Tablet: Fill or cusom</td></tr><tr><td>Mobile width</td><td>Adjust the width of the element for Mobile: Fill or cusomt</td></tr><tr><td>Inherit color scheme</td><td><p></p><ul><li>When <strong>enabled</strong>, the element follows the color scheme </li><li> When <strong>disabled</strong>, you can apply a custom color scheme for this element.</li></ul></td></tr><tr><td>Background</td><td><p></p><p>When <strong>“Inherit color scheme”</strong> is <strong>disabled</strong>, you can choose a solid background color</p></td></tr><tr><td>Background gradient</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled, you can a</strong>pply a gradient color background.</td></tr><tr><td>Headings</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can set a custom color for headings.</td></tr><tr><td>Text</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can set a custom color for regular text.</td></tr><tr><td>Links</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can define a color for links</td></tr><tr><td>Hover links</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can define how links or elements change color on hover.</td></tr><tr><td>Borders</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled,</strong> you can customize the border color.</td></tr><tr><td>Shadow</td><td>When <strong>“Inherit color scheme”</strong> is <strong>disabled, you can choose the color for shadow</strong></td></tr><tr><td>Borders</td><td>Choose how the border is displayed for this element.</td></tr><tr><td>Label</td><td>Text displayed on the input field.</td></tr><tr><td>Border</td><td>Choose to show borders on all sides, underline only, or none.</td></tr><tr><td>Border thickness</td><td>Adjust the thickness of the border from <mark style="color:orange;">0 -> 4 px</mark></td></tr><tr><td>Corner radius</td><td>Adjust the roundness of the corners from <mark style="color:orange;">0 -> 100px</mark></td></tr><tr><td>Alignment</td><td>Set the horizontal alignment of the content.</td></tr><tr><td>Text preset</td><td>Choose a predefined text style for consistent typography.</td></tr><tr><td>Enable conditions</td><td>Enable or disable display conditions for this section.<br><br><em>"Agree to terms and conditions newsletter (GDPR compliant)"</em></td></tr><tr><td>Condition text</td><td>Entert text to show</td></tr><tr><td>Top</td><td>Padding top</td></tr><tr><td>Bottom</td><td>Padding bottom</td></tr><tr><td>Show description</td><td>Toggle to show or hide the description text.</td></tr><tr><td>Style</td><td>Select the visual style for the submit button.</td></tr><tr><td>Display</td><td>Choose to display text or icon</td></tr><tr><td>Label</td><td>Enter the text for label</td></tr><tr><td>Text preset</td><td>Select a predefined text style for the label.</td></tr><tr><td>Integrated button</td><td>Toggle to enable or disable the integrated button.</td></tr><tr><td>Gap</td><td>Adjust the space between elements when the integrated button is disabled.</td></tr><tr><td>Desktop width</td><td>Set the input width on desktop when the integrated button is disabled.</td></tr><tr><td>Mobile width</td><td>Set the input width on mobile when the integrated button is disabled.</td></tr><tr><td>Width</td><td>Define the input field’s width when the integrated button is disabled.</td></tr><tr><td>Top</td><td>Adjust the space above the element</td></tr><tr><td>Bottom</td><td>Adjust the space below the element</td></tr><tr><td>Left</td><td>Adjust the space on the left side of the element</td></tr><tr><td>Right</td><td>Adjust the space on the right side of the element</td></tr></tbody></table>

### \[BLOCK] Group <a href="#section-settings" id="section-settings"></a>

<table><thead><tr><th width="252">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Link</td><td>Enter the link of the group</td></tr><tr><td>Open link in new tab</td><td>Enable/disable open link in new tab</td></tr><tr><td>Direction</td><td>Choose how elements are arranged — vertically or horizontally.</td></tr><tr><td>Direction on mobile</td><td>Choose how elements are arranged for Mobile— vertically or horizontally.</td></tr><tr><td>Alignment</td><td>Set the horizontal alignment of elements — left, center, or right.</td></tr><tr><td>Position</td><td>Set position of content</td></tr><tr><td><p></p><p>Mobile alignment</p><p></p></td><td>Set the horizontal alignment of elements  for Mobile— left, center, or right.</td></tr><tr><td>Position mobile</td><td>Set position of content for Mobile</td></tr><tr><td>Gap</td><td>Adjust the spacing between elements.</td></tr><tr><td>Width</td><td>Set the element’s width for Desktop</td></tr><tr><td>Tablet width</td><td>Set the element’s width for Tablet</td></tr><tr><td>Mobile width</td><td>Set the element’s width for Mobile</td></tr><tr><td>Height</td><td>Set the height of the element.</td></tr><tr><td>Inherit color scheme</td><td>Toggle to inherit the parent section’s color scheme.</td></tr><tr><td>Background media</td><td>Choose an image or video to display as the section’s background.</td></tr><tr><td>Borders</td><td>Choose the border style for the element.</td></tr><tr><td>Corner radius</td><td>Adjust the roundness of the element’s corners.</td></tr><tr><td>Background overlay</td><td>Toggle to enable or disable the background overlay.</td></tr><tr><td>Enable parallax scroll</td><td>Toggle to enable or disable parallax scroll animation.</td></tr><tr><td>Shadow</td><td>Choose a color for the element’s shadow.</td></tr><tr><td>Horizontal offset</td><td>Adjust the horizontal position of the shadow</td></tr><tr><td>Vertical offset</td><td>Adjust the vertical position of the shadow</td></tr><tr><td>Blur</td><td>Adjust the blur intensity of shadow</td></tr><tr><td>Spread</td><td>Adjust the spread size of shadow </td></tr><tr><td>Top</td><td>Adjust the space above the element.</td></tr><tr><td>Top margin mobile</td><td>Adjust the space above the element for Mobile</td></tr><tr><td>Bottom</td><td>Adjust the space below the element.</td></tr><tr><td>Bottom margin mobile</td><td>Adjust the space below the element for Mobile</td></tr><tr><td></td><td>Adjust the space to the left of the element.</td></tr><tr><td>Left margin mobile</td><td>Adjust the left margin specifically for mobile devices.</td></tr><tr><td>Right</td><td>Adjust the space to the right of the element.</td></tr><tr><td>Top margin mobile</td><td>Adjust the space to the right of the element for mobile</td></tr><tr><td>Top</td><td>Adjust the space inside the element at the top.</td></tr><tr><td>Bottom</td><td>Adjust the space inside the element at the bottom.</td></tr><tr><td>Left</td><td>Adjust the space inside the element on the left.</td></tr><tr><td>Right</td><td>Adjust the space inside the element on the right.</td></tr></tbody></table>

### &#x20;Need More Help? <a href="#section-settings" id="section-settings"></a>

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our [Ticket System](https://halosoft.ticksy.com/) — 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.

<div align="left"><figure><img src="/files/u3Ke6fbPZZvBlBetfneg" alt="Halothemes Community" width="233"><figcaption></figcaption></figure></div>

<a href="https://www.facebook.com/groups/halothemescommunity" class="button primary" data-icon="comment-dots">Join HaloThemes Community</a>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/email-signup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.