Webwinkel integratie in Wix website

Je webwinkel is eenvoudig te integreren in een website die met Wix gebouwd is. Hiervoor is een kleine aanpassing nodig ten opzichte van de normale manier van integreren. Op deze pagina lees je stap voor stap wat je moet doen.

In het voorbeeld hier links hebben we een pagina aangemaakt met de tekst "BESTELLEN" erboven. De rest van de pagina is nog leeg.

Klik in de pagina-editor op het plusje / "toevoegen" om een nieuw element toe te voegen aan de pagina

Selecteer uit het menu dat nu verschijnt de optie "Meer" helemaal onderaan.

Je ziet nu een aantal elementen die je kunt toevoegen aan je pagina.

Kies hier voor "HTML-code" en sleep met je muis dit element naar een plek op de pagina.
Noot; Het is belangrijk dat je het groene blokje versleept, enkel erop klikken werkt niet.

Het versleepte HTML-element zal als een venstertje in je pagina verschijnen.
Je kunt dit venster verslepen naar de gewenste plek en de breedte en hoogte ervan aanpassen.
Heb je dit gedaan, klik dan op de knop "Code toevoegen".

Er verschijnt nu een klein venstertje waar je html-code kunt invoeren.

Om het geheel overzichtelijk te houden is in de afbeelding hiernaast ook een kladblokje zichtbaar met de code die we in het kleine venstertje gaan invoeren.

Als je een integratie-code genereert in je account, geeft dat een enkele coderegel die begint met "<script" en eindigt met "</script>".
Deze coderegel heb je nodig, maar je dient twee extra regels toe te voegen voor een Wix website.
Deze twee regels zijn hiernaast in geel weergegeven.
Start met de volgende regel:

<div class="js--oypo-script">

Eindig de coderegels met de volgende regel:

</div>

Tussen beide regels zet je eenvoudigweg de eerder aangemaakte integratiecode.
In het voorbeeld hiernaast wordt dat dan het volgende:

<div class="js--oypo-script">
<script src="https://webapi.oypo.nl/embed-71434e13-f442-43cc-a13a-185205459b82" class="js--oypo-script"></script>
</div>


Staan de regels met code in het invoerveldje, klik dan op "Toepassen".

De webwinkel verschijnt nu in de webpagina en de integratie is voltooid.