Skapa och lägg till din egna popup

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:

screenshot-shestore.mysitoo.com-2018.03.09-13-41-46.png

 

Skapa Widget för Kodöverförare

  1. Logga in i Backoffice.
  2. Växla till framsidan av din webshop, det som kallas Live Edit.
  3. Gå till den sida där du vill skapa en popup.
  4. Tryck på kugghjulsikonen för att lägga till ett nytt block.

    21.png

  5. När blocket är tillagt, tryck på plusikonen och välj Kodöverförare.

    123.png

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

  1. Hitta, skapa och spara ner den bild som du önskar ska dyka upp i din popup. 
  2. Leta upp den bild som du själv har skapat för din popup, på din dator. Se exempelbild nedan.
  3. Högerklicka på bilden > Tryck Byt namn och namnge bilder popup.jpg
  4. Spara.

    2131.png

 

I nästa steg ska du klicka på en länk och ladda ner bilden som presenteras på dina dator.

  1. Tryck på denna länk och ladda ner bilden.
  2. Högerklicka på den vita rutan och och välj Spara. 
  3. 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. 
  4. Du bör ha två bilder på dina dator. Så här kan det exempelvis se ut:

13232321.png

Ladda upp bilderna

  1. Logga in i Backoffice > Produkter.
  2. Tryck på knappen Lägg till resurser längst ner i höger hörn.

    321312321.png
  3. Tryck på molnet och bifoga dina två bildfiler: icon_close.png & popup.jpg.
  4. När bilderna är uppladdade trycker du på knappen Stäng.

Klistra in koden i kodöverföraren 

  1. Logga in i Backoffice.
  2. Växla till framsidan av din webshop, det som kallas Live Edit.
  3. Gå till den sida där du vill skapa en popup.
  4. Gå till den sidan du lagt in widgeten kodöverförare. 
  5. Tryck på kugghjulet på widgeten.
  6. Klistra in nedan kod i rutan som heter Head

<style type="text/css">
.RBC-splash-bg {
z-index:5000;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
background-color:#fff;
opacity:0.5;
}

.RBC-splash {
visibility:hidden;
opacity:0;

background-color:#000;
color:#fff;
text-align:center;
font-size:16px;
position:fixed;
z-index:6000;
width:800px;
max-width:100%;
max-height:100%;
top:50%;
left:50%;

-webkit-box-shadow: 0px 0px 20px #888888;
-moz-box-shadow: 0px 0px 20px #888888;
box-shadow: 0px 0px 20px #888888;

-ms-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);

-o-transition: visibility 0s, opacity 0.5s ease-in-out;
-ms-transition: visibility 0s, opacity 0.5s ease-in-out;
-moz-transition: visibility 0s, opacity 0.5s ease-in-out;
-webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
transition: visibility 0s, opacity 0.5s ease-in-out;
}

.RBC-splash a {
display:block;
color:#fff;
}

.RBC-splash-image { width:100%; }

.RBC-splash.on {
visibility:visible;
opacity:1;
}

.RBC-splash-close {
display:block;
width:10px;
height:10px;
background-image:url(https://exampel.mysitoo.com/res/icon_close.png); /*Ändra din Sitoo-adress här*/
background-repeat:no-repeat;
background-position:center center;
background-size:10px 10px;
cursor:pointer;

position:absolute;
z-index:7000;
top:10px;
right:10px;
}
</style>

<script>

$(window).load(function() {
$(function () {
var cookieid = "cid";

// Check if cookie exists...
var nameeq = cookieid + "=";
var ca = document.cookie.split(";");
for(var i = 0; i < ca.length; ++i) {
var c = ca[i].trim();
if(c.indexOf(nameeq) == 0 && c.substring(nameeq.length, c.length) === "true") return;
}

var close_rbc_splash = function() {
$('.RBC-splash').removeClass('on');
$('.RBC-splash-bg').fadeOut(500);

var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = cookieid + "=true; expires=" + d.toGMTString();
return false;
}

$('body').append(
$('<div/>').addClass('RBC-splash').append(
$('<span/>').addClass('RBC-splash-close')
).append(
$('<img/>')
.addClass('RBC-splash-image')
.attr({'src': 'https://exampel.mysitoo.com/res/popup.jpg', 'alt': 'Bilden kunde inte laddas'}) //Ändra din Sitoo-adress här
.bind("click", close_rbc_splash)
)
);

$('.RBC-splash-close').bind('click', function() {
close_rbc_splash();

return false;
});

setTimeout(function(){
$('body').append(
$('<div/>').addClass('RBC-splash-bg').bind('click', function() {
close_rbc_splash();

return false;
})
)
$('.RBC-splash').css('display', 'block');
$('.RBC-splash').addClass('on');
}, 3000);
});
});
</script>

12331232312.png

  1. Leta rätt på dessa två fält i din kod som du klistrat in:

    31232133113.png

    Samt

    eqweqeqw.png
  2. Ä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.

    adsadsdasdas.png
  3. Tryck sedan på Spara.

Testa att din popup fungerar

  1. Öppna din webbläsare.
  2. Högerklicka på ikonen uppe i det högra hörnet:

     
    eller
  3. Välj nytt inkognitofönster.
  4. 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).

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

    screenshot-shestore.mysitoo.com-2018.03.09-13-41-46.png

Artiklar i detta avsnitt

Se fler

Relaterade artiklar