# Newsletter Signup

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FmDno38AaR8tHTN6nyhPh%2Fs_forms_news.png?alt=media&#x26;token=72363041-fe15-4628-9c75-c146183cd81f" alt=""><figcaption></figcaption></figure>

It can be placed on any page (commonly the home page or footer) and supports a variety of layout, background, and color customization options.\
All subscribers collected through this form are automatically added to your Shopify “accepted marketing” customer list.

**Location:** `Sections -> Templates -> Forms -> Newsletter Signup`

***

Newsletter signup — Options Overview

| **Option**                                                                                 | **Description**                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**                                                                                | The main title for the section. Used to introduce the newsletter area, e.g., “Subscribe to Our Newsletter” or “Stay Updated.”                                                                                                                                                                        |
| **Subheading**                                                                             | A smaller, optional line of text displayed near the heading to provide context, such as “Get the latest updates and exclusive offers.”                                                                                                                                                               |
| **Heading**                                                                                | Field to enter or edit the main text heading. This defines the prominent text visible at the top of the newsletter signup section.                                                                                                                                                                   |
| **Description**                                                                            | Adds supporting text below the heading, explaining the benefits or purpose of signing up (e.g., “Be the first to know about new arrivals and discounts.”).                                                                                                                                           |
| **Heading alignment**                                                                      | Aligns the heading and description text horizontally within the section. Options: **Left**, **Center**. Use **Center** for balanced layout; **Left** for standard page alignment.                                                                                                                    |
| **Layout**                                                                                 | Defines structural settings of the section, such as spacing and width.                                                                                                                                                                                                                               |
| **Top spacing**                                                                            | Adjusts the space above the section to control vertical rhythm. Options: **None**, **Small**, **Medium**, **Normal**.                                                                                                                                                                                |
| **Home page top spacing**                                                                  | Adds an additional spacing control that applies **only when the section is used on the home page**, helping maintain consistent section spacing there.                                                                                                                                               |
| **Width**                                                                                  | Sets the section’s maximum width across the page. Options: • **Default** – follows the theme’s default layout width. • **Boxed** – adds padding on both sides for a contained look. • **Wide** – stretches the section to fill the available screen width (best for large monitors over **1440px**). |
| **Email Signup**                                                                           | This feature enables the actual newsletter subscription form. When active, it adds an email input field and a submit button.                                                                                                                                                                         |
| **Subscribers added automatically to your “accepted marketing” customer list. Learn more** | Shopify automatically tags new signups as **“accepted marketing”** under the customer list, ensuring compliance with marketing permissions and enabling merchants to send promotional emails directly.                                                                                               |
| **Show email signup**                                                                      | Toggles the visibility of the email signup form. When enabled, the input field and submit button appear under the section’s text.                                                                                                                                                                    |
| **Terms and conditions message**                                                           | Adds a small note under the signup form, often used for legal disclaimers or privacy consent messages (e.g., “By signing up, you agree to our privacy policy.”).                                                                                                                                     |
| **Social media icons**                                                                     | Displays a row of linked social media icons. You must connect your social accounts in **Theme settings → Social media** for them to appear.                                                                                                                                                          |
| **To display your social media accounts, link them in your theme settings.**               | Reminder note: Configure your social profiles globally under Theme Settings to activate the icons here.                                                                                                                                                                                              |
| **Show social media icons**                                                                | Toggles visibility of the social icon row under the newsletter form. When enabled, linked accounts (e.g., Instagram, Facebook, TikTok) are displayed automatically.                                                                                                                                  |
| **Dividing line**                                                                          | Adds a subtle divider line between this section and adjacent content for better visual separation.                                                                                                                                                                                                   |
| **Show**                                                                                   | Enables or hides the dividing line. When active, a thin line appears at the section boundary.                                                                                                                                                                                                        |
| **Background**                                                                             | Defines the background style of the section. You can use solid colors, gradients, or images to match your theme aesthetic.                                                                                                                                                                           |
| **Background: Hide / Color / Gradient / Image**                                            | Select how the section background appears: • **Hide** – transparent, inherits page background. • **Color** – uses a solid color fill. • **Gradient** – creates a smooth color transition. • **Image** – displays an uploaded image as the background.                                                |
| **Colors**                                                                                 | Control the overall color scheme for text, lines, and accent details within the section.                                                                                                                                                                                                             |
| **Base**                                                                                   | Sets the default text and background color palette for the section. Often defines readability and tone.                                                                                                                                                                                              |
| **Accent**                                                                                 | Defines secondary or highlight color accents, such as for buttons, icons, or hover effects.                                                                                                                                                                                                          |
| **Lines**                                                                                  | Adjusts the color of any dividing lines, borders, or separators inside the section.                                                                                                                                                                                                                  |
| **Content**                                                                                | Customizes how text and links within the newsletter area look and behave.                                                                                                                                                                                                                            |
| **Heading**                                                                                | Sets the text color of the section’s heading.                                                                                                                                                                                                                                                        |
| **Text link**                                                                              | Defines the base color for clickable links (e.g., “Read our privacy policy”).                                                                                                                                                                                                                        |
| **Text link hover**                                                                        | Sets the color of links when hovered, usually to provide an interactive highlight effect.                                                                                                                                                                                                            |
| **Social icons**                                                                           | Determines the default color of social media icons.                                                                                                                                                                                                                                                  |
| **Social icons on hover**                                                                  | Sets the hover color for social icons, often used to display brand colors or interactive states.                                                                                                                                                                                                     |
| **Input**                                                                                  | Controls the appearance of the email input field and its hover or focus states.                                                                                                                                                                                                                      |
| **Background**                                                                             | Sets the input field’s background color. Use lighter tones for readability.                                                                                                                                                                                                                          |
| **Border**                                                                                 | Defines the border color of the input field. Can be used to visually separate the field from the background.                                                                                                                                                                                         |
| **Text**                                                                                   | Sets the color of text typed inside the input field.                                                                                                                                                                                                                                                 |
| **Icon**                                                                                   | Adjusts the color of any icons inside or near the input field (such as an envelope or arrow).                                                                                                                                                                                                        |
| **Background hover**                                                                       | Defines the background color when the user hovers over the input area. Helps emphasize interactivity.                                                                                                                                                                                                |
| **Border hover**                                                                           | Changes the border color on hover to highlight focus and improve usability.                                                                                                                                                                                                                          |
| **Outline hover**                                                                          | Adds or changes an outline around the field on hover or focus for visual feedback and accessibility.                                                                                                                                                                                                 |
| **Text hover**                                                                             | Defines the color of text inside the input when hovered. Typically subtle and used rarely for design emphasis.                                                                                                                                                                                       |
| **Icon hover**                                                                             | Adjusts the icon color when hovered, adding a dynamic visual response.                                                                                                                                                                                                                               |

#### **Additional Notes**

* **Newsletter signup** sections are often placed at the **bottom of the home page** or **in footers** to encourage engagement.
* **Wide layout** is ideal for full-width promotional banners or large sign-up areas.
* To ensure accessibility, verify color contrast between input text, background, and border colors.
* Always use clear consent or privacy text if collecting emails for marketing.
* The section automatically uses Shopify’s **customer marketing system**, ensuring all signups are stored safely and GDPR-ready.
