Skapa webshop – Steg för steg – Komplett guide
Lär dig att skapa webshop i WooCommerce helt på egen hand, så att du kan starta igång din E-handel redan idag!
Följande instruktionsvideo kommer att spara dig minst 20 000kr, vilket är minimibeloppet som du får betala om du väljer att anlita en seriös webbyrå för att skapa webshop åt dig.
***Inlägget innehåller annonslänkar***
Skapa webshop i WooCommerce
Jag heter Jakob Örnmalm, och jag ska lära dig att bygga en riktigt snygg och säljande webbutik i WooCommerce. För att göra den här processen så tidseffektiv och enkel som möjligt så kommer vi att utgå från en startmall, och sedan kommer jag att visa dig steg för steg hur du finjusterar startmallen så att den passar just DIN webbutik!
I instruktionsvideon kommer jag att skapa en webshop som säljer videoutrustning för nyblivna YouTubers, men allt det som jag gör i videon kommer du att kunna applicera på just din egna webbutik så att du får den att se ut exakt såsom DU vill att den ska se ut!
Jag har delat upp instruktionsvideon i 18 steg, och vi kommer att gå igenom samtliga av dessa steg i detalj, så att det ska bli så enkelt som möjligt för dig att hänga med i svängarna. Nu kör vi!
1. Köpa domännamn hos Loopia
Domännamnet är adressen till din nya webbutik. Domännamn köper du hos Loopia, och det kommer att kosta dig ca 100 kr per år.
Det finns tre stycken viktiga aspekter att tänka på när du skaffar domännamn till din webbutik:
- Domännamnet ska vara kort och koncist. Domännamnet ska gå att läsa och skriva snabbt och enkelt.
- Det får inte finnas några Å:n, Ä:n eller Ö:n i domännamnet. Detta beror på att vi kommer att skaffa oss en e-postadress hos Loopias webbmail som vi sedan kopplar ihop med kontaktformuläret i vår webbutik så att kunderna kan kontakta oss med sina frågor och funderingar. Denna e-postadress kan inte registreras om den innehåller Å:n, Ä:n eller Ö:n.
- Välj rätt domänändelse. Beroende på vart i världen du ämnar att driva din verksamhet så gäller det att välja rätt domänändelse. Ändelserna .se och .nu fungerar alldeles utmärkt för webbutiker med kunder i Sverige, medan .com är det säkraste alternativet för webbutiker som planerar att locka till sig kunder från flertalet länder. Andra möjliga alternativ är .net, .shop, .store och .io.
2. Skaffa Webbhotell för WordPress
Din webshop behöver placeras på nätet för att vara synligt för dina framtida besökare. Det gör vi med hjälp av ett webbhotell. Man kan säga att webbhotellet är som en hyresvärd som hyr ut en lägenhet åt dig så att du ska få tak över huvudet. I detta fall är det din webbutik som behöver ett ställe att bo på!
Vi beställer webbhotellet från Loopia, och vi ska välja det paketet som heter ”Webbhotell, Företagspaket”. Det är lite dyrare än ”Privatpaket”, men då får vi tillgång till Loopias blixtsnabba Boost-server, vilket vi behöver för att göra vår nya webshop snabb och användarvänlig för våra kunder.
3. Installera WordPress
När du har beställt domännamn och webbhotell från Loopia så kommer du att få inloggningsuppgifterna till Loopias kundzon skickade till din e-post. Logga in i kundzonen hos Loopia med dina inloggingsuppgifter.
Bläddra ner till avsnittet ”Domännamn”, klicka på det domännamnet som du köpt, och tryck på ”Installera hemsida, blogg eller webbutik på [ditt domännamn]”.
Klicka på ”Starta en hemsida eller blogg (WordPress)”.
Fyll i samtliga rutor, välj ”Befintlig domän” som installationsplats, välj rätt domännamn och tryck på ”Installera”.
4. Konfigurera UNIX & SSL-certifikat hos Loopia
Logga in i kundzonen hos Loopia med dina inloggingsuppgifter.
Bläddra ner till avsnittet ”Domännamn” och klicka på det domännamnet som du köpt.
Under ”Konfigurering”, växla över från PHP 7.4 Apache till Boost PHP 7.4. Klicka sedan i ”Tvinga SSL”, och tryck på Spara.
Scrolla sedan ner, välj ”Boost-Inställningar”. I rullgardinsmenyn ”Vilken hemsidesverktyg (CMS) använder du?” väljer du WordPress.
Under ”Cache” bockar du i följande rutor:
- Sidcache
- Kodcache
- Objektcache
Tryck slutligen på ”Spara inställningar”. Avvakta ca 1 timme innan du går vidare till nästa steg, det tar ungefär en timme för de nya konfigurationerna att färdigställas.
5. Logga in i WP-admin
Skriv domännamnet uppe i din webbläsares navigationsruta, följt av /wp-admin
Då kommer du att komma in på inloggningssidan till adminpanelen av din ny-installerade webbplats. Använd de inloggningsuppgifterna som du skapade under steg 3 för att logga in.
6. Installera startmall i WordPress
I adminpanelen, hovra över ”Utseende” och välj ”Teman”.
Vi väljer temat ”Kadence”, det är ett blixtsnabbt tema som kommer med två stycken extratillbehör som vi behöver för att kunna bygga en snygg och säljande webbutik så snabbt och smidigt som möjligt;
- Startmallen ”Shopping” som vi installerar med ett endaste musklick!
- Kadence Blocks-tillägget som behövs för att skapa proffsiga blogginlägg (dessa behövs så småningom när du ska börja skapa sökmotoroptimerade artiklar som driver trafik till din sajt)
7. Installera plugins (även kallat ”Tillägg”)
Börja med att hovra över ”Tillägg” och välj ”Installerade tillägg”.
Ta bort tilläggen ”Akismet Anti-spam” och ”Hello Dolly”.
Installera och aktivera sedan följande tillägg:
- Antispam Bee
- iThemes Security
- Autoptimize
- Nginx helper
- Redis object cache
8. Sididentitet (Logotyp och webbplatsikon)
Surfa in på canva.com och skapa ett gratiskonto.
Tryck på knappen ”Skapa en design” och välj ”Logotyp”.
Skapa din logotyp och ladda ner den i png-format. Därefter finjusterar du logotypen så att den fungerar även som webbplatsikon.
Surfa tillbaka till adminpanelen i WordPress, hovra över ”Utseende”, välj ”Anpassa”, klicka på den blåa redigera-ikonen (ser ut som en penna), ”Ändra logga”, och ersätt logotypen med din egna logotyp.
Skrolla ner, ändra webbplatsrubrik och slogan så att de passar just DIN webbutik, och byt slutligen ut webbplatsikonen mot din egna version.
9. Skapa startsidan (”Hem”)
I nuläget heter startsidan ”Home”, och nu är det dags för oss att modifiera startsidan så att den passar perfekt för just VÅRA behov!
Tryck på ”Redigera sida”.
Bekanta dig med WordPress’ alldeles egna blockredigerare ”Gutenberg”, och byt ut alla bilder, rubriker och textstycken mot dina egna.
Använd unsplash.com , pexels.com och pixabay.com för att ta fram snygga, copyright-fria foton till sajten, se till att fotona inte är större än 200kb i filstorlek, och komprimera dem ytterligare genom med tinypng.com. Det gör vi för att få sajten att ladda så snabbt som möjligt. Ju lägre filstorlek på filerna, desto snabbare uppladdningstid.
När du har modifierat färdigt ”Home”, hovra över ”Sidor”, välj ”Alla sidor”, tryck på ”Snabbredigera”, byt ut Rubrik till ”Hem” och Slug till ”hem”.
10. Skapa ”Shop”
Innan vi börjar skapa de olika produkterna till vår webbutik så måste vi justera utseendet i både ”Product Catalog” samt ”Single product layout”. För att justera dessa klickar du dig till ”Anpassa” och därefter ”WooCommerce”.
På Product Catalog-sidan har jag valt att rensa bort ”Filtrera på pris”-widgeten samt widgeten med bild och text. Kvar har jag lämnat ”Sök produkter” samt ”Produkt-kategori”-widgeten. Jag har också bytt ut bilden i hero-sektionen (högst upp på sidan) mot en som passar för min egna webbutik.
På ”Single Product layout”-sidan har jag bytt ut samtliga texter från engelska till svenska, rensat bort alla betalningsalternativ-ikoner, och adderat Stripe-ikonen.
11. Enkel produkt
En enkel produkt är en produkt som kommer i endast en variant. Det finns endast en storlek, endast en färg, och allt du behöver för att kunna använda produkten får du med när du köper produkten i dess förpackning.
Exempel på en enkel produkt är en mobiltelefon som endast kommer i en och samma storlek och färg.
För att lägga till en enkel produkt i din webbutik, hovra över ”Produkter” och tryck på ”Lägg till ny”. Se sedan till att välja ”Enkel produkt” som produkttyp.
12. Variabel produkt
En variabel produkt är en produkt som finns att köpa i olika varianter såsom storlek och färg.
Exempel på en variabel produkt är en laptop som finns att köpa i flera olika skärm-storlekar.
För att lägga till en variabel produkt i din webbutik, hovra över ”Produkter” och tryck på ”Lägg till ny”. Se sedan till att välja ”Variabel produkt” som produkttyp, och ladda upp samtliga varianterna av produkten i din webbbutik.
13. Grupperad produkt
En grupperad produkt innebär att du laddar upp flertalet enkla produkter som kompletterar varandra och som tillsammans skapar en fullt fungerande grupperad produkt. Alla dessa olika ”Produkt-enheter” knyter du sedan samman under en och samma grupperad produkt, och du behöver inhandla varje enskild produkt för att överhuvudtaget kunna använda produkten.
Exempel på en grupperad produkt är en actionkamera som måste kompletteras med micro-SD-kort, stativ och extrabatterier för att kunna brukas för de ändamålen som den är konstruerad för.
För att lägga till en grupperad produkt i din webbutik, hovra över ”Produkter” och tryck på ”Lägg till ny”. Se sedan till att välja ”Grupperad produkt” som produkttyp. Ladda därefter upp alla de tillhörande enkla produkterna, för sedan välja till dem under ”Länkade produkter” i din grupperade produkt.
14. Skapa ”Om oss”
Tryck på ”Redigera sida” för att sätta igång med att modifiera bilderna, texterna och rubrikerna på Om oss-sidan.
Byt ut bilden och rubriken i hero-sektionen, och byt ut texten i den efterföljande sektionen.
I de två nedersta sektionerna byter du ut bilderna mot dina egna bilder, justerar antalet kolumner utifrån hur många bilder du vill infoga i sektionen, samt modifierar texterna och rubrikerna.
15. Skapa ”Kontakta oss”
När vi skapar Kontakta oss-sidan behöver vi lägga in våra kontaktuppgifter så att kunderna kan nå oss. Det innebär att vi ska bädda in både e-postadress samt telefonnummer och göra dem ”klickbara”.
För att göra din inbäddade e-postadress klickbar måste du göra den till en länk. Det gör du genom att skriva ”mailto:” följt av din e-postadress. I mitt fall skriver jag:
mailto:ornmalm@gmail.com
För att göra ditt inbäddade telefonnummer klickbar måste du göra den till en länk, precis som med e-postadressen. Men denna gång skriver du ”tel:” följt av ditt telefonnummer, utan några mellanslag.
tel:0701234567
16. Skapa länkar
När du väl har alla sidor och alla blogginlägg på plats, då är det dags att börja länka emellan alla dessa sidor.
Det är väldigt enkelt att skapa länkarna, du behöver inte veta den exakta URL:en till den sidan som du vill länka till, det enda du behöver veta är vad den sidan har för titel.
När du ska skapa länken, börja skriva in namnet på sidan och då kommer du att få upp namnet och URL:en på sidan. Sedan är det bara att klicka på den rutan med namn och URL:en och klicka på ”submit”.
17. Responsiv design
Genom att vi använde oss av en startmall när vi skapade vår webshop kommer vi per automatik att få vår sajt responsiv! Du sparar MASSOR av tid på att slippa göra din sajt responsiv, det jobbet kräver dessutom att du har omfattande kunskaper i Gutenberg Page-builder.
18. Kassalösning för webshop
Min rekommendation är att du väljer antingen Stripe eller Payson som kassalösning.
