I denna artikel kommer vi gå genom hur man använder sig av Layouteditorn. Vi kommer förklara hur du använder layouteditorn samt hur butikens uppbyggnad är strukturerad. Vi kommer slutligen även sätta ut produkter på första sidan för att gå igenom hur du placerar ut dessa.

Steg 1 - Butikens uppbyggnad:

För att använda dig av layouteditorn går du in på Sidor -> Layouteditorn. Det första du möts av i layouteditorn är dessa tre skärmar: Large (desktop), Medium (Platta) och Small (Mobil). Du kan själv välja vilken del av butiken du vill redigera beroende på vilken skärm du vill anpassa din sida för. Nedanför kommer en kort förklaring om de olika delar

1. Header: Placerad på sidans topp och innehåller oftast en logga, en sökfunktion, en kassa och en topmeny. Denna är synlig på samtliga sidor för alla tre skärmalternativ.
   
   
2. Middle: Denna är placerad direkt under header och innehållet i detta block är synligt för alla sidor förutom i kassan. Detta block är andvändbart om du t.ex. skulle vilja visa en kampanjbanner på alla sidor på din hemsida. 
   
   
3. Left / Right: Dessa två block är alltså innehållet i din vänster och höger spalt i butiken. Dessa block är endast synliga och tar upp plats om du har placerat in något innehåll i dom. Som standard visas inte dessa två block på Medium (Platta) eller Small (Mobil). Detta är för att spara på skärmbreddens plats för mindre enheter. Innehållet du placerar in i dessa block är precis som Middle synligt på alla sidor men istället endast på sidorna för Large (desktop).
   
   
4. Footer: Elementet Footer representerar en sidfot för webbsidan och är placerat längst nere på sidan. En Footer innehåller vanligtvis kontaktuppgifter om vem som står bakom sidan. Footern kan även innehålla länkar till företagets sociala medier eller länkar till relaterade dokument, information om användarvillkor och/eller upphovsrätt, översiktskarta eller annan relevant information. Footern är precis som Headern synlig på samtliga sidor för alla tre skärmalternativ
   
   
5. Content: Under blocket Content lägger du in det innehåll du vill ha på respektive sida. När du clickar på Content dyker rutan Välj sida upp. Denna ruta tillåter dig att välja vilken sida du vill gå in och redigera innehåll på. Alla sidor du skapar dyker upp i denna väljare samt alla produkt-sidor, varugrupp-sidor och fabrikat-sidor. Detta innehållet dyker alltså endast upp på den sida du är lägger in innehåll för. 
   

Steg 2 - Arbeta med kolumner:

Innan vi förklarar hur du placerar ut block i butiken är det först viktigt att förstå strukturen bakom butiken. Webbsidan är uppbyggd av 12 kolumner där 12 är maxbredd på sidan. Om du vill att ett block ska sträcka sig ut i fullbred fyller du alltså i 12/12 kolumner på ditt block.

Exempelbilden ovan är hämtad från en Index-sida (framsidan). Sedan kan du se att det först ligger ett grönt vertikalt block som innehåller en Bild. Under detta block har du ett horisontellt block som innehåller varsitt vertikalt block, detta gör att innehållet i dom respektive horisontella blocken ligger tillsammans i en behållare. Dessa två horisontella block innehåller i sin tur varsin bild. I dom rödmarkerade rutorna är det inställt att i Small (Mobil) ska dessa bilderna ta 12/12 kolumner, vilket innebär att bilderna kommer att ligga i rad efter varandra vilket då kommer att se ut såhär:

Medans för Large (desktop), Medium (Platta) och Small (Mobil) är det inställt att bilderna under den översta bilden ska ta upp 6/12 kolumner vilket då kommer att se ut såhär:

Steg 3 - Lägga till ett block:

Börja med att välja vilken sida du vill lägga till ett block för. För detta exempel kommer vi att arbeta inne på “index.html” (butikens startsida). Vi kommer skapa ett block, lägga information i blocken och även placera ut blocken på rätt plats i butikens startsida.

Börja med att klicka på“Content” i Large (desktop) och välj sedan “index.html” (se bild nedan).

Lägg sedan till två lika stora block och placera dessa block jämte varandra i butiken. Detta gör du genom följande steg:

Lägg till block -> Välj “Horisontellt block (innehåller kolumner)” -> klicka på knappen “välj”  

Sedan kommer två nya block vid namn “ Vertikalt block (innehåller rader) ” dyka upp jämte varandra. Redigera båda dessa två block och se till att de blir lika stora i bredden. När du klickat på redigera-knappen i blocket så kommer detta fönstret för Blockspecifika inställningar upp (se bild nedan). Gå till “Välj antal delar” och sätt alla inställningar på 6/12. Detta betyder att ena blocket kommer ta 50% av sidans bredd. Se till att lägga samma inställningar på den andra blocket bredvid så kommer dessa två block tillsammans ta upp 100% av butikens bredd. 

Sedan ska vi lägga till produkter i blocket. Klicka på “Lägg till block” (se bild) i det blocket du precis skapat -> I layoutblocktyp väljer du  “Produkter” -> Nu kommer detta block fyllas med produkter. 

Nästa steg är att välja vilka produkter som ska synas i detta block. Börja med att redigera blocket där produkterna ligger (se bild ovan).

Sedan ställer du in vilka varor som ska visas och stilen på visningen:
1.Välj hur många produkter som ska visas upp.
2.Välj stilen på visningen.
3.Lägg till antal produkter.
Repetera dessa steg för blocket brevid.

Stäng slutligen ned fönstret och klicka på knappen “Spara och aktivera mallar i butik”. Gå sedan ut i butiken så kan du ta del av din förändring.

Exemplet nedan är inställt så att det första blocket med produkter ska visa fyra utvalda produkter medans det andra blocket är inställt att visa fem utvalda produkter.