Promo Pop-up and Campaign Countdown

Firefly’s Promo pop-up combines a Shopify newsletter form with optional campaign content, success messaging, and a countdown to one absolute deadline. The countdown is disabled by default and appears only when a valid future deadline is configured.

Find the Promo pop-up

Open an unpublished theme in the Shopify theme editor, then open Theme settings > App embeds only for app-owned embeds; Firefly’s Promo pop-up itself is a theme-level section configured in the theme editor’s section list. It is limited to one instance and cannot be placed inside the Header or Footer groups.

Choose a display mode

• Disabled — the storefront does not automatically open the pop-up.
• Test mode — opens the normal signup view without the configured delay so you can review it repeatedly.
• Success test mode — shows the configured success view for review.
• Enabled — uses the configured Delay and Frequency for storefront visitors.

Configure and review Test mode and Success test mode before switching to Enabled. In the theme editor, selecting the section can open it for editing even when normal storefront behavior is disabled.

Delay and Frequency

Delay is the number of seconds before an enabled pop-up opens. Frequency limits how many days must pass before the enabled pop-up may be shown again in the same browser after it has been displayed. Browser storage can be cleared or unavailable, so Frequency is a presentation control rather than an identity or consent system.

Configure the absolute countdown

1. Turn on Display countdown timer.
2. In Countdown end date and time, enter one complete date, hour, minute, and time-zone designator.
3. Add matching, factual terms in Campaign details.
4. Preview the countdown in Test mode and compare it with the intended campaign deadline.

The deadline is one text field, not separate controls. It accepts either of these strict formats:

• YYYY-MM-DDTHH:mmZ for UTC
• YYYY-MM-DDTHH:mm+HH:MM or YYYY-MM-DDTHH:mm-HH:MM for an explicit UTC offset

For example, 2035-12-31T15:59Z and 2035-12-31T23:59+08:00 identify the same instant. Replace the example with the campaign’s real deadline. Use four-digit year, two-digit month/day/hour/minute, a capital T, and either a capital Z or an offset containing a colon. Do not add seconds or omit the time zone.

Time-zone guidance

An offset such as +08:00 means the entered local time is eight hours ahead of UTC; -05:00 means five hours behind UTC. If a region changes offset for daylight saving time, use the offset that applies at the campaign deadline. The field represents one fixed instant and does not reinterpret a named region later.

How the timer behaves

• It counts down to the exact configured instant using the visitor’s current device time.
• It displays Days, Hours, and Minutes. Seconds are not shown.
• Hours roll from 23 to 00 as the Days value changes; Minutes roll from 59 to 00 as Hours change.
• The remaining partial minute is rounded up for display, so the timer does not show zero minutes before the actual deadline.
• Reloading the page, reopening the pop-up, or starting a new browser session does not create a fresh countdown. The same configured deadline remains the target.
• At the deadline, the timer hides and stops. It does not roll over or restart.

The timer stays hidden when Display countdown timer is off, the field is blank, the value is invalid, the calendar date or time is impossible, or the deadline is in the past. This prevents a placeholder or expired countdown from being presented as a live campaign.

A visitor’s incorrectly set device clock can affect the visual remaining time. The published Campaign details and the store’s actual offer rules should identify the authoritative deadline and applicable time zone.

Campaign details

Use Campaign details for concise, factual conditions that customers need near the timer, such as the end instant, eligible products or markets, exclusions, and a link to full terms. The countdown does not create a discount, shipping rule, inventory reservation, price lock, or legal term. Configure the underlying offer in Shopify and keep the displayed deadline aligned with it.

Content and layout settings

The Promo pop-up also includes:

• Image
• Layout: Image first or Image second
• Color scheme: Accent 1, Accent 2, Background 1, Background 2, or Inverse
• Eyebrow, Heading, Heading size, Heading suffix, Text, Button label, and Dismiss label
• Discount code
• Success eyebrow, heading, heading size, suffix, and text
• Discount code label, Copy button label, Copied message, and Close button label
• Display image after success

At widths up to the pop-up’s mobile breakpoint, the image is hidden and the content uses a single-column dialog. Do not place campaign terms only inside the image.

Newsletter form and success state

The signup view uses Shopify’s customer form with the newsletter tag. Firefly presents Shopify’s form errors and success result. The success view can display confirmation copy and, when supplied, a copyable discount code.

The Discount code field displays text; it does not create the code in Shopify. Create and validate the discount separately, then make its eligibility and expiry consistent with the campaign details and timer.

Review before enabling

• Normal and success Test modes, then Enabled with Delay and Frequency.
• A future deadline more than one day away, hour/minute rollover, the final minute, and exact expiry.
• UTC and the actual explicit offset used by the campaign.
• Blank, malformed, impossible, and past deadlines all keep the timer hidden.
• Reload, reopen, and a separate session continue toward the same instant.
• Newsletter success/error, discount copy success/fallback, dismiss, outside click, Escape, and focus return.
• Image and no-image layouts, narrow screens, long translated copy, reduced motion, and all color schemes used by the store.

For campaign or form problems, see FAQ and Troubleshooting or contact Firefly Theme support.