How to create a Window Popup?

What is a Window Popup?

A Window Popup is a large, center-screen popup designed to grab attention and deliver key messages, promotions, or announcements. It is perfect for highlighting special updates or collecting emails in a visually impactful way.

🛠️ How to Create a Window popup?

Step 1: Navigate to Window popup

• From your app dashboard, go to Window Popups > Create window popup

• Choose a popup type (Announcement or email signup)

Step 2: Configure Popup Settings

Once created, you’ll be directed to the popup editor. It includes:

• Left Sidebar: Configure popup Elements, Style, Schedule, Targeting, and Translations.

• Top Bar: Set the popup name, toggle Activate/Deactivate, and preview on desktop or mobile.

Step 3: Set Up Popup Elements

3.1 Add and Customize Content

• Add content blocks: Text, Subtext, Button, Footer, or Close Action.

• You can click "Add field" to add more information to the popup. Some fields can be removed if unused.

• Use the rich text editor to style text, insert links, or format with bold, size, etc.

• Drag and drop the field to reorder.

💡 Tip: Please highlight the text you want to adjust and click the adjust action, eg bold, link, font size,...

3.2 Add an Image

• Select an image to appear in the popup.

• Adjust size (10–50% width), position (Left, Right, or Top).

• Tick the checkbox "Show image on mobile (Top)" if you want to keep the image on mobile.

• Click the trash icon to remove the image if not needed.

🎁 Want to remove branding? Contact our team to remove the "Powered by" line — free of charge if the popup is working on your store.

Step 4: Customize Popup Appearance

📌 Make the popup match your brand:

• Layout: Width, gap, padding, overlay

• Border: Radius, stroke

• Background: Color, opacity

• Text & Button Style

• Close Button settings

• Custom CSS (for advanced design)

Step 5: Schedule Popup Display

📌 Control when and how long the banner appears

📅 Schedule:

✔ Control when the popup appears:

• Visibility Time: Trigger popup in a specific period. E.g. in BFCM only.

• Display in fixed time range: Trigger popup only between specific hours (e.g., 10 AM – 2 PM)

⏱️ When to show:

• Delay by time: Trigger the popup after a set time delay (e.g., 5 seconds) to catch visitors’ attention after they've had a moment to browse.

• Delay by scroll: Display the popup once the visitor has scrolled a certain percentage of the page (e.g., 50%), showing it when they're already engaged.

• Exit intent (for desktop only): Show the popup when users move their mouse toward the top of the screen, usually indicating they're about to leave. A great way to re-engage visitors before they go.

🔁 Show again after close:

• Control when the popup should reappear after being closed — show it again on page reload, after a set number of days, or never show it again.

💡 Tip:

• Use “after X days” (e.g., 3–7 days) to avoid annoying returning visitors while still keeping your message visible over time.

• Use “never” for one-time messages like limited-time offers or urgent announcements.

• Use “on reload” only when the popup is essential and should be seen on every visit (but be cautious — it can be intrusive).

Step 6: Set Targeting

🎯 Show the popup to the right visitors:

• Where to Display: Choose specific pages or URLs

• Device Targeting: Desktop, mobile, or both

• Customer: Target logged-in users or specific customer groups

• Country/Region Settings: Display different content by location

Step 7: Add Translations (Optional)

• Support multiple languages by adding localized content to each popup element, ensuring global accessibility.

Step 8: Save & Preview

✔ Final Check:

• Use Preview to see how it looks on both desktop and mobile

• Click Save

• Enable the popup when you're ready to publish

💬 If you have any related questions, please contact us via Live chat or [email protected] for further assistance.