I den här artikel går vi igenom hur du skapar en egen popup-ruta i din webshop. Slutresultatet kan se ut ungefär så här:
Skapa Widget för Kodöverförare
- Logga in i Backoffice.
- Växla till framsidan av din webshop, det som kallas Live Edit.
- Gå till den sida där du vill skapa en popup.
- Tryck på kugghjulsikonen för att lägga till ett nytt block.
- När blocket är tillagt, tryck på plusikonen och välj Kodöverförare.
- Du har nu skapat en widget som heter Kodöverförare. Denna kommer vi sedan klistra in en kod i.
Spara ner två bilder till din popup
- Hitta, skapa och spara ner den bild som du önskar ska dyka upp i din popup.
- Leta upp den bild som du själv har skapat för din popup, på din dator. Se exempelbild nedan.
- Högerklicka på bilden > Tryck Byt namn och namnge bilder popup.jpg
- Spara.
I nästa steg ska du klicka på en länk och ladda ner bilden som presenteras på dina dator.
- Tryck på denna länk och ladda ner bilden.
- Högerklicka på den vita rutan och och välj Spara.
- Filen som du laddat ner heter icon_close.png och den är till för att indikera att kunden kan trycka på ett kryss/X för att stänga din popup.
- Du bör ha två bilder på dina dator. Så här kan det exempelvis se ut:
Ladda upp bilderna
- Logga in i Backoffice > Produkter.
- Tryck på knappen Lägg till resurser längst ner i höger hörn.
- Tryck på molnet och bifoga dina två bildfiler: icon_close.png & popup.jpg.
- När bilderna är uppladdade trycker du på knappen Stäng.
Klistra in koden i kodöverföraren
- Logga in i Backoffice.
- Växla till framsidan av din webshop, det som kallas Live Edit.
- Gå till den sida där du vill skapa en popup.
- Gå till den sidan du lagt in widgeten kodöverförare.
- Tryck på kugghjulet på widgeten.
- Klistra in nedan kod i rutan som heter Head
<style type="text/css"> .RBC-splash { background-color:#000; -webkit-box-shadow: 0px 0px 20px #888888; -ms-transform:translate(-50%, -50%); -o-transition: visibility 0s, opacity 0.5s ease-in-out; .RBC-splash a { .RBC-splash-image { width:100%; } .RBC-splash.on { .RBC-splash-close { position:absolute; <script> $(window).load(function() { // Check if cookie exists... var close_rbc_splash = function() { var d = new Date(); $('body').append( $('.RBC-splash-close').bind('click', function() { return false; setTimeout(function(){ return false; |
- Leta rätt på dessa två fält i din kod som du klistrat in:
Samt - Ändra det markerade fältet till din egen mysitoo-adress. Din mysitoo adress hittar du i sökfältet på din webbläsare när du är inloggad i Backoffice.
- Tryck sedan på Spara.
Testa att din popup fungerar
- Öppna din webbläsare.
- Högerklicka på ikonen uppe i det högra hörnet:
eller - Välj nytt inkognitofönster.
- Ett nytt fönster öppnas med en grå inkognitoikon.
Notera!Du kan även använda dessa kortkommandon för att öppna ett inkognitofönster. Tryck Ctrl + Shift + N (Windows, Linux och Chrome OS) eller ⌘ + Shift + N (Mac).
- Gå in på den sidan på din webbsida som har koden inlagd och vänta någon sekund för att din popup ska visas. Det kommer ungefär se ut så på bilden nedan.