Hoe bouw ik een Lightspeed webshop in 10 stappen?

Een Lightspeed webshop is nieuw, het is gaaf en het werkt perfect! Een Lightspeed webshop beginnen, wat zijn nou eigenlijk de basis elementen die een MUST zijn om hier succesvol in te zijn? In dit blog zal ik je op een chronologische volgorde meenemen door de stappen met alle tips & tricks die nodig zijn voor het bouwen en het succes van je eigen webshop! Mocht je al bezig zijn en je bent alleen op zoek naar informatie over een bepaald onderwerp lees er dan snel doorheen en haak aan bij de juiste stap.

Een Lightspeed Webshop bouwen,

hierbij de 10 stappen.

de 10 stappen

1. intro: Een Lightspeed webshop beginnen

Om te beginnen met de webshop hebben we een CMS (Content Management Systeem) nodig van Lightspeed. Om in het dashboard van Lightspeed te komen moeten we via onze URL inloggen. In deze case neem ik als voorbeeld “https://mijn-url.nl” en verder in dit blog zullen we dit domein altijd als voorbeeld blijven gebruiken. In jouw geval kan je dit dus altijd vervangen met je eigen geregistreerde domeinnaam!

Als je met je eigen domeinnaam een Lightspeed webshop bent begonnen dan kun je het CMS, oftewel het dashboard, bereiken door .webshopapp.com/admin achter je URL te plaatsen. Bij je eigen URL dien je dan alleen de naam te gebruiken dus niet het achterste .nl/.com/etc. Wat er dan als volgt uit komt te zien:

URL voorbeeld

Vul je e-mail adres en het bijbehorende wachtwoord in en je komt terecht in het dashboard van Lightspeed. f.y.i. Terwijl je bezig bent met alle komende stappen kun je altijd je wijzigingen bekijken door naar “https://mijn-url.webshopapp.com” te gaan. Dus zonder /admin erachter.

2. Het dashboard. Waar kijk ik nu naar?

We zijn nu beland in de “controlekamer” van de Lightspeed webshop. Alle touwtjes liggen nu in jouw handen. Ik zal je even snel wegwijs maken zodat we weten waar we moeten kijken en waar heen te navigeren. Als alles tot nu toe goed gegaan is zit je in het volgende scherm:

Lightspeed webshop dashboard

Dit is het overzicht van de achterkant van je webshop. Aan de linkerkant staat een menu dat start met “dashboard” en eindigt bij “instellingen”. Vanuit dit menu kunnen we naar alle aspecten van de webshop navigeren. Verder zie je dus altijd een overzicht van het aantal bezoekers, de omzet en het aantal bestellingen. Deze informatie gaat altijd over de maand waar we in zitten. Onderin zien we ook een blok waar je in één oogopslag het jaaroverzicht van de omzet ziet. Als de webshop eenmaal draait dan kun je ook nog op “bekijk alle statistieken” klikken en een uitgebreider overzicht inzien. Voor nu gaan we ons focussen op de mogelijkheden van het menu aan de linkerkant.

3. De eerste stap naar een design, het thema.

Nu we weten wat waar staat, gaan we zorgen voor de eerste stap naar een mooi “gezicht” van de webshop, de voorkant. Deze keuze staat aan de basis om de webshop te gaan laten stralen. Denk hier dus goed over na! Wat ga je verkopen, wie is de doelgroep, wil ik veel visuele elementen of juist wat minder? Dit zijn belangrijke punten om mee te nemen in de keuze van een thema. Zie het thema als een voorgeprogrammeerd geraamte voor je webshop. Je gaat nu dus een keuze maken eigenlijk over je indeling en functionaliteiten in de webshop. Er zijn een veelal keuzes aan gratis thema’s. Ook zijn er betaalde thema’s met wat uitgebreidere functies. Deze variëren vaak van 10 tot 25 euro per maand.

Lightspeed Thema Keuze

Om in de thema-keuze omgeving te komen navigeren we naar het volgende: Design -> Theme Store. Hier heb je een uitgebreid overzicht van beschikbare thema’s in Lightspeed. Je ziet in het blauw ook de prijs per maand erbij staan. Let op, de gratis thema’s kun je vinden door helemaal naar beneden te scrollen in de lijst. De keuze is nu aan jouw. Bestudeer de thema’s goed en lees de beschrijvingen die ze meebrengen over de functionaliteiten die ze bieden. Zit er iets bij wat helemaal bij jouw idee van een webshop past? Ga er dan voor!

4. Kleurgebruik voor het thema

Nu we een thema hebben uitgekozen, gaan we maar de editor van dit thema. Dit doe je door naar “Design -> Thema editor -> Thema aanpassen” te gaan. Per thema verschillen de mogelijkheden bij de editor. Wel heeft elk thema de mogelijkheid om het kleurgebruik te gaan instellen. Denk hier dus goed over na. Wat past bij mijn product? Wat is passend voor mijn doelgroep? Welke kleuren gebruiken mijn concurrenten en waarom? Doe voor jezelf een klein onderzoekje.

Elke optie die een kleurmogelijkheid heeft zie je aan de rechterkant een gekleurd bolletje met rechts ernaast een kleurcode staan. Op dit moment ga je dus van boven naar beneden alle opties voor kleuren invullen. Kleurcodes kan je vrij makkelijk vinden. Of je gaat naar google en zoekt op “color picker” of gebruik een programma als photoshop, illustrator etc. Binnen een Lightspeed webshop zelf als je de kleur kiest heb je ook een “color picker”. Deze vind ik zelf aan de kleine klant om echt tot een perfecte kleur te komen.

Kleur instellen

Als je alles bent nagelopen en dus ook alle kleuren hebt ingevuld, klik dan rechtsboven op “Opslaan”.  Ga in het linkermenu terug en naar het Dashboard. Je ziet nu rechtsboven een knop met “Bekijk webwinkel”. Door hierop te klikken ga je eenvoudig naar de voorkant van de webshop en kun je alle veranderingen die je hebt toegepast zien en dus ook kijken of het geheel mooi samenhangt! En zo niet, geen zorgen. Blijf net zolang combinaties maken in de thema opties totdat het wel een prachtig geheel is.

Dat kleurgebruik erg belangrijk is en de klanten kan beinvloeden, kan je terugvinden in verschillende onderzoeken. Hier een stuk over kleurgebruik:

“Kleur is een krachtig communicatiemiddel. Het gevoel van een klant in een winkel wordt binnen een paar seconden bepaald door licht en kleur. Bij winkels met het juiste assortiment maar met een verkeerde kleur, zal de klant eerder weglopen dan waar een goede kleur gebruikt is. Welke kleur juist is, hangt af van de doelgroep van de winkel en de boodschap die de winkel wil uitstralen. In een winkel waar geel de boventoon voert, wordt de klant aangezet tot nadenken: perfect in boekhandels, maar voor parfumwinkels is roze of paars een betere keuze. Die kleuren brengen de klant als het ware in “hogere sferen”

Lees het volledige artikel.

5. De experience van de klant, het beeldmateriaal

Nu we de kleuren van het thema netjes hebben ingesteld kunnen we een volgende stap nemen in het design, het beeldmateriaal. Zorg altijd voor scherpe foto’s, een afbeelding met een slechte resolutie is tegenwoordig een “No-Go”. Als het thema een slider ondersteund kun je bij “Design -> Headlines” de slides gaan aanmaken voor de slider. Zorg dat deze afbeeldingen altijd allemaal dezelfde hoogte hebben en een breedte van minimaal 1920px. Dit kun je checken door op je pc/laptop met de rechtermuisknop op een afbeelding te klikken en naar eigenschappen te gaan van de afbeelding.

Denk goed na over wat jij op de homepagina in de slider wilt gaan zetten, want dit zal het eerste zijn wat de klanten zien. Slides kun je doorlinken naar een bepaalde pagina. Dus als voorbeeld kan je een slide maken voor een specifiek product en deze doorlinken naar de betreffende productpagina.

Verder kun je weer terug gaan naar “thema aanpassen” waar je ook de kleuren hebt ingesteld. Hier hangt het helemaal van het thema af wat je qua beeldmateriaal kan gaan vullen voor de Lightspeed webshop. Denk hierbij aan logo’s, favicon, banners, call-to-action etc. Elke functie binnen het thema wat een afbeelding kan bevatten zal je terugvinden binnen deze instellingen. Afbeeldingen voor producten, categorieën en merken gaan we op andere plekken toevoegen, daar komen we nog!

6. Merken & Categorieën

Stel je voor dat je in een supermarkt loopt en je ziet de tomaten naast de pindakaas liggen… Of dat je een dierentuin bezoekt en je ziet een hok met een olifant en een ijsbeer samen. Dit is raar en komt sluit niet aan bij het verwachtingspatroon van de klant. Daarom wordt het allemaal netjes ingedeeld in categorieën of merken. Vooral om orde en overzicht te behouden. Een klant wil in de supermarkt gewoon naar de groente en fruit afdeling lopen om zijn tomaten te vinden en een bezoeker in een dierentuin wil als hij naar de categorie “Afrikaanse dieren” loopt geen ijsbeer zien maar een olifant. En eigenlijk werkt deze denkwijze overal hetzelfde. Het is dus belangrijk om je webshop netjes en overzichtelijk te gaan indelen.

Merken en Categorieën zijn niet hetzelfde. Als we even uitgaan van kleding kan 1 merk producten hebben in verschillende categorieën. En een categorie kan producten bevatten van verschillende merken. Denk dus goed na over de inrichting van de webshop en zoals ik al heb aangegeven. Dit is een overzicht wat rust kan creëren en ditzelfde overzicht zorgt ervoor dat klanten gemakkelijk kunnen vinden waar ze voor kwamen op de webshop.

Binnen een Lightspeed webshop heb je de mogelijkheid als je een merk gaat aanmaken om een unieke titel aan te maken, een stuk content toevoegen met informatie over het merk en om een afbeelding toe te voegen van dat merk wat binnen je thema ook zal functioneren als de thumbnail van dat merk. Een merk maak je van te voren aan en als je dan een nieuw product aanmaakt kun je het merk selecteren en aan het product toewijzen.

7. De checkout, een betaalprovider en een verzendmethode

Er zijn 3 belangrijke elementen die moeten worden ingesteld in je Lightspeed webshop om een klant te kunnen laten betalen in de shop. Het eerste punt is de checkout. De checkout is van Lightspeed zelf en kan ook niet worden aangepast. In het dashboard van Lightspeed heb je 3 mogelijkheden voor de checkout om uit te kiezen. Als je navigeert naar “instellingen -> Checkout” zie je onder het tabje “configuratie” de drie mogelijkheden staan. Multi-step-checkout, een-pagina-checkout en eenstaps-checkout. Bekijk ze vooral alle 3 en maak voor jezelf de keuze welke je wilt gaan gebruiken voor de webshop.

Een betaalprovider kan je bij “instellingen -> betaalproviders” gaan selecteren. Hier heb je een vrije keuze in met welke betaalprovider je wilt gaan werken. Mollie is altijd een goede om aan te raden omdat deze configureerbaar is met de meest gangbare betaalmethodes zoals IDEAL, PayPal, MasterCard etc. De keuze is uiteindelijk aan jouw. Een verzendmethode kies je bij “instellingen -> Verzendmethoden”. Hier kun je een eigen optie aanmaken of een account van PostNL koppelen. Ook zijn er verschillende apps in de Lightspeed app store om door middel van een een API een verzendprovider te koppelen zoals DHL.

8. De schappen vullen met producten

Nu we de basis van de webshop hebben neergezet kunnen we ons gaan focussen op de producten. Wat is tenslotte een webshop zonder producten? Producten toevoegen kan eigenlijk op twee manieren. Handmatig door bij producten op nieuw product te klikken. Of door middel van een .CSV bestand te importeren. Door middel van deze import heb je de mogelijkheid om in één keer al je producten toe te voegen.  Als je gebruik gaat maken van de importeer functie kijk dan wel goed uit of laat een specialist zoals wij, IQ-leads dit doen voor je. Het is erg foutgevoelig en met één import kan de hele shop verkeerd staan.

Als je een hoofdproduct hebt aangemaakt krijg je allerlei invoervelden (Titel, afbeeldingen, voorraad, etc.). Probeer deze zo compleet mogelijk in te vullen. In een hoofdproduct kan je ook meerdere varianten aanmaken. Denk bijvoorbeeld aan kleding. Er is een t-shirt, maar deze moet wel besteld kunnen worden in de maten S, M en L. Denk dus goed na hoe je te werk gaat met hoofdproducten en varianten. Het meerendeel van ondernemers met een Lightspeed webshop gebruiken varianten, maar er zijn ook genoeg Lightspeed webshops die geen gebruik maken van varianten. het is dus geen MUST.

Onder het subkopje “zoekmachines SEO” is het belangrijk om alle informatie zo duidelijk en net mogelijk neer te zetten. Dit wordt namelijk hoe Google de producten gaat laten zien aan mensen die via Google gaan zoeken naar jouw producten en/of informatie. Bij het blok SEO Preview zie je precies hoe jouw resultaat zal getoond worden op google. Belangrijk hier is om unieke informatie neer te zetten. Probeer dus dat de paginatitel en metaomschrijving altijd uniek zijn om duplicatie te voorkomen in de webshop en bij Google.

9. De theme editor voor alle custom creativiteit

LET OP: maak alleen gebruik van de theme editor als je een goede basiskennis hebt van HTML/CSS, bootstrap, JavaScript en Twig (code waarmee een Lightspeed webshop geschreven wordt). Hier kun je de code van een thema aanpassen naar wens. Veranderingen die je in de theme editor aanpast zullen niet worden meegenomen met een thema update. Dus denk er altijd aan om het goed en overzichtelijk te plaatsen dat je zelf makkelijk een backup kan maken van je code, voor als er een update komt van het thema dat je gekozen hebt.

Als je wijzigingen gaat maken binnen de theme editor zie je dat de basisstructuur van een Lightspeed webshop en de thema-gerelateerde aanpassingen is verdeeld in verschillende Lay-outs, Pages, Snippets en Assets. Lay-outs en Pages zijn de basis van Lightspeed, deze zal je altijd terugvinden en hier kun je zelf ook geen extra items voor aanmaken. In de Snippets zie je alle bestanden die bij het thema komen kijken en extra zijn ontwikkeld voor een strak functioneel design. Hier zou je dus eventueel zelf een Snippet kunnen toevoegen om zelf een functie te schrijven en aan het thema te hangen.

Maar zoals al eerder aangegeven en om nogmaals te benadrukken. Als je te weinig kennis hebt van coderen adviseer ik om hier uit te blijven en als iets niet werkt even contact op te nemen met IQ-leads.

10. We gaan online!

De laatste stap voor een Lightspeed webshop is om hem live zichtbaar te maken online. Dit doe je door je eigen domein toe te voegen bij “instellingen -> domeinnamen & e-mailadressen”. Als je deze hebt toegevoegd dan kun je aan de rechterkant van je domeinnaam in het overzicht op een knop drukken “stel in als standaard”.

Door het overzetten van je domeinnaam verander je de webshopapp url naar je eigen domein. Dus je gaat ins ons voorbeeld van “https://mijn-url.webshopapp.com” naar “https://mijn-url.nl”. Houdt er rekening mee om na deze stap een SSL-certificaat aan te vragen zodat je site als veilig word beschouwd door de browser. Dit is vrij makkelijk. Je gaat naar “instellingen -> SSL-certificaten” en klik rechtsboven op “SSL certificaat toevoegen”. Vervolgens vul je de gevraagde gegevens in en vraag hem aan!

Als alle stappen goed zijn verlopen heb je nu een werkende Lightspeed webshop waar klanten op een makkelijke manier hun producten kunnen aanschaffen. Het thema zelf kun je qua uiterlijk altijd blijven aanpassen, verander niet teveel in de betaalmethodes en verzendproviders als deze goed werken.