Email popup

The Email popup section is a simple yet powerful tool designed to capture customer attention and encourage engagement.

This section allows you to display targeted popups for different pages, sources, and customer behavior. This section supports custom messages, imagery, and flexible layouts to maximize impact. The popup can include features such as social media icons, teaser buttons, and device-specific targeting, providing a tailored experience for your visitors.

1. How to add section in theme editor:

1

In your theme editor (Customize), scroll to the Overlay group beneath the Header group.

2

Locate and select Email popup section. The section will now be added to your page, ready for customization.

2. Section settings:

a. General settings

• Display mode (Choices: Active, Test)

  • Test: Popup appears every time the page is reloaded, regardless of other settings — ideal for preview and testing.

  • Active: Popup behavior follows your actual display settings.

Note: In “Test” mode, the popup shows on every reload so you can preview it. Switch to “Active” to follow your display settings.

• Image: Upload an image. Ensure the uploaded image aligns with the message of your popup (e.g., brand visuals, promotional banners). Avoid using images with too much detail or text that may compete with the popup’s content, such as headings and descriptions.

Note: The image will not display on mobile devices regardless of the settings. This limitation is in place to comply with Google's Interstitial Guidelines for mobile popups, which are critical for maintaining SEO performance.

Why?

• Overly intrusive interstitials (e.g., popups with large images) can disrupt user experience on mobile devices. Google penalizes websites with such popups in search rankings.

• By disabling images on mobile, the section adheres to these guidelines, ensuring that the popup remains user-friendly and SEO-compliant.

• Image overlay opacity (0%–100%): Controls the darkness of the overlay layer on the image.

• Image height: determines how much vertical space the image takes up, which can affect the overall size and layout of the popup: Adapt to image size - Keeps the original image height, Small, Medium, Large.

• Desktop image position: Adjust where the image appears in relation to the popup content: Top, Left, Right or Image as background

• Popup position: Specify the on-screen location of the popup: Bottom left or Bottom right: Tucked in the corners for minimal intrusion. Center: Prominent placement for maximum visibility.

• Content alignment: Align the heading and description text within the popup.

• Delay appearance: Set the delay time before the popup appears after a visitor lands on your site: 0 → 60 seconds. Reduces intrusiveness by giving users time to browse before being prompted.

• Frequency: Define the time before the popup reappears to the same user after it has been closed: 0 → 30 days. Helps avoid overloading returning visitors with repeated popups.

• Show on homepage only: If enabled, the popup will only display on the homepage.

• Show social media icons: Adds your social media icons (configured in Social media - Theme settings) to the popup for additional engagement.

b. Teaser button settings

• Enable teaser button: Allows customers to manually reopen the popup by clicking the teaser button.

• Behavior: Determine when the teaser button is visible:

  • Before popup: Shown before the popup appears.

  • After popup: Shown after the popup is closed.

  • Before and after popup: Visible both before and after.

• Button label: Enter the text for the teaser button, such as "Wholesale with us!" or "Get 10% of your first order"

• Button position: Specify the position of the teaser button on the screen: Middle left or Middle right.

c. Mobile layout settings:

• Mobile content alignment: Align the content within the popup for mobile displays: Left, Center, Right.

3. Blocks settings:

a. Heading block settings

• Add a title for the popup, such as “Subscribe for Updates” or “Exclusive Offer”.

• Heading size: Adjust the size of the heading text to fit your design: Small, Medium, Large, Extra large, Extra extra large.

b. Text block settings

• Add a description to provide additional context for the popup, such as “Sign up for our newsletter and receive 10% off your first order.”

c. Email form block:

• Show name field: Adds a field for customers to enter their name alongside their email address. If unchecked, only the email field will be displayed.

• Button settings:

  • Button label: Customize the text for the submit button, e.g., “Subscribe” or “Sign Me Up.”

  • Button style: Choose the visual style for the button: Solid, Outline or Text.