> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Newsletter Popup

> Display a timed popup modal to capture email subscriptions with customizable content and delay.

The Newsletter Popup section creates a modal popup that appears after a configurable delay to capture email subscriptions. The popup includes optional imagery, customizable text, and an integrated newsletter signup form.

This section is essential for building your email list and engaging first-time visitors with special offers or exclusive content.

<img src="https://mintcdn.com/digifist/hZMbNB2nQyo5BHiK/images/theme/release/sections/newsletter-popup/newsletter-popup-overview.png?fit=max&auto=format&n=hZMbNB2nQyo5BHiK&q=85&s=a97abc801fba4c23d9a475dc4711f4c4" alt="Newsletter popup overview" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/newsletter-popup-overview.png" />

## What this section controls

This section controls newsletter popup display with the following capabilities:

* Timed appearance after page load (4-30 seconds)
* Optional image for visual appeal
* Customizable heading and text
* Integrated newsletter signup form
* Friendly close/dismiss option
* Theme Customizer preview mode

## How the Newsletter Popup section works

The Newsletter Popup displays a modal overlay:

* Appears automatically after configured delay
* Shows optional image alongside content
* Displays heading, text, and email form
* User can submit email or close popup
* Remembers if user dismissed (session-based)
* Mobile responsive design

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Newsletter Popup section">
    This section is typically added to your theme's global sections.
  </Step>

  <Step title="Configure content">
    Set heading, text, and optional image.
  </Step>

  <Step title="Set timing">
    Adjust delay to control when popup appears (recommend 10-15 seconds).
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/hZMbNB2nQyo5BHiK/images/theme/release/sections/newsletter-popup/newsletter-popup-location.png?fit=max&auto=format&n=hZMbNB2nQyo5BHiK&q=85&s=709201ee74526b06592506bb50c8fc42" alt="Newsletter popup in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/newsletter-popup-location.png" />

## Section settings

<Tabs>
  <Tab title="Timing">
    ### Show newsletter after

    Controls when the popup appears after page load.

    **Range:** 4 – 30 seconds

    **Default:** 10 seconds

    <Warning>
      Setting the delay too short (\< 8 seconds) may interrupt users before they engage with your content.
    </Warning>

    <Tip>
      A delay of 10-15 seconds balances user experience with conversion opportunity.
    </Tip>

    <img src="https://mintcdn.com/digifist/hZMbNB2nQyo5BHiK/images/theme/release/sections/newsletter-popup/popup-timing.png?fit=max&auto=format&n=hZMbNB2nQyo5BHiK&q=85&s=cb315f4c9bc8676616f483d54a8ad70e" alt="Popup timing configuration" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/popup-timing.png" />
  </Tab>

  <Tab title="Content">
    ### Image

    Optional image displayed in the popup.

    * Shopify image picker
    * Displays on left side (desktop)
    * Renders at 550px width

    <Note>
      Use brand imagery or product visuals that support your newsletter value proposition.
    </Note>

    ### Heading

    Main heading text for the popup.

    * Inline rich text supported
    * **Default:** "Newsletter heading here"

    ### Heading size

    Controls the size of heading text.

    **Available options:** XS, S, M, L, XL

    **Default:** L

    ### Text

    Descriptive text below heading.

    * Rich text supported (paragraphs, formatting)
    * **Default:** "An example subheading for new subscribers."

    <Tip>
      Keep text brief (1-2 sentences) to maintain focus on the signup form.
    </Tip>

    <img src="https://mintcdn.com/digifist/p_8JusJBkPSwHVox/images/theme/release/sections/newsletter-popup/popup-content.png?fit=max&auto=format&n=p_8JusJBkPSwHVox&q=85&s=c072edcd91b4f155c4ae5724b513e6ac" alt="Popup content configuration" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/popup-content.png" />
  </Tab>

  <Tab title="Settings">
    ### Button close label

    Text for the close/dismiss link.

    * **Default:** "No thanks"

    <Note>
      Use friendly language that doesn't pressure users. "No thanks" or "Maybe later" work well.
    </Note>

    ### Show newsletter popup in customizer

    Controls whether popup displays in Theme Customizer.

    **Options:** True / False

    **Default:** False

    <Tip>
      Enable this temporarily to preview and style your popup without waiting for the delay.
    </Tip>

    ### Color scheme

    Controls background and text colors for the popup.

    * Shopify color scheme selector
    * **Default:** Scheme 1

    <Warning>
      Ensure your color scheme provides sufficient contrast for readability and accessibility.
    </Warning>

    <img src="https://mintcdn.com/digifist/p_8JusJBkPSwHVox/images/theme/release/sections/newsletter-popup/popup-settings.png?fit=max&auto=format&n=p_8JusJBkPSwHVox&q=85&s=cb989030c9343c09f3e5cedc5f749563" alt="Popup settings" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/popup-settings.png" />
  </Tab>
</Tabs>

## Newsletter form

The popup includes an integrated newsletter signup form:

* **Email input field** - Standard email validation
* **Submit button** - Label from theme translations
* **Form handling** - Integrates with Shopify customer accounts
* **Error messaging** - Displays validation errors
* **Success state** - Shows confirmation message

<img src="https://mintcdn.com/digifist/hZMbNB2nQyo5BHiK/images/theme/release/sections/newsletter-popup/newsletter-form.png?fit=max&auto=format&n=hZMbNB2nQyo5BHiK&q=85&s=03afa09d9ee6555da9a2cbec2d564345" alt="Newsletter form in popup" width="3280" height="2186" data-path="images/theme/release/sections/newsletter-popup/newsletter-form.png" />

## Best practices

* Set delay to 10-15 seconds to allow users to engage with page content first
* Keep heading concise and value-focused - emphasize benefits like "Get 10% off" or "Exclusive access"
* Use high-quality brand imagery that supports your value proposition
* Make close button text friendly and non-pushy - "No thanks" or "Maybe later" work well
* Enable "Show in customizer" temporarily for testing appearance without waiting
* Avoid very short delays (\< 8 seconds) that interrupt users immediately
* Test with different color schemes to ensure popup stands out but doesn't clash
* Keep descriptive text brief - one or two sentences maximum for quick scanning
* Ensure color scheme provides strong contrast for text readability and accessibility
* Consider A/B testing different delays, headlines, and images to optimize conversion

## Common use cases

* **Email list building** - Capture subscriber emails on homepage and key landing pages
* **First-time visitor capture** - Engage new visitors with welcome offers
* **Special offer announcements** - Promote limited-time discounts or free shipping
* **Exclusive content access** - Gate premium content like guides or lookbooks
* **Product launch notifications** - Build pre-launch email list for new products
* **Seasonal campaign signups** - Capture emails for holiday sales or seasonal collections
* **VIP club invitations** - Invite customers to join loyalty programs
* **Early access signups** - Offer early access to sales or new releases

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>
