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: