Skip to main content

How to connect the pop-up module?

This article tells you how to connect the pop-up module to your shop.

Written by Carola

With Reloadify's pop-up functionality, you collect e-mail addresses from website visitors who have not yet made a purchase. A common method is to offer website visitors a discount in exchange for their email address.

In this article you will read how to activate the pop-up module in Reloadify.

Connecting the pop-up module

Before you can create a pop-up, you need to enable the pop-up module. To display the pop-up on your shop, you need code on your website.

  1. In Reloadify, go to Assets > Data sources > Import.

  2. Behind Popup, click on the three dots and choose Show script.

  3. A script will appear. Copy the script and paste it into your webshop's code (preferably under existing scripts). It depends on the webshop whether the code should be in the head or body.

Is your webshop running on Lightspeed? Then the script is automatically placed on your webshop. All you have to do is connect the pop-up module (step 1 + step 2).

Do you notice that your website seems slower after connecting a pop-up? In that case, you can add Async or Defer to your pop-up yourself.

Async and defer both load JavaScript asynchronously without render blocking. This ensures that the pop-up can be downloaded at the same time as the rest of the page.

  • Async is executed as quickly as possible. This means that as soon as the page is downloaded, the pop-up is displayed.

  • Defer waits for the page to be parsed. After that, the pop-up is shown.

You do this by adding “async” or “defer” to the pop-up script. For example:

<script src=“your-reloadify-script” async></script>

Need help?

WooCommerce

  1. In WordPress, go to Appearance > Theme Editor (or use a child theme).

  2. Open the footer.php file.

  3. Paste the script right before the closing </body> tag.

  4. Click Update File.

Shopware

  1. Use a child theme of your active template.

  2. Open footer.tpl or base.html.twig.

  3. Paste the script right before the closing </body> tag.

  4. Clear the cache in the Shopware admin panel.

Magento 2

  1. Go to the admin panel or use FTP/SSH.

  2. Open default_head_blocks.xml (for example in app/design/frontend/Vendor/theme/Magento_Theme/layout/). If this file does not exist yet, create it.

  3. Add the script inside the <head> section.

  4. Example:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">   <head>     <script src="https://app.reloadify.com/assets/popup.js?reloadify_account_id=YOURSCRIPT" src_type="url" />   </head> </page>

Redeploy the static content and clear the cache.

Lightspeed eCom (C-Series)

  1. In the backoffice, go to Settings > Website Settings > Web Extras.

  2. Choose Custom JavaScript.

  3. Paste the script here.

  4. Example: <script src="https://app.reloadify.com/assets/popup.js?reloadify_account_id=YOURSCRIPT"></script>

  5. Click Save.

Shopify

  1. Go to Online Store > Themes > Actions > Edit Code.

  2. In the Layout folder, open the theme.liquid file.

  3. Find the </body> tag and paste your script directly above it.

  4. Click Save.

Related Articles
Did this answer your question?