> ## Documentation Index
> Fetch the complete documentation index at: https://voyager-theme.fasil.in/llms.txt
> Use this file to discover all available pages before exploring further.
# Offer popup
> A three-stage email/SMS capture modal — persuasion, capture, then the reward code.
Voyager's offer popup is a small, considered conversion surface. It's intentionally not a generic "10% off!" overlay — it's framed editorially ("First voyage, fifteen percent.") and stages the conversion in three deliberate steps that mirror how a fashion-led brand would speak to a first-time visitor.
The popup is gated behind a sessionStorage flag, fires once per session on the home page only, and is dismissible at every step.
## When it appears
| Page | Behaviour |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Home page** | Triggers when the visitor has scrolled past the hero (one full viewport height down). Fires once per session. |
| **Any other page** | Triggers after one viewport of scroll on pages without a hero — but Voyager's other templates rarely include the popup snippet, so in practice it's home-only by default. |
The trigger uses a scroll listener. Once the threshold is crossed, the popup opens, the scroll listener becomes inert, and the body's `overflow` is locked to `hidden` so the popup feels modal.
## The three stages
Stage state is stored on `data-step` on the container (`1`, `2`, or `3`). Each stage has its own slot in the markup; CSS shows/hides them based on `data-step`.
### Stage 1 — persuasion
The first thing the visitor sees. It's framed as an invitation, not an offer:
```
AN INVITATION
First voyage,
fifteen percent.
Save 15% off your first order*
Letters from the studio — and 15%
on your first piece.
First-voyage subscribers only.
[Reveal my 15% code →]
15% won't appear again on this visit. No thanks
```
The headline uses the Voyager script-and-serif typography. The asterisk and "won't appear again on this visit" copy lean into the loss-aversion principle — once the visitor declines, the dismissal is persisted to `sessionStorage` so the claim is honest.
The primary CTA ("Reveal my 15% code →") commits the visitor to the small first "yes" — the psychological foot-in-the-door that makes the second-stage email field feel less like a transactional cost.
### Stage 2 — capture
Triggered when "Reveal my 15% code →" is clicked.
```
CODE UNLOCKED
Your 15% is ready — where should we send it?
[Email] | Mobile
[your-email@example.com ]
[Email my 15% code →]
One letter a season. Unsubscribe anytime.
T&C apply* No thanks
```
Two tabs — **Email** / **Mobile** — let the visitor pick their preferred channel. The form has a single field (email or phone), a single CTA, and a reassurance line ("One letter a season. Unsubscribe anytime.") that addresses the visitor's likely worry about spam.
Switching tabs swaps the input type, placeholder, and submit-button label.
### Stage 3 — success
Triggered on form submission.
```
WELCOME ABOARD
Your code awaits.
Use at checkout
ABBARA15
[Continue browsing]
```
The code is displayed as a single tile. The "Continue browsing" CTA closes the popup and returns the visitor to the page.
The offer popup's form submission is intentionally **not wired to a backend by default**. On submit, the popup advances to Stage 3 without sending the email anywhere. To actually capture the lead, wire the form's submit handler to your ESP — Klaviyo, Mailchimp, Shopify Email — by adding a fetch to your endpoint in the popup's submit handler (`assets/theme.js`, look for `'.offer-pop__form'`).
## Dismissal mechanics
The popup closes on:
| Action | Behaviour |
| ------------------------------- | ----------------------------------------------------------------- |
| **× button** | Closes, persists `voyage-offer-dismissed: true` to sessionStorage |
| **"No thanks" link** | Same as × button |
| **Backdrop click** | Same |
| **Escape key** | Same |
| **Stage 3 → Continue browsing** | Same (the conversion is already captured) |
Once `voyage-offer-dismissed` is `true`, the popup will not reopen for the rest of the session — even on subsequent page loads, refreshes, or navigation. New session, new opportunity.
The dismissal copy ("15% won't appear again on this visit") is honest because of this gate. Don't loosen it without rewriting the copy.
## Performance handling
The popup includes a `9:16` video in the media frame. The video file is large (\~7.9 MB) and would otherwise drag down the home-page LCP. Voyager handles this with lazy attachment:
* The `