> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-studio/sections-and-features/email-popup.md).

# Email Popup

A time-delayed modal that captures email addresses. DRIFT Studio adds a logo image slot and an optional discount code reveal on success.

## How to access

In the customizer, edit the **Email Popup** section in the footer group.

## Popup settings

### Enable email capture popup

Master switch.

### Delay before showing (seconds)

Range from 1 to 30. How long after page load the popup appears.

### Don't show again for (days)

Range from 1 to 90. After a visitor dismisses the popup, it won't reappear for this many days. Visitors who subscribe won't see the popup again for one year.

### It waits for the Enter Page

If you're using the [Enter Page](/drift-shopify-theme/drift-studio/sections-and-features/enter-page.md), the popup timer doesn't start until the shopper dismisses the overlay.

Without that, the popup opened *behind* the Enter Page where nobody could see it, dimmed the entry logo and links for no apparent reason, and still set its "don't show again" cookie — burning the impression on a shopper who never saw it.

Nothing to configure. Your delay is measured from the moment the shopper enters the site.

## Logo (Studio only)

### Logo image

Optional image displayed above the heading.

### Logo max height

Range from 20 to 100 pixels.

## Content

### Heading

Main popup heading. Default: `Stay in the loop`.

### Subtext

Description below the heading.

### Button text

Submit button label. Default: `Subscribe`.

## Success state

### Success heading

Heading shown after the visitor subscribes. Default: `You're in`.

### Success message

Message shown after subscription. Default: `Thanks for subscribing. Keep an eye on your inbox.`

## Discount code (Studio only)

### Show discount code after signup

Reveals a discount code on the success screen after a visitor subscribes.

### Discount code

The exact code the customer will use at checkout. You must create the corresponding discount in **Shopify Admin → Discounts**.

### Code label

Text shown above the code. Default: `Your exclusive code`.

## Klaviyo embed block (Studio only)

Add a **Custom Liquid (Klaviyo embed)** block to the section to swap the default form for a Klaviyo signup form. Useful when you want to collect email AND SMS, or when you want to bypass Shopify's hCaptcha protection.

### What it does

When the block is present and has content, the popup renders your embed inside DRIFT's Liquid Glass container instead of the default form. The popup logo (if uploaded) still shows above the embed. The default heading, subtext, Shopify form, and hCaptcha attribution are skipped.

### How to set it up

1. In Klaviyo, build a sign-up form (Klaviyo Admin → **Sign-up Forms**).
2. Copy the **Embed** snippet (a `<div class="klaviyo-form-XYZ"></div>` element).
3. In your theme customizer, open the **DRIFT Email Popup** section.
4. Click **Add block → Custom Liquid (Klaviyo embed)**.
5. Paste the snippet into the **Form embed code** field. Save.

### Requirements

* The Klaviyo Shopify app must be installed — it loads Klaviyo's Onsite script sitewide, which is what auto-renders the embed inside the popup container.
* The success state, discount code reveal, and heading/subtext settings do **not** apply when the embed block is active. Configure all of that inside Klaviyo's form builder.

### Why use it

* **SMS opt-in** — Klaviyo handles SMS consent and storage natively.
* **No hCaptcha** — submissions go directly to Klaviyo's API, bypassing Shopify's form layer.
* **DRIFT styling** — the Liquid Glass modal container, backdrop, close button, and animations are all still DRIFT.

### Matching the Klaviyo form to DRIFT

By default, the Klaviyo form keeps Klaviyo's typography, button colors, and input styling — which can clash with DRIFT's look. To make the embedded form inherit DRIFT's design tokens (font, colors, button style, light/dark mode) without rebuilding it in Klaviyo's form editor, paste the snippet below into Klaviyo's **Custom CSS** field.

**Where to paste:** Klaviyo Admin → Sign-up Forms → your form → **Settings** → **Custom CSS**.

```css
/* DRIFT-matched Klaviyo form styling.
   Inherits DRIFT's CSS variables so the form picks up theme typography,
   colors, button style, and light/dark mode automatically. */

.klaviyo-form,
.kl_form,
.needsclick {
  font-family: inherit !important;
  background: transparent !important;
}

.klaviyo-form h1,
.klaviyo-form h2,
.klaviyo-form h3,
.klaviyo-form h4,
.klaviyo-form p,
.klaviyo-form label,
.klaviyo-form span {
  font-family: inherit !important;
  color: var(--drift-text, currentColor) !important;
  letter-spacing: -0.01em !important;
}

/* Input fields — email, phone, text */
.klaviyo-form input[type="email"],
.klaviyo-form input[type="tel"],
.klaviyo-form input[type="text"] {
  background: transparent !important;
  border: 1px solid var(--drift-glass-border, rgba(0,0,0,0.2)) !important;
  border-radius: 999px !important;
  padding: 14px 20px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--drift-text, currentColor) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  outline: none !important;
  box-shadow: none !important;
}

.klaviyo-form input::placeholder {
  color: var(--drift-text-muted, #86868B) !important;
  text-transform: uppercase !important;
}

.klaviyo-form input:focus {
  border-color: var(--drift-text, currentColor) !important;
}

/* Submit button — DRIFT primary */
.klaviyo-form button[type="submit"],
.klaviyo-form .kl_submit_button {
  background: var(--drift-btn-primary-bg, #1D1D1F) !important;
  color: var(--drift-btn-primary-text, #FFFFFF) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

.klaviyo-form button[type="submit"]:hover {
  opacity: 0.85 !important;
}

/* Checkbox (SMS consent etc.) */
.klaviyo-form input[type="checkbox"] {
  accent-color: var(--drift-btn-primary-bg, #1D1D1F) !important;
}

/* Error + success messages */
.klaviyo-form [role="alert"],
.klaviyo-form .kl_form_error {
  color: #ef4444 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.klaviyo-form .kl_form_success {
  color: var(--drift-text, currentColor) !important;
  font-family: inherit !important;
}
```

**Notes**

* The `!important` flags are needed because Klaviyo applies inline styles from its form builder. Without `!important`, Klaviyo's styles win.
* The CSS variables (`--drift-text`, `--drift-glass-border`, etc.) come from DRIFT itself — your popup is rendered inside DRIFT's container, so they cascade in automatically.
* The form will switch between light and dark mode along with the rest of your site, with no extra setup.
* If your Klaviyo form uses heading styles, multi-step navigation, or custom fields, you may need to extend the snippet. Inspect the form in your browser's dev tools and target the additional classes.

## How submissions are handled

By default, the popup uses Shopify's native customer form. Submissions create a customer record tagged `newsletter,popup`, which can sync to email tools that read Shopify customers.

If the Klaviyo embed block is set, submissions go directly to Klaviyo instead.