# Email signup

{% hint style="success" %}
**Tip:** This section can be edited by blocks: "[<mark style="color:blue;">Heading</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/email-signup/heading)", "[<mark style="color:blue;">Subheading</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/email-signup/subheading)", and "[<mark style="color:blue;">Email form</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/email-signup/email-form)". Each block can be added individually and customized in different ways.
{% endhint %}

### Section layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the **"Layout"** drop-down.

Use the **"Mobile alignment"** settings to change the alignment of the heading and description to "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the **"Dividing line"** drop-down. It will be hidden once you use the "None" option.

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

The provided setting is applied to the "[<mark style="color:blue;">Header - transparent</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/advanced-settings)" feature.

Enable the **"Invert header colors"** to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "[Background](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[Base](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/colors#base)" item.

In the following examples, you can view how the section might display on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FNvkEEaVv8DO0WCtb9rWl%2Femail%20signup_desktop.png?alt=media&#x26;token=4167c577-4732-4803-bc60-b097f44f6115" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F2K3QwbQ1Xf1HkQskbUr6%2Femail%20signup_mobile.png?alt=media&#x26;token=bbcf200e-6d80-466f-a134-16c37392a0b3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}