I denna artikel kommer vi gå genom hur man använder sig av Layouteditorn. Vi kommer förklara hur man använder sig av layouteditorn och hur butikens uppbyggnad ser ut, och vi kommer även sätta ut produkter på första sidan samt placera ut dessa produkter där vi vill den ska vara.



Steg 1 - Butikens uppbyggnad

Vi börjar med att gå in på: Sidor -> Designeditorn
Det första man ser när man går in till designeditorn är dessa tre skärmar (Desktop, Padda, Mobil) Du kan själv välja vilken del av butiken du vill redigera. Nedanför kommer en kort förklaring om de olika delarna

  1. Header: Placerad på sidans topp och innehåller oftast Logo, Sökfunktion, Kassa, Meny (Visas på alla sidor)

  2. Middle: ligger under header (Visas på alla sidor)

  3. Left / Right: Dessa två spalter syftar på vänster och höger spalt i butiken. Om inget block/info läggs i dessa block så kommer de inte ta upp någon plats i butiken. Som standard visas inte dessa två spalter på Platta eller mobil versionerna. Detta är för att spara på skärmbreddens plats för mindre enheter. (Visas på alla sidor på desktop)

  4. Content: Här ligger sidans innehåll. Klickar du här så kommer du få upp alla sidor som du kan redigera. Alla sidor du skapar kommer hamna här, alla produkt-sidorvarugrupp-sidor och fabrikat-sidor finns även här (Visas på enskilda sidor)


  1. Footer: Placerad i butikens botten. Oftast används för att lägga länkar, info, sociala medier. (Visas på alla sidor)

 


Steg 2 - Arbeta med block

Innan vi börjar placera ut block i butiken måste vi först förstå strukturen bakom butiken. Butiken är uppbyggd av 12 kolumner där 12 är maxbredd på sidan.
Alltså om du skapar ett block och lägger bredden på 12/12 då betyder detta att blocket kommer bli fullbredd.



Vi kommer nu arbeta med sidan, “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 i laptopskärmen på “Content” och välj “index.html” (se bild)








Nu ska vi skapa 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”  





Nu borde två nya block vid namn “ Vertikalt block (innehåller rader) ” dyka upp jämte varandra. Nu ska vi redigera båda dessa två block och se till att de blir lika stora i bredden.  



När du klickat på redigerar-knappen i blocket så kommer detta fönster upp. 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. 


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



Nu ska vi välja vilka produkter som ska synas i detta block. Börja med att redigera blocket.



Nu ska vi ställa in de inställningar vi vill ha samt vilka varor vi vill visa upp. 
1.Välj hur många produkter som ska visas upp.
2.Välj stilen på visningen.

3.Lägg till antal produkter.

4.Stäng ned fönstret och klicka på knappen “Spara och aktivera mallar i butik”


Klicka på denna knappen för att komma till sidan som du håller på att redigera. 



Steg 3 - Resultatet i butiken


Efter att du klickat på knappen “Spara och aktivera mallar i butik” borde dina designändringar synas i butiken. 

Nu borde två produkter visas i butikens vänstra halva då vi tidigare satt en bredd på 6/12. 
I det tomma blocket jämte kan du lägga valfri information exempelvis: Bild, nyheter, flera produkter och mycket mer. 




I vårt fall har vi valt att lägga till ett bildspel i butikens högra halva. Totalt tar dessa två block upp hela sidans bredd då det vänstra blocket tar 6 kolumner och högra blocket tar 6 kolumner vilket är totalt 12 kolumner tillsammans.