Naar de hoofdinhoud

Hoe verbind ik de pop-up module?

In dit artikel lees je hoe je de pop-up module verbindt met je webshop.

Carola avatar
Geschreven door Carola
Meer dan 2 weken geleden bijgewerkt

Met de pop-up functionaliteit van Reloadify verzamel je e-mailadressen van website bezoekers die nog geen aankoop hebben gedaan. Een veelgebruikte methode is om de websitebezoeker een korting aan te bieden in ruil voor zijn e-mailadres.

In dit artikel lees je hoe je de pop-up module in Reloadify activeert.

De pop-up module verbinden

Voordat je een pop-up kunt maken, dien je de module van pop-ups in te schakelen. Om de pop-up te kunnen tonen op je webshop is er een code op je website nodig.

  1. Ga in Reloadify naar Data bronnen > Importeren.

  2. Klik achter Popup op de drie stipjes en kies Verbinden.

  3. Er verschijnt een script. Kopieer het script en plak deze in de code van je webshop (bij voorkeur onder bestaande scripts). Het is webshop afhankelijk of de code in de head of body moet.

Draait jouw webshop op Lightspeed? Dan wordt het script automatisch op je webshop gezet. Het enige wat je moet doen is de pop-up module te verbinden (stap 1 + stap 2).

Merk jij dat je website trager lijkt na het verbinden van een pop-up? In dat geval kun je zelf Async of Defer toevoegen aan je pop-up.

Async en defer laden beide JavaScript asynchroon zonder renderblokkering. Dit zorgt ervoor dat de pop-up tegelijkertijd gedownload kan worden met de rest van de pagina.

  • Async wordt zo snel mogelijk uitgevoerd. Dit betekent dat zodra de pagina gedownload is, de pop-up wordt getoond.

  • Defer wacht op het parsen van de pagina. Daarna wordt de pop-up getoond.

Dit doe je door "async" of "defer" toe te voegen aan het pop-up script. Ter voorbeeld:
<script src="jouw-reloadify-script" async></script>

Hulp nodig met het script implementeren?

WooCommerce

Ga naar het admin panel van je WordPress-site en volg deze stappen:

  1. Navigeer naar Weergave > Theme Editor (of gebruik een child theme).

  2. Open het bestand footer.php.

  3. Voeg het script vlak vóór de sluitende </body>-tag toe.

  4. Sla de wijzigingen op.

Shopware

  1. Gebruik een child theme van je actieve template.

  2. Voeg het script toe in de footer.tpl of base.html.twig, vlak vóór </body>.

  3. Clear de cache in het Shopware admin paneel na toevoegen.

Magento 2

  1. Ga naar het admin paneel of gebruik FTP/SSH toegang.

  2. Voeg het script toe aan default_head_blocks.xml of via een custom module/layout:

    • Plaats het in app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

    • Bijvoorbeeld:

      <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=JOUWSCRIPT" src_type="url" /> </head> </page>
  3. Deploy de static content opnieuw en clear de cache.

Lightspeed eCom (C‑Series)

  1. Log in op je Lightspeed backoffice.

  2. Ga naar Settings > Website Settings > Web Extras

  3. Je hebt twee opties om scripts toe te voegen:

    • Custom JavaScript: dit wordt toegevoegd vlak vóór de sluitende </body>‑tag.

    • Custom Head Code: dit wordt toegevoegd in de <head>‑sectie (handig bij trackers of tags).

  4. Kies Custom JavaScript, plak daar het loyalty-script zoals:

    <script src="https://app.reloadify.com/assets/popup.js?reloadify_account_id=..."></script>
  5. Sla op. Het script wordt nu op alle pagina’s geladen, net vóór </body>.

Shopify

  1. Ga naar Admin → Online Store → Themes → Actions → Edit Code

  2. Open in de map Layout het bestand theme.liquid

  3. Zoek naar </body> en voeg daar je script in, bijvoorbeeld:

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

4. Sla op

5. Je script wordt nu op álle pagina’s geladen, net vóór de </body>-tag

Was dit een antwoord op uw vraag?