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.

Geschreven door Carola

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 Assets > 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

  1. Ga in WordPress naar Weergave > Theme Editor (of gebruik een child theme).

  2. Open het bestand footer.php.

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

  4. Klik op Bestand bijwerken.

Shopware

  1. Gebruik een child theme van je actieve template.

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

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

  4. Leeg de cache in het Shopware admin-paneel.

Magento 2

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

  2. Open default_head_blocks.xml (bijvoorbeeld in app/design/frontend/Vendor/theme/Magento_Theme/layout/). Bestaat dit bestand nog niet, maak het dan aan.

  3. Voeg het script toe in de <head>-sectie.

  4. Voorbeeld:

<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>

Deploy de static content en leeg de cache.

Lightspeed eCom (C‑Series)

  1. Ga in de backoffice naar Settings > Website Settings > Web Extras.

  2. Kies voor Custom JavaScript.

  3. Plak hier het script.

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

  4. Klik op Opslaan.

Shopify

  1. Ga naar Online Store > Themes > Actions > Edit Code.

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

  3. Zoek naar de </body>-tag en plak je script hier direct boven.

  4. Klik op Save.

Gerelateerde artikelen
Was dit een antwoord op uw vraag?