Popup
About PageFly Popup Content Element
The Popup Content element enables you to create and manage popup overlays directly within the PageFly editor. You can use popups to display newsletter signup forms, exit-intent discount codes, size guide tables, flash sale announcements, age verification gates, social proof notifications, and more.
Popups are full PageFly elements — you can drag any other element (headings, images, buttons, forms, countdown timers) inside a popup and style them just like any other section of your page. Each popup has its own trigger, frequency, and display settings that control when and how it appears on the live storefront.
The Popup Content element is available when the feature is enabled for your store. If you don't see it in the elements panel, please contact PageFly support.
Popup Content Element's Structure
Popup Content > Inner content (heading, paragraph, image, button, form, etc.)
Each popup is a container element that holds child elements. The popup itself controls the overlay, positioning, animation, and close behavior, while the inner content is fully customizable.
Accessing the Element
In the PageFly editor, click on the Elements icon on the left toolbar. Navigate to the element list and choose Popup Content. You will be prompted to select one of six pre-built templates.
You can also create a popup from the Popup Management Bar at the top of the editor canvas by clicking the "+" button, or directly from any element's Click Action settings (see the Improved Click Action — Open Popup section below).
Types Of Popup Content Templates
PageFly offers six popup templates, each designed for a specific use case:
Newsletter Signup
Delay (5s)
Once per session
Two-column layout with a dark image panel on the left and an email signup form on the right. Ideal for email capture with MailChimp or Klaviyo integration.
Exit Coupon
Exit-Intent
Once per session
Single-column centered layout with a gift icon and dashed-border coupon code display. Appears when the customer's cursor moves to leave the page.
Size Guide
Click-Only
Always
Centered layout with an HTML table showing size and measurement columns. Designed to be opened from a "Size Guide" link or button on your product page.
Flash Sale
Scroll (40%)
Once per session
Hero image on top with content below, featuring a built-in countdown timer and flash sale badge. Appears after the customer scrolls 40% down the page.
Age Verification
Delay (0s)
Once per session
Appears immediately with an avatar image and two action buttons ("I am 21+" / "I am under 21"). The overlay cannot be dismissed — the customer must choose an option.
Social Proof
Scroll (70%)
Once per session
Compact horizontal card anchored to the bottom of the viewport with a product image, star rating, and CTA button. No overlay — appears as a floating notification card.
After selecting a template, you can fully customize every aspect — change the trigger, swap out content, restyle the layout, add or remove child elements.
Configuration Options
General Settings For Popup Content
When you select a Popup Content element on the canvas, the Inspector panel (right sidebar) shows the following settings.
Popup Name
A free-text label to identify this popup in the management bar, click-action dropdowns, and other surfaces. Auto-generated as "Popup 1", "Popup 2", etc.
Trigger Settings
The trigger determines when the popup automatically opens on the live storefront.
Delay
Opens automatically after a specified number of seconds. Configure the Delay Seconds value (range: 1–60, default: 5).
Scroll
Opens when the customer scrolls to a specified percentage of the page. Configure the Scroll Percentage value (range: 5%–95%, default: 50%).
Exit-Intent
Opens when the customer's cursor moves toward leaving the browser tab (top edge of viewport). No additional configuration needed.
Click-Only
Does not open automatically. Can only be opened when a visitor clicks a linked element on the page. See Improved Click Action — Open Popup.
Frequency Settings
Controls how often the popup is shown to the same visitor.
Always
The popup shows on every page load.
Once per session
The popup shows once per browser session.
Every N days
The popup shows once per specified number of days. Configure the Frequency Days value (range: 1–90).
Linked Elements
A read-only list showing all elements on the page that are configured to open this popup via click action. Each entry displays the element type and name, with a "Go to" button to navigate to that element on the canvas.
Conflict Detection
PageFly automatically detects when two or more popups may interfere with each other and shows a warning icon on the affected chips in the management bar.
A conflict is flagged when popups share all three of these conditions:
Same trigger type (Delay, Scroll, or Exit-Intent)
Same timing parameters (e.g., both set to 5-second delay)
Frequency mode set to "Always"
Click-Only popups never generate conflicts since they require explicit user interaction.
To resolve a conflict, change the trigger timing on one popup, switch the frequency mode to "Once per session" or "Every N days", or change one popup's trigger type entirely.
Improved Click Action — Open Popup
The Click Action feature has been improved to support opening Popup Content elements. Previously, click action popups could only display media content (images, videos, iframes). Now, any element on the page can open a full Popup Content element — with all the trigger, styling, and frequency options described above.
This is the primary way to trigger Click-Only popups, but it also works with popups that have auto-triggers (Delay, Scroll, Exit-Intent) — giving customers an additional way to re-open them manually.
How To Set Up
In the PageFly editor, select any element on the canvas (button, text, image, icon, etc.). Open the Inspector panel and go to the General tab. Under the Action section, set the Click Action to "Open Popup". A dropdown will appear showing all Popup Content elements on the current page, labeled by name and trigger type. Select the target popup.
Creating A Popup From Click Action
If no popup exists yet, or you need a new one, click the "Create Popup" button below the dropdown. This opens the Create Popup Modal with the trigger type pre-set to "Click-Only", an auto-generated name, and a template selection from the six available variants. After creation, the new popup is automatically linked to the element.
Managing The Link
You have two options for managing an existing link:
Edit — Navigates to the linked popup element on the canvas so you can configure it.
Unlink — Removes the click-action association. The popup remains on the page but is no longer triggered by this element.
If a linked popup is deleted but the click-action reference remains, a warning banner appears prompting you to select a different popup or remove the link.
Click-Action Popup Display Options
When using the Open Popup click action, additional styling controls appear in the Inspector:
Popup Padding
Internal padding of the popup container. Range: 0–48px.
Close Button Size
Size of the X close button: 16px, 24px, or 32px.
Close Button Color
Color of the X close button. Default: white (#ffffff).
Elements with a click-action popup automatically display a pointer cursor on the storefront, so customers know they are clickable.
You can preview how the click-action popup will look directly in the editor using the Preview Popup button in the click-action settings.
Storefront Behavior
How Popups Work On The Live Store
When a customer visits your page, popups follow this execution order:
Page loads — All popups with auto-triggers (Delay, Scroll, Exit-Intent) register their listeners.
Frequency check — Before displaying, the system checks whether the visitor has already seen the popup based on the frequency setting. If already shown, the popup is skipped.
Trigger fires — When the condition is met (timer expires, scroll threshold reached, cursor exits viewport), the popup opens with its configured animation.
One at a time — Only one popup can be open at a time. If a popup is already open and another trigger fires, the new popup waits.
Click-action popups — When a visitor clicks a linked element, the target popup opens immediately. If another popup is already open, it closes first with a brief transition.
Close Behavior
Visitors can close a popup by clicking the X close button (if enabled), clicking the overlay area outside the popup (if "Close on Overlay Click" is enabled), or pressing the Escape key on the keyboard.
Accessibility
Popups include accessibility features: role="dialog" and aria-modal="true" for screen reader compatibility, focus trapping inside the popup while it is open, and Escape key support to close.
Theme Compatibility
Popups are designed to work reliably across all Shopify themes. The popup container is repositioned to the document body at runtime to avoid CSS stacking context issues that some themes create. CSS protection ensures popups render above all theme content.
Tested themes include Dawn, Spotlight, Horizon, and Sense.
Popups are automatically disabled in the Shopify Theme Editor preview to prevent interference while customizing your theme.
Best Practices
Create Urgency With Exit-Intent
Use the Exit Coupon template to capture customers who are about to leave. Set the frequency to "Every 7 days" so returning visitors see the offer again after a week without being overwhelmed.
Use Click-Only For Reference Content
For content like size guides, shipping policies, or return information, use the Click-Only trigger. Link a text element or button to the popup so customers can open it on demand without being interrupted by auto-triggers.
Prevent Dismissal For Required Actions
For age verification or legal consent, disable both "Show Close Button" and "Close on Overlay Click". Set a strong overlay opacity (0.85) so the visitor must interact with the popup buttons to proceed.
Keep It Non-Intrusive
Use the Social Proof template with the Bottom position and no overlay to display a floating notification that doesn't block the page content. This works well for product reviews, limited-time offers, or trust signals.
Avoid Trigger Conflicts
If you have multiple auto-triggered popups on the same page, stagger their timing (e.g., 3s delay vs. 8s delay) or use different frequency modes. PageFly's conflict detection warns you when popups share the same trigger, timing, and frequency.
Frequently Asked Questions
1. How do I create a popup that only opens when a button is clicked?
Set the popup's Trigger Type to "Click-Only". Then select the button element, go to its Click Action settings, choose "Open Popup", and select the popup from the dropdown.
2. Can I have multiple popups on the same page?
Yes. You can add as many popups as needed. The management bar shows all popups and warns you about potential conflicts. Only one popup can be open at a time on the storefront.
3. Why is my popup not showing on the storefront?
Check these common causes: the popup's Frequency setting may have already been triggered for the visitor (try clearing browser cookies or switching to "Always" temporarily); if using Scroll trigger, the page may not be long enough to reach the scroll percentage; if using Click-Only trigger, make sure an element is linked to the popup via Click Action; popups are disabled in the Shopify Theme Editor — view the page on the actual storefront URL.
4. Why does my popup keep showing even though I set it to "Once per session"?
Frequency storage depends on the Shopify Customer Privacy API. If the customer has not consented to cookies, the storage may not persist and the popup will show again. This is by design to comply with GDPR requirements.
5. Can I prevent visitors from closing a popup?
Yes. Disable both "Show Close Button" and "Close on Overlay Click" in the Display Settings. The visitor will need to interact with a button or link inside the popup to proceed. The Age Verification template uses this pattern.
6. What happens if two popups have the same trigger?
If both popups share the same trigger type, timing, and frequency set to "Always", PageFly shows a conflict warning in the management bar. On the storefront, only one popup can be open at a time — the first one to trigger will display. Stagger your trigger timings or change the frequency mode to avoid this.
7. Does the popup work on mobile devices?
Yes. Popups are responsive and adapt to the viewport size. Pre-built templates automatically hide side images on small screens. Note that the Exit-Intent trigger does not fire on mobile (since there is no mouse cursor), so consider using Delay or Scroll triggers for mobile visitors.
8. Can I animate the popup entrance?
Yes. In the Display Settings, select an Animation preset. The animation plays when the popup opens. Available animations include fade, slide, and scale effects.
9. How do I link an element to open a specific popup?
Select the element, open the Inspector panel, go to General > Action, set Click Action to "Open Popup", and pick the target popup from the dropdown. You can also create a new popup directly from this dropdown.
10. Can I style the overlay behind the popup?
Yes. In the Display Settings, customize the Overlay Color (including opacity) and Overlay Blur. For example, set a dark overlay with 4px blur for a frosted-glass effect, or use a transparent overlay for a minimal floating card style.
Related Resources
Last updated
Was this helpful?