Popup

Popups can be a powerful tool for sharing limited-time offers or important updates, like a flash sale countdown or a shipping delay notice. However, when overused – such as appearing on every page or interrupting the checkout process – they can annoy users and drive them away. Use them strategically to enhance, not disrupt, the shopping experience.

If the Popup section is added to the template, it will only be shown on that page/template. If the section is added to the Overlays group, it will show on every page of the store, ie:

Important: Many of the features described in this article are available in v1.4.0 onwards. If you’re on an earlier version please read the following for more information about how to update your theme.

From Ignite v1.4.0 onwards, popups can be triggered by four actions:

1. A delay – e.g. 7 seconds after landing on a page.
2. When a user goes to exit the store.
3. A user copies text to the clipboard.
4. A user clicks on a link which is pointing to a popup.

Opening on a delay

To open the popup with a delay set ‘Show on’ to ‘A few seconds after the page loads’ and then set the number of seconds in the setting below.

Opening on exit intent

The popup can show when the user moves their mouse in a way that suggests they’re about to leave the store. This popup type will not show on mobiles or tablets. To set this up, set ‘Show on’ to ‘User is about to leave the store’.

This could be used in a variety of different ways, e.g.

• Limited-Time Discount – “Wait! Get 10% off your order if you complete your purchase now.”
• Free Shipping Offer – “Enjoy free shipping when you check out!”
• Bundle Deal or Upsell – “Unlock a special deal: Buy one, get one 50% off before you go.”
• Stock or Price Alerts – “This item is almost sold out! Grab it before it’s gone.”
• Customer Review /Social Proof – “Join thousands of happy customers who love our products!”
• Assistance – “Have questions? Get in touch before you leave.”
• Newsletter Signup with Incentive – “Not ready to buy? Sign up for exclusive discounts and early access to new products.”
• Why Choose Us? – “Here’s why customers love us: Fast shipping, hassle-free returns, and top-notch quality.”

Note, the popup will only show once, so the next time the customer go to leave the store – it will not show again.

Opening when text is copied

The popup can show when the user copies text to their clipboard. To set this up, set ‘Show on’ to ‘User copies text to clipboard’.

When this action occurs, the user may be checking if they can find the same product at a lower price elsewhere. A popup at this moment can highlight a price match guarantee or emphasize the product’s value to reassure them they’re getting the best deal.

However, there are many uses of this popup type:

• Price Match Promise – “Find a lower price elsewhere? Let us know – we’ll match it!”
• Copyright Notice – “The content on this site is protected. Please respect copyright laws.”
• Gentle Reminder – “Our team works hard to create this content. If sharing, please give credit.”
• Conversion Nudge – “Still deciding? We offer free shipping on all orders over $50!”
• Discount Teaser – “Here’s something extra – use code COPY10 for 10% off your next order.”
• Customer Assurance – “We stand by our products with a 30-day hassle-free return policy.”
• Playful Approach – “Taking notes? Don’t forget to check out our latest deals while you’re here!”
• Engagement Boost – “Love what you see? Follow us on social media for exclusive offers and updates.”

Opening when a link is clicked

In some cases, you might want a popup to appear whenever a particular link on the store is clicked, e.g. “Read more about our price promise.”. This can be useful for displaying additional details or supplementary information.

1. To do this, firstly add a Popup section and set ‘Show on’ to ‘User clicks a link’.
2. Next, set an ID for the popup. This needs to be one word, a-z characters. For example, ‘more_info_popup’ or ‘pricepromise’:
3. Finally, we need to connect the popup to a link. To do this edit any link on the same page and set the link to be ‘#’ followed by the ID of the popup set in the previous step. E.g. ‘#pricepromise’.
   

Tip: Keep popups concise – use them for brief, supplementary information rather than large blocks of content. Overloading popups with text can overwhelm users, disrupt the shopping experience, and may negatively impact SEO if search engines struggle to index important content hidden within them.

Closing the popup

The X can be used to close the popup. Once closed, it wont open again for that user on that device.

From v1.4.0 onwards, you can set the color of the X icon such that it stands out over an image – although remember to check the X on mobile and ensure it’s still clearly visible.

Also on v1.4.0 onwards, you can designate buttons with the Buttons block to close the popups. To do this, enable the ‘Click the buttons closes the popup’ setting within the Buttons block. For example: