Så designar du din webbutik i Wordpress

Vi har nu skapat grunden för vår webbutik och lagt till vår första produkt. I detta avsnitt fokuserar vi på designen av din webbplats.

I föregående avsnitt gick vi igenom hur man installerar webbutiken och vi skapade även vår första produkt. Du är förmodligen vid det här laget intresserad av hur din webbplats ser ut.

Genom att klicka på husikonen längst upp till vänster från kontrollpanelen kommer du till din webbplats. Du bör nu se en standarddesign som alla webbplatser startar med. Men det finns tusentals andra teman som vi kan använda oss utav istället.

Ändra tema och design

För att ändra tema på din webbplats går du till ”Utseende->Tema”. Här kommer du, precis som med tillägg, till en katalog med olika teman. Det är temat som utgör designen på din webbplats. I denna guiden använder vi oss utav temat ”Bento” men du kan bläddra igenom dessa och välja en design som tilltalar dig.

Det finns två saker som du bör tänka på när du väljer tema.

  1. Responsive.
  2. Ett tema som är responsive beskär sig efter skärmens storlek. Detta gör att temat kommer se bra ut på både mobil, surfplatta och datorskärm.
  3. Utvecklat för Woocommerce.
  4. När ett tema är utvecklat för att användas tillsammans med tillägget Woocommerce finns det redan inbyggd kod i temat som gör det enklare att implementera tillägget.

När du hittat ett tema som passar dig bör du installera och aktivera temat. Om du nu klickar på webbplatsen kommer du se att designen av webbplatsen har ändrats. Det är nu dags att konfigurera temat efter din egen smak.

Tillämpa din egen design

Det kunde inte varit enklare att ändra de mest grundläggande designbitarna än i Wordpress. Genom att gå till ”Utseende->Anpassa” kan du ändra designen på din webbplats samtidigt som du ser ändringarna direkt i webbläsaren.

Wordpress startsida i editorn

Bilden ovan visar vår webbplats efter att vi ändrat färgen på menyn och lagt till vår logotyp. Detta är nu vår startsida.

Skapa din meny

För att dina besökare ska kunna navigera i din webbutik måste du skapa en meny med länkar till de olika sidorna. Detta gör du genom att gå till ”Utseende->Meny”. Här ska du skapa en meny, tilldela den platsen "Primary Menu" och lägga till länkarna som bilden nedan visar.

Skapa en meny i Wordpress

Widgets

En widget utgör en specifik funktion från ett tillägg. Detta kan till exempel vara en widget som visa de mest populära produkterna på webbplatsen eller alla produktkategorier från tillägget Woocommerce. Man kan lägga till widgets på olika platser på webbsidan men det mest vanliga är att placera dessa i sidopanelen. För att lägga till och ändra widgets går du till ”Utseende->Widgets”.

Lägg till widgets i Wordpress

Ovan har vi lagt till en widget från Woocommerce i sidopanelen. Låt oss titta på hur det ser ut i webbutiken genom att gå in på vår webbplats och klicka på ”Webbutik” i menyn.

Woocommerce sidopanel med widget

Till höger i sidopanelen ser vi nu produktkategorierna och till vänster ser vi den första produkten vi skapade i vår webbutik. Vi har nu kommit en bra bit på vägen och i nästa avsnitt börjar vi titta på hur man designar startsidan.