Cursussen Webshopheld

Transcriptie

1 Cursussen Webshopheld

2 Inhoudsopgave Inhoudsopgave Webshop aanmaken en wachtwoord wijzigen 2 Homepagina - Logo en favicon plaatsen 10 Afbeeldingen in de shop invoegen 19 Productlijst basis 1 - Nieuwe pagina maken 33 Productlijst basis 2 - Downloaden, aanpassen, uploaden 37 Productlijst basis 3 - Filter maken en productlijst plaatsen 51 Navigatie voor je klant optimaliseren 60 Informatie op de productpagina en de meer info-pagina 70 Informatie- pagina s 82 Header en Footer 88 Bedrijfsgegevens, betaalmethode en instellen 95 Bestellen en formulieren 103 Eindopdracht 111 1

3 Webshop aanmaken en wachtwoord wijzigen

4 Webshop aanmaken en wachtwoord wijzigen Wat leer je in dit hoofdstuk: - Hoe je inlogt op - Hoe je een webshop éénmalig moet registreren via - Hoe je je wachtwoord kan wijzigen - Hoe je om moet gaan met je wachtwoord zodat je het niet kan vergeten - Hoe je kan inloggen en uitloggen - Wat je moet doen als je je wachtwoord bent vergeten Inleiding Je gaat nu je eigen webwinkel aanmaken via Voor in je boek zit een kaart met daarop een licentiecode. Met behulp van deze licentiecode is het mogelijk om een webshop te registreren. De webshop is hierdoor automatisch een jaar actief. Maak je shop NIET via de site van myshop aan, want dan is de webshop maar 3 maanden actief en beschik je niet over de juiste back-office! 12AB-CD34-EF Registreren 1. Ga naar en klik rechtsboven op LOG IN 1

5 Webshop aanmaken en wachtwoord wijzigen 2. Log nu in door in bovenstaand scherm de volgende gegevens in te voeren: Gebruikersnaam: webheld4you Wachtwoord: held01 Op de site van de webshopheld kun je een webshop registreren. Daarnaast vind je er onmisbare informatie: - Handleidingen en oefenbestanden - Filmpjes - Excel- en Word trainingen - Extra info bij elk hoofdstuk - Een begrippenlijst Je komt na het inloggen op de site van de webshopheld op de onderstaande pagina terecht: 2

6 Webshop aanmaken en wachtwoord wijzigen 3. Klik op Registreren myshop 4. Vul in alle velden de benodigde gegevens in. - Naam - - Licentiecode Let op: je kunt met de code slechts één shop registreren. Na activatie is de shop een jaar te gebruiken. - School - Klas 5. Check nog 1 keer of je alle velden goed hebt ingevuld. 6. Als alle velden correct zijn ingevuld, klik je op de knop Maak webwinkel aan Mail Nadat je jouw webshop hebt geregistreerd, krijg je een mail toegezonden met daarin belangrijke informatie. (het kan zijn dat de mail in je Spam terechtkomt). Shopnummer Bewaar deze mail goed! Zonder shopnummer kan je docent je werk niet nakijken. Daarnaast kan de helpdesk je in geval van problemen niet helpen. 2 Informatie opschrijven 1. Ga naar je mailbox 2. Indien het mailtje in je spam zit, verplaats het mailtje dan naar je inbox 3. Open het mailtje. Noteer je shopnummer in je agenda of telefoon. 3

7 Webshop aanmaken en wachtwoord wijzigen Dashboard Als je webshop is geregistreerd kom je automatisch op de startpagina van je webwinkel terecht. Deze wordt het dashboard genoemd. Linksboven staat je shopnummer. Wachtwoord aanpassen Het wachtwoord dat is toegekend door myshop (deze staat in het mailtje van myshop) is lastig te onthouden. Je gaat daarom nu je wachtwoord aanpassen. 3 Wachtwoord aanpassen 1. Klik rechtsboven in de hoek op het icoontje met de tandwielen. 2. Klik vervolgens op Wachtwoord aanpassen 4

8 Webshop aanmaken en wachtwoord wijzigen Wachtwoorden Wachtwoorden zijn er niet voor niets. Het wachtwoord beschermt je in dit geval tegen mensen die je schoolwerk ongewenst kunnen aanpassen (lees: verpesten). 1. Schrijf wachtwoorden nooit letterlijk op, gebruik eventueel een code 2. Zorg dat je wachtwoord niet gegokt kan worden. Gebruik dus niet je eigen naam of de naam van een familielid, huisdier of favoriete voetbalclub in je wachtwoord. Je geboortedatum kan je ook beter niet gebruiken 3. Gebruik voor verschillende sites andere wachtwoorden. Mocht iemand een wachtwoord achterhalen dan kunnen ze niet overal binnen 4. Een sterk wachtwoord: - Is minimaal acht tekens lang - Is niet je gebruikersnaam, echte naam of bedrijfsnaam. - Is geen volledig woord - Wijkt duidelijk af van eerdere wachtwoorden - Bevat tekens uit elk van de volgende vier categorieën: - Hoofdletters - kleine letters - cijfers - symbolen. 5. De beginletters van een zin zijn wel gemakkelijk te onthouden, maar niet gemakkelijk te kraken: Ik heb mijn arm al 3 keer gebroken! wordt dan: Ihmaa3kg! 2 sites met aanvullende tips: Wijzig je wachtwoord Tip: het oude wachtwoord kun je knippen en plakken vanuit de mail die is verzonden door myshop 5

9 Webshop aanmaken en wachtwoord wijzigen Inloggen, uitloggen en wachtwoord vergeten Inloggen: Elke volgende keer dat je wilt inloggen op je webshop: 1. Ga naar 2. Klik je op MYSHOP 3. Log in met je gebruikersnaam (dit is je adres) en je wachtwoord Wachtwoord vergeten: Ben je je wachtwoord vergeten? Geen probleem! 1. Vul je adres in 2. Klik op Wachtwoord vergeten In beeld verschijnt nu: Reset-bericht verzonden. Succes 3. In je mailbox zit een waarmee je je wachtwoord kan wijzigen. Heeft één of andere grapjas met jouw adres op de knop Wachtwoord vergeten? gedrukt? Dan negeer je deze mail en je oude wachtwoord blijft actief! Uitloggen 1. Klik rechtsboven op het icoontje met de tandwielen 2. Klik nu op Uitloggen 6

10 Webshop aanmaken en wachtwoord wijzigen 4 Uitloggen 1. Klik op het het icoontje met de tandwielen 2. Klik nu op Uitloggen Inloggen 1. Log in op de pagina van de webshopheld 2. Klik op het tabblad MYSHOP 3. Log in met gebruikersnaam en je (nieuwe) wachtwoord 7

11 Homepagina - Logo en favicon plaatsen

12 Homepagina- Logo en favicon plaatsen Wat leer je in dit hoofdstuk: - Hoe je een logo kunt plaatsen - Hoe je een favicon kunt plaatsen - Hoe je tekst kunt aanpassen in de tabbladen van je browser Inleiding Nadat je de naam weet van je bedrijf en het assortiment en je doelgroep is bepaald ga je een logo maken. Het logo van een bedrijf of andere organisatie is een herkenningspunt. Zo kunnen heel veel mensen direct aangeven welk bedrijven bij de verschillende logo s horen. In het boek van de webshopheld staan in hoofdstuk 5 theorie en opdrachten om een goed logo te ontwerpen. Als je op dat logo klikt, kom je altijd weer terecht op de homepage van de webshop. Een favicon is een icoontje dat geassocieerd is met je webpagina. Zo'n icoontje levert meer aandacht op in bookmarks en het maakt je pagina herkenbaar. Het favicon icoontje zie je in je adresbalk. Een favicon is 16x16 pixels groot. In deze cursus ga je leren hoe je een logo en favicon gaat plaatsen in je webshop. We gaan tevens de tekst aanpassen die je browser laat zien in een tabblad. Voorbereiding Download het logo en het zipbestand van 1. Login op de site van de webshopheld login: webheld4you ww: held01 2. Klik op de link Webshop bouwen met oefenbestanden 3. Download het zipbestand Logo en favicon Sla dit zipbestand op op een plaats dat je het bestand gemakkelijk terug kunt vinden. 4. Klik met je rechtermuisknop op het zipbestand en kies voor Alles uitpakken 5. Kies een locatie, zodat je de bestanden gemakkelijk terug kunt vinden Logo en favicon plaatsen Als je bent ingelogd in je webshop kom je terecht in de Backoffice. Je ziet links een menu waarmee je kunt navigeren naar jouw webshop. Je kunt ook bovenin klikken op het shopnummer. 9

13 Homepagina- Logo en favicon plaatsen 1 1. Klik op je shopnummer Je komt nu op onderstaande pagina terecht. In het linkermenu zie verschillende onderdelen van jouw webshop. In het menu bovenin zie je ook wat verschillende opties zoals: Afbeeldingen- & bestandsbeheer, Orderbeheer, Klantbeheer, etc. Een van de knoppen die je veel zult gebruiken bovenin is de Toon webshop-knop. 2. Klik op de knop Toon webshop of op het oogje 10

14 Homepagina- Logo en favicon plaatsen Je browser opent nu een nieuw tabblad waarop je jouw webshop kunt zien. Deze is al een klein beetje opgemaakt, maar nog lang niet af. In deze cursussen leren we je hoe je een complete webwinkel kunt inrichten. Je gaat in diverse cursussen de volgende onderdelen aanpakken: 1. Top header 2. Header 3. Navigatiebalk (hoofdmenu) 4. Content op de homepage 5. Footer 11

15 Homepagina- Logo en favicon plaatsen In de header van de website staat vrijwel altijd het logo. Als je op dat logo klikt, kom je altijd weer terecht op de homepage van de webshop. Zoals je kunt zien is het huidige logo (Webshopheld) niet echt geschikt voor de website van Modesokken. Als eerste zullen we dan ook dat logo gaan aanpassen. 3. Sluit het tabblad met de weergave van je webshop (niet je backoffice!) 4. Klik in het linkermenu op de menuoptie Pagina selecteren 5. Klik in het midden op Homepagina Door de laatste actie klapt het linkermenu uit. 12

16 Homepagina- Logo en favicon plaatsen 6. Klik in het linkermenu op de menuoptie Header 7. Klik in het midden op Logo & favicon 8. Verander het veld Logo linkt naar URL zodat als een klant klikt op je logo dat je klant op de homepagina terecht komt: winkelnummer.mijnwinkel.nl/ 9. Klik op het potloodje om het logo te wijzigen 10. Je gaat het Modesokken logo uploaden. Klik op het tabblad Upload 13

17 Homepagina- Logo en favicon plaatsen Je gaat nu het logo uploaden. Dat is geen product dus kies je voor General images and files 11. Je gaat het Modesokken logo uploaden. Klik op het tabblad Upload 12. Klik op Selecteer achter het veld General images and files 13. Selecteer het bestand logo_modesokken.png. Dit bestand heb je in de voorbereiding gedownload in het zipbestand, opgeslagen en uitgepakt. 14. Ga naar Webshopafbeeldingen en klik daar op Origineel bij het Modesokkenlogo 15. Bekijk nu in de winkel het resultaat. 14

18 Homepagina- Logo en favicon plaatsen Als laatste gaan we het tabblad in je browser aanpakken. Deze ziet er nu zo uit. Je gaat gaan nu zowel de favicon als de tekst aanpassen. Dit doe je uiteraard om de toekomstige bezoeker aan je website te helpen als hij meerdere tabbladen open heeft staan. Zo verklein je de kans dat hij per ongeluk de pagina met je webshop sluit. De tekst is een Meta tag en zorgt er tevens voor dat je beter vindbaar bent in Google 16. Vervang als eerste de favicon. Je weet hoe dit moet! Het gaat op dezelfde manier als bij het logo. Dat moet lukken! Mocht het niet lukken? Geen probleem! Kijk een stukje terug in de cursus, dan zie je hoe het moet 17. Voor het vervangen van de tekst klik je in het menu op SEO overzicht en daarna op Algemeen 18. Klik daarna op het potloodje achter home 15

19 Homepagina- Logo en favicon plaatsen 19. Verander de tekst bij Meta tags bij Titel, Omschrijving en Sleutelwoorden Nu weet je hoe het moet en uiteraard verander je in de toekomst bij elke pagina die je maakt de SEO Metatags! Eindresultaat: 16

20 Afbeeldingen in de shop invoegen

21 Afbeeldingen in de shop invoegen Wat leer je in dit hoofdstuk: - Het verschil tussen een webshopafbeelding en een productafbeelding - Webshopafbeeldingen uploaden in de backoffice - Webshopafbeeldingen in je shop plaatsen - Werken in de teksteditor Inleiding Je gaat leren hoe je in jouw webwinkel afbeeldingen zet. Soorten afbeeldingen in een webshop: - Webshopafbeeldingen, zoals: o Banners o Call to action-buttons o Achtergrondafbeeldingen - Productplaatjes Afbeeldingen zorgen ervoor dat je shop er aantrekkelijk uitziet en wijzen de consument (via links) de weg. Daarnaast laten ze zien hoe producten eruit zien. Op dit moment staan er diverse afbeeldingen in je shop, maar deze staan op een externe server. Je gaat nu leren hoe je afbeeldingen in je eigen shop kunt zetten en hoe je die afbeeldingen kunt gebruiken 1 Uploaden afbeeldingen 4. Download het bestandje modesokken.zip van 5. Sla het bestand op op je USB of computer Waarschijnlijk staat het bestand in de map downloads op je computer 18

22 Afbeeldingen in de shop invoegen 6. Klik op Afbeelding- & bestandsbeheer Het onderstaande scherm krijg je nu te zien. Zoals in de inleiding vermeld zie je geen afbeeldingen in je backoffice. Op dit moment wordt er uitsluitend gewerkt met afbeeldingen op een server 7. Klik op Upload De juiste map Productafbeeldingen plaats je bij Product afbeeldingen (zie volgende pagina). Afbeeldingen die je bijvoorbeeld als achtergrond of als banner wilt gebruiken plaats je bij Webshop afbeeldingen! 19

23 Afbeeldingen in de shop invoegen Zorg dat je altijd alle afbeeldingen in de juiste map plaatst! 8. Ga naar Upload nieuwe afbeeldingen Let op! Je gaat (diverse) webshop afbeeldingen plaatsen en dat betekent dus ook dat je de afbeeldingen in de juiste map moeten plaatsen 9. Klik bij Webshop afbeeldingen op Selecteer Nu ga je het.zip bestand uploaden met daarin meerdere plaatjes. Je kunt in de toekomst ook een enkel plaatje uploaden, dat werk op dezelfde manier. 10. Zoek het document modesokken.zip op je computer Het systeem geeft aan dat de afbeeldingen zijn geüpload 20

24 Afbeeldingen in de shop invoegen 11. Klik op Webshop afbeeldingen. Zo controleer je of het uploaden gelukt is. Als het goed is krijg je onderstaand resultaat te zien 12. Klik nu banner.jpg en vervolgens op Voorvertoning 21

25 Afbeeldingen in de shop invoegen Je krijgt nu de afbeelding te zien, met daaronder de locatie van de afbeelding op internet (de URL). Elk bestand heeft een URL. In je shop wordt dus de URL opgenomen en niet de afbeelding. Een browser zet deze URL om en laat de afbeelding zien. 2 Afbeeldingen in je shop plaatsen Je gaat gaan nu eerst bekijken hoe de huidige afbeeldingen in de shop zitten 1. Klik op Pagina selecteren en daarna op Home pagina 22

26 Afbeeldingen in de shop invoegen Je komt automatisch in de Pagina editor van de backoffice terecht 2. Klik op het potloodje bij Afbeelding Je gaat de afbeelding die in je shop staat vervangen door een andere afbeelding 3. Klik op het potloodje onder het plaatje 4. Klik op het tabblad Webshop afbeeldingen 23

27 Afbeeldingen in de shop invoegen 5. Kies de afbeelding banner.jpg en klik op Origineel 6. Bekijk vervolgens het resultaat in je webshop 24

28 Afbeeldingen in de shop invoegen 3 Locatie van een afbeelding bepalen en linkgrid aanpassen 1. Open je shop in een internetbrowser naar keuze Als je op de indeling kijkt van de homepage zie je afbeeldingen met daarop: Dames, Heren en Kinderen. Deze afbeeldingen komen niet uit je eigen webshop. Maar hoe weet je dat? In elke browser kun je zien (door op de rechtermuisknop te klikken) wat de locatie van de afbeelding is. 2. Klik met je rechtermuisknop op de afbeelding met daarop Dames 3. Kies voor Adres van afbeelding kopiëren (Safari: Kopieer locatie van afbeelding, Firefox: Afbeeldingsinfo bekijken, etc.) 4. Kopieer het adres in een nieuw tabblad 25

29 Afbeeldingen in de shop invoegen Als je kijkt naar de locatie van de afbeelding dan zie je de volgende locatie: Je ziet in de link het shopnummer staan. Dat is niet jouw shopnummer. Je hebt eerder al diverse afbeeldingen in je shop geüpload. Daaronder zaten de afbeeldingen dames, heren en kinderen. Je gaat in de volgende opdracht de plaatjes die je geupload hebt in jouw shop zetten. 5. Ga terug naar je backoffice 6. Klik op het potloodje bij Link Grid 7. Verwijder eerst de afbeelding Dames (klik op het kruisje) en vervang hem door de afbeelding Dames die je in je shop hebt geüpload. (klik op het potloodje) 8. Doe hetzelfde met de afbeeldingen Heren en Kinderen 9. Controleer in een browser of het gelukt is 26

30 Afbeeldingen in de shop invoegen 4 Teksteditor aanpassen Als je verder op de indeling kijkt van de homepage zie je onder het Link Grid een blok Tekst staan. Dit is een zogeheten teksteditor. In deze teksteditor kun je tekst en plaatjes zetten op een Word-achtige manier 1. Klik op het potloodje bij Tekst Je komt nu in de teksteditor terecht. 27

31 Afbeeldingen in de shop invoegen In deze teksteditor staat één afbeelding met daarin een paar logo s van sokkenmerken. Ook dit plaatje komt niet uit de eigen webshop. Weet je nog hoe je dat kan controleren? De afbeelding ga je in de volgende opdracht vervangen met een afbeelding die je in het begin van de cursus hebt geüpload. 2. Verwijder eerst de afbeelding in de teksteditor 3. Voeg de juiste afbeelding toe door op het icoontje te klikken 4. Typ nu boven de afbeelding met de merken de tekst -ONZE MERKEN - en onder de afbeelding -TOP DEALS - (Lettergrootte: 18, Vetgedrukt) 5. Zorg dat de tekst wordt gecentreerd en los staat van de afbeelding 6. Bekijk het resultaat in een browser 28

32 Afbeeldingen in de shop invoegen 5 Opdrachten 1. Voeg helemaal onderaan zelf een Link Grid toe (door te slepen vanuit het tabblad navigatie) 2. Plaats in de Link Grid de volgende afbeeldingen: nieuws1.jpg, nieuws2.jpg en nieuws3.jpg Tip: Kies in het tabblad Link Grid voor de 9 blokjes (3 naast elkaar) 3. Zorg dat de tekst NIEUWS gecentreerd boven het Link Grid komt te staan 4. Plaats onder de Link Grid een Tekst Grid met, bij elk van de nieuwtjes, een verhaaltje van maximaal 3 regels 29

33 Afbeeldingen in de shop invoegen 5. De banner van Happy socks heeft nog geen tekst deze ga je daarom (nogmaals) vervangen: - Download het bestand banner_happy_socks.jpg van - Upload de banner in het systeem onder Webshopafbeeldingen - Vervang de afbeelding Banner.jpg door de Happy socks-banner Einde van de cursus 30

34 Productlijst Basis 1 - Nieuwe pagina maken

35 Productlijst Basis 1 - Nieuwe pagina maken Wat leer je in dit hoofdstuk: - Een nieuwe pagina maken Inleiding Je hebt in een voorgaande cursus een homepage gemaakt. Deze ziet er netjes en professioneel uit. Maar een webshop is natuurlijk meer dan alleen een homepagina. Producten die de potentiële consument kan bestellen moet je uiteraard met productinformatie kunnen laten zien. Een productpagina bestaat uit de volgende onderdelen: - De pagina zelf - De productlijst die je (al dan niet met een filter) vertoont op de pagina - Eventueel een keuzemenu of een priceslider om de klant te helpen zoeken In de webshop staat al een pagina met enkele sokken van het merk Happy Socks. We gaan je in deze handleiding leren hoe je een nieuwe pagina moet maken en hoe je producten kunt toevoegen. 1 Een nieuwe pagina maken 13. Open het Webshop dashboard en klik daarna op Pagina bewerken 32

36 Productlijst Basis 1 - Nieuwe pagina maken 14. Klik op Selecteer Pagina 15. Rechtsboven vind je een knop Nieuwe pagina. Klik op deze knop. Het dialoogvenster Voeg nieuwe pagina toe komt tevoorschijn. Je gaat een nieuwe pagina maken voor JBS sokken. 16. Typ bij paginanaam JBS Laat het vinkje aanstaan zodat de nieuwe pagina als link terugkomt bij de tabbladen in de navigatie van de webshop. 17. Klik vervolgens op OK Je komt nu automatisch in de pagina editor van je nieuwe pagina JBS. 33

37 Productlijst Basis 1 - Nieuwe pagina maken Deze is uiteraard helemaal leeg. Als je op het oogje klikt om de pagina te tonen is ook de pagina JBS in je webshop (uiteraard) helemaal leeg. De pagina JBS ga je nu vullen met content. De belangrijkste content is de Productlijst. Er is al een productlijst met Happy Socks. Vanuit deze database laat je de producten zien op de pagina Happy Socks. Het is handig om nieuwe data daaraan toe te voegen. Alles in één database In principe zet je alle productdata in één database. Je kiest er dus niet voor om voor elk merk een aparte database te uploaden. Enkele voordelen - Op een kortingspagina kun je gemakkelijk vanuit één database meerdere merken tonen. Met meerdere databases is dat lastiger - Als er nieuwe sokken binnenkomen hoef je maar één database aan te passen en niet meerdere Je gaat de producten van het merk JBS toevoegen aan productlijst die al is geüpload in je shop. Dat doen we in de volgende cursus. Einde cursus 34

38 Productlijst Basis 2 - Downloaden Aanpassen Uploaden

39 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Wat leer je in dit hoofdstuk: - Een productlijst downloaden - Een productlijst aanpassen - Een productlijst uploaden (oude productlijst vernieuwen) Inleiding Je hebt in een voorgaande cursus een pagina gemaakt. Nu ga je in deze cursus een productlijst aanpassen. In de volgende cursus ga je de nieuwe sokken tonen in je webshop Voor je gaat beginnen met het aanpassen van de productlijst, heb je nog wat hulpbestanden nodig van de site van de Webshopheld. 1 Voorbereiding 1. Je gaat productafbeeldingen downloaden van de site van de Webshopheld Download het bestand jbs.zip (met productafbeeldingen) 2. Zet de plaatjes van jbs.zip in de webshop bij Product afbeeldingen. - Klik op Afbeelding- & bestandsbeheer - Klik daarna op Upload - Zet de 6 afbeeldingen in de shop onder Product afbeeldingen! Je bent klaar met de voorbereiding en gaat nu aan de slag met de productlijst. 36

40 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Een productlijst is een Excel-bestand met de informatie van je producten. Deze lijst ga je eerst downloaden. 2 Productlijst downloaden 1. Vanuit je Webshop dashboard klik je op Productlijst selecteren Je ziet in de shop één productlijst staan genaamd happysocks_productlijst met daarin 12 artikelen. 37

41 Productlijst Basis 2 - Downloaden, aanpassen, uploaden 2. Klik op happysocks_productlijst 3. Klik in de linker kolom op Product beheer en daarna (als het menu is uitgeklapt) op Producten exporteren 38

42 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Je komt in onderstaand dialoogvenster terecht. Hier kun je er voor kiezen om je productlijst te laten mailen of om de lijst direct te downloaden. 4. Klik op Direct downloaden 5. Sla het gedownloade bestand op op je computer 6. Open het gedownloade Excel-bestand (Waarschijnlijk staat het bestand in de map downloads) Als je de productlijst hebt gedownload en geopend in Excel krijg je onderstaande rijen en kolommen te zien. We gaan je nu leren hoe je het Excel-bestand kunt aanvullen met de JBS sokken 39

43 Productlijst Basis 2 - Downloaden, aanpassen, uploaden De kolommen hebben een naam: - Artikelnummer - Voor {domain} - Merk {domain} - Categorie {domain} - Kleur - EAN-code - Foto groot {piture} - Foto klein {picture} - Omschrijving - Maat - Drop down menu - Productomschrijving - Materiaal - Bijzonderheden - Wasvoorschriften - Wasadvies - Verpakt per - Voorraad {number} - Prijs - meta_title - meta_discr - meta_key - url Verplichtingen in een database voor een webshop - De eerste kolom moet het artikelnummer bevatten - Elk artikelnummers moet uniek zijn Is dit niet het geval, dan lukt het uploaden niet van de database en geeft myshop een foutmelding!! 3 Productlijst aanpassen 1. Nummer als eerste de artikelnummers door tot en met Elk nummer is zo uniek! - Er is plaats voor de 6 geuploade sokken die elk in 2 maten te krijgen zijn 2. Vul nu de informatie voor sok en aan met de gegevens op de volgende pagina 40

44 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Artikelnummer Voor {domain} Heren Merk {domain} JBS Categorie {domain} Grijstinten Kleur Grijstinten EAN-code Foto groot {piture} Foto klein {picture} Omschrijving JBS Argyle Maat Drop down menu 7 Productomschrijving Dé trend van het jaar! Deze vrolijke gestreepte sok gaat ervoor zorgen dat 2017 een vrolijk jaar wordt! Of ze nu onder uw jeans of onder uw pak gedragen worden, u steelt de show! Materiaal 80% katoen, 19% nylon, 1% lycra Bijzonderheden Handgeketteld Wasvoorschriften niet drogen in droogtrommel, bleken niet mogelijk, niet strijken, niet chemisch reinigen Wasadvies 40 graden Verpakt per 1 paar Voorraad {number} 3 Prijs 5,95 meta_title JBS Argyle meta_discr JBS Argyle meta_key JBS Argyle url JBS Argyle De tweede sok wordt artikelnummer Het enige verschil met deze sok is de maat. Tip: Je kunt dus veel tekst kopiëren. Artikelnummer Voor {domain} Heren Merk {domain} JBS Categorie {domain} Grijstinten Kleur Grijstinten EAN-code Foto groot {picture} Foto klein {picture} Omschrijving JBS Argyle Maat Drop down menu 7 Productomschrijving Dé trend van het jaar! Deze vrolijke gestreepte sok gaat ervoor zorgen dat 2017 een vrolijk jaar wordt! Of ze nu onder uw jeans of onder uw pak gedragen worden, u steelt de show! Materiaal 80% katoen, 19% nylon, 1% lycra Bijzonderheden Handgeketteld Wasvoorschriften niet drogen in droogtrommel, bleken niet mogelijk, niet strijken, niet chemisch reinigen Wasadvies 40 graden Verpakt per 1 paar Voorraad {number} 3 Prijs 5,95 meta_title JBS Argyle meta_discr JBS Argyle meta_key JBS Argyle url JBS Argyle 43

45 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Vul nu verder de gegevens in de Excellijst aan met de informatie van de tabel met de omschrijving van de sok. Eerder al vernoemd in deze cursus : Heren Multi-color: Rood-blauw-grijs maat : Heren Multi-color: Rood-blauw-grijs maat : Heren Multi-color: Geel-oranje-bruin maat : Heren Multi-color: Geel-oranje-bruin maat : Heren Multi-color: Groen-paars-licht blauw maat : Heren Multi-color: Groen-paars-licht blauw maat : Dames Multi-color: Blauw-geel-lichtblauw maat : Dames Multi-color: Blauw-geel-lichtblauw maat : Dames Multi-color: Rood-groen-paars maat : Dames Multi-color: Rood-groen-paars maat Vul de kolom met Drop down menu exact in zoals in onderstaand voorbeeld!! Op de volgende pagina leggen we uit waarom. De overige informatie mag je naar eigen inzicht invullen. Alleen de kolommen met foto s van de nieuwe sokken laat je leeg! Tip: met kopiëren en plakken kun je veel informatie snel overbrengen. Misschien ken je zelfs de vulgreep in Excel al: dan gaat het nóg sneller Opmerking: bij een commerciële webshop moet elke sok zijn eigen unieke tekst krijgen in verband met de SEO (vindbaarheid door Google) Als het goed is zijn de vakjes met de foto s leeg. De link van de foto ga je ophalen in de backoffice van myshop. Je hebt daar in de voorbereiding de afbeeldingen opgeslagen. Door het opslaan geeft het systeem de afbeelding automatisch een adres, een URL. Deze URL ga je in je database kopiëren. 44

46 Productlijst Basis 2 - Downloaden, aanpassen, uploaden Uitleg drop down-menu: Een drop down-menu is erg handig. Stel je hebt een schoenenwebshop en je hebt van een bepaalde groene schoen 12 maten. Dan wil je niet dat deze groene schoen 12 keer in je webshop wordt getoond met 12 keer dezelfde groene afbeelding. Je gebruikt dan het drop down-menu om deze schoen maar 1 keer te tonen. Je geeft de klant de optie om in een drop down-lijst een maat uit te kiezen. Hoe werkt dat in de database: - Elk nieuw getal zorgt ervoor dat de sok in kwestie getoond wordt - Elke keer als hetzelfde getal in de database staat, worden de artikelen samen getoond in een drop down menu. Zoals in onderstaand voorbeeld Je moet dat uiteraard wel in je shop instellen. Wij hebben dat al voor je gedaan. 3. Ga in je backoffice naar Afbeelding- & bestandsbeheer 45

47 Productlijst Basis 2 - Downloaden, aanpassen, uploaden 4. Klik vervolgens op de eerste sok en daarna op Voorvertoning 5. Kopieer vervolgens de URL onder de afbeelding 46

48 Productlijst Basis 2 - Downloaden, aanpassen, uploaden 6. Kopieer vervolgens de URL in je database (Excellijst) achter sokken en zowel bij Foto groot als Foto klein Als je een hele grote webshop hebt, is het handig om daadwerkelijk kleinere foto s te gebruiken i.v.m. de laadtijd van je shop. Hier is dat niet nodig. 7. Zorg dat van alle andere foto s ook de URL in je database komt te staan 8. Het eindresultaat levert een complete lijst op. Sla de lijst op als productlijst_datum.xlsx Als het goed is heb je nu een aangepaste en complete productlijst. We gaan deze nu uploaden in je webshop. Een bestaande productlijst uploaden is niet moeilijk Omdat je alleen wat productgegevens hebt toegevoegd is het uploaden niet moeilijk. Je hoeft niets in te stellen! Dat hebben de Webshopheld al voor je gedaan De backoffice in myshop onthoud alle instellingen. Een compleet nieuwe lijst uploaden is iets moeilijker. Dan zal je zelf diverse instellingen moeten doen Je kunt dat leren in een advanced cursus. Tip: Als je tevreden bent met de instellingen van de productlijst? Afblijven dan! Als je later een shop maakt met je eigen producten, gebruik dan deze database als basis! het scheelt je een hoop werk 47

49 Productlijst Basis 2 - Downloaden, aanpassen, uploaden 4 Productlijst uploaden (oude productlijst aanpassen) 1. Klik in je Webshop dashboard op Productlijst 2. Klik op Productlijst selecteren 3. Klik op de Productlijst wizard of de plus-knop 48

50 Productlijst Basis 2 - Downloaden, aanpassen, uploaden 4. Klik op het wolkje en selecteer de opgeslagen productlijst (productlijst_datum.xlsx) 5. Vink aan dat je de Bestaande productlijst wil verversen en klik vervolgens op de groene pijl (rechts) 49

51 Productlijst Basis 2 - Downloaden, aanpassen, uploaden De productlijst is geïmporteerd Er zijn nog wat kleine dingen te doen - De pagina met JBS is leeg en moet gevuld worden met (alleen) de sokken van JBS - De sokken van JBS worden al wel getoond op de Happy Socks pagina logisch, want je hebt ze toegevoegd aan de database (Check het maar in je webshop ) Beide zaken ga je in de volgende cursus oplossen! Je gaat leren: - Hoe je een productlijst kunt tonen op een pagina - Hoe je een filter maakt: hiermee kun je zelf bepalen welke artikelen er op de pagina worden getoond uit je database Einde cursus 50

52 Productlijst Basis 3 - Filter maken en productlijst plaatsen

53 Productlijst Basis 3 Filter maken en Productlijst plaatsen Wat leer je in dit hoofdstuk: - Een filter maken - Een productlijst plaatsen op een pagina - Navigatie aanpassen in de Header Inleiding Je hebt in een voorgaande cursus een productlijst aangepast. Er zitten naast de Happy Socks nu ook JBS sokken in je database. Je gaat in deze cursus op de pagina van JBS de complete productlijst plaatsen. Je geeft dan met een filter aan dat je alleen sokken van het merk JBS wilt laten zien. 1 Productlijst plaatsen 1. Open het Webshop dashboard en klik daarna op Pagina bewerken 2. Klik op Selecteer pagina en kies de pagina jbs 52

54 Productlijst Basis 3 Filter maken en Productlijst plaatsen Zoals je kunt zien is de pagina nog helemaal leeg. Je gaat nu de producten erop zetten. 3. Klik op het tabblad Producten. 4. Sleep de productlijst naar het middenblok op je pagina 5. Bekijk de pagina jbs 53

55 Productlijst Basis 3 Filter maken en Productlijst plaatsen Je ziet nu op de pagina JBS zowel Happy Socks als JBS sokken. (dat is ook nog het geval op de pagina van Happy Socks ) Dat is natuurlijk niet de bedoeling. Je gaat een filter op de productlijst zetten, zodat alleen de JBS sokken zichtbaar zijn. 54

56 Productlijst Basis 3 Filter maken en Productlijst plaatsen 6. Klik op het potloodje bij de Productlijst. 7. Klik daarna op het tabblad Selecties Je komt nu terecht in het onderstaande dialoogvenster. In dit venster kun je een filter aanbrengen: hiermee kun je zelf bepalen wat je wel en niet wilt tonen uit je productlijst. 55

57 Productlijst Basis 3 Filter maken en Productlijst plaatsen 8. Klik onder Veld 1 op Selecteer een veld 9. Kies uit het drop -down-menu de optie Merk 10. Vul bij waarde JBS in en klik vervolgens op het groene vinkje. LET OP: het veld waarde is hoofdlettergevoelig! 11. Bekijk nu het resultaat. Als het goed is zie je alleen nog JBS sokken. 56

58 Productlijst Basis 3 Filter maken en Productlijst plaatsen Nog één klein dingetje: Je ziet nu dat de volgorde in de navigatiebalk in de header niet logisch is. Je wilt eerst de link naar je merken/producten tonen (daar verdien je tenslotte je geld mee) en daarna pas de optie informatie. Dit ga je leren aanpassen. 2 Navigatiebalk aanpassen 1. Klik in je Webshop dashboard op Pagina bewerken 2. Klik op Selecteer pagina en kies de Home pagina 57

59 Productlijst Basis 3 Filter maken en Productlijst plaatsen 3. Klik op Header en daarna op Tabbladen 4. Verander nu de volgorde van de tabbladen door JBS omhoog te slepen. 5. Bekijk het resultaat. 58

60 Productlijst Basis 3 Filter maken en Productlijst plaatsen Als laatste ga je nog een aantal oefeningen doen. Deze oefeningen kun je zelfstandig maken. Als je het niet meer weet scroll dan omhoog voor een geheugensteuntje. Als eerste staan er nog sokken van het merk JBS op de pagina van Happy socks. Ook willen we 2 extra pagina s gaan maken met een filter: dames en heren. 3 Opdrachten 1. Zorg m.b.v. een filter dat op de pagina van Happy Socks alleen dat merk te zien is. 2. Maak twee nieuwe pagina s: DAMES en HEREN 3. Zorg dat er op de pagina DAMES alleen damessokken staan. Daarna zorg je dat op de herenpagina alleen herensokken te zien zijn. 4. Zet in navigatie van de header de pagina s DAMES en HEREN voor de pagina Informatie. Einde cursus 59

61 Navigatie voor je klant optimaliseren

62 Navigatie voor je klant optimaliseren Wat leer je in dit hoofdstuk: - Een afbeelding op de homepagina linken aan een productpagina - Een productmenu maken - Een priceslider maken Inleiding Je klant wil je graag zo snel mogelijk op de juiste plaats in je webshop krijgen. Als je een mooie afbeelding (of call to action-button of banner) op je homepagina hebt staan, kun je deze afbeelding linken naar een andere pagina. Door deze link kan de gebruiker op de site gemakkelijk terechtkomen bij de artikelen waar hij naar op zoek is. Als een klant op een productpagina is, wil je hem helpen zoeken naar zijn voorkeuren: je kunt dat doen met behulp van een menu of een priceslider. 1 Afbeeldingen linken 1. Klik via Pagina selecteren op Home pagina 2. Klik op het potloodje bij de eerste afbeelding (de grote banner). Je ziet dat er nog geen verwijzing (URL) is ingesteld bij de afbeelding. Dat ga je nu doen 61

63 Navigatie voor je klant optimaliseren 3. Klik op het schuifje en zet hem op JA zodat je een verwijzing in kunt stellen 4. Klik rechtsboven op Toon webshop 5. Ga naar de Happy socks-pagina en kopieer de URL in het vak Verwijzing URL 6. Klik op het groene vinkje Als stap 5 en 6 niet werken, volg dan de onderstaande stappen - Kopieer de URL ZONDER - Plak de URL in het vakje met Verwijzing (URL) - LET OP: bij sommige instellingen herkent het systeem niet dat je een wijziging hebt aangebracht. - Typ een spatie (of iets anders) zodat er een groen vinkje tevoorschijn komt - Verwijder vervolgens weer het teken dat je hebt toegevoegd! - Klik vervolgens op het groene vinkje 7. Controleer nu in je webshop of de link correct werkt 8. Zorg dat de banners van DAMES, HEREN en JBS naar de juiste productpagina s linken 62

64 Navigatie voor je klant optimaliseren Als je kijkt op de HEREN-pagina van je webshop zie je daar JBS sokken en Happy Socks staan. Een winkel met veel producten biedt de klant om snel te selecteren op bijvoorbeeld MERK. Je gaat nu leren hoe je dat in kunt stellen. TIP: Voor winkels met weinig producten is een zoekfunctie vaak overbodig en kan juist als storend worden ervaren. 2 Productmenu maken Je gaat eerst de productlijst instellen en aangeven welke velden je in het menu eventueel wilt laten zien 1. Klik op de productlijst in het middenscherm 2. Klik vervolgens op Categorisering en daarna op Productmenu 63

65 Navigatie voor je klant optimaliseren 3. Vink vervolgens de velden Voor, Merk en Categorie aan 4. Klik op Alfabetisch sorteren 5. Klik op Wijzigingen publiceren De productlijst wordt nu opnieuw opgebouwd. 64

66 Navigatie voor je klant optimaliseren Let op: hiermee heb je alleen ingesteld dat je een menu kunt gebruiken. Om in je shop een menu te tonen zal je eerst moeten aangeven waar je het menu wilt hebben. Nu ben je klaar om een menu aan een pagina toe te voegen. 6. Ga naar de pagina Heren Je ziet op de pagina alleen nog maar een Productlijst (met het filter Heren) staan. 7. Sleep nu vanuit het tabblad Navigatie een productmenu naar de linker kolom van je pagina 8. Klik vervolgens op het potloodje 9. Vul het dialoogvenster in zoals voorgedaan in onderstaande afbeelding en bekijk daarna het resultaat 65

67 Navigatie voor je klant optimaliseren Een andere manier om je klanten een makkelijke selectie te laten maken is het instellen van een Prijs selector. Om de Prijs selector te kunnen gebruiken, ga je eerst de productlijst juist instellen. 3 Price slider maken 1. Klik op Productlijst en daarna op Productlijst selecteren 2. Selecteer de productlijst 3. Klik op Categorisering en daarna op Zoekvelden 4. Vink aan Uitgebreid zoeken 5. Zet de schuifjes op JA 66

68 Navigatie voor je klant optimaliseren 6. Zet Prijs op Minimum en maximum waarde 7. Vergeet niet om te klikken op Wijzigingen publiceren 8. Ga nu weer terug naar je pagina Heren 9. Sleep vanuit het tabblad Producten de Prijs selector in de linker kolom (boven het Productmenu) 67

69 Navigatie voor je klant optimaliseren 10. Klik vervolgens op het potloodje achter de Price selector 11. Stel de Price selector in zoals in onderstaande afbeelding 12. Klik daarna op het groene vinkje om de wijzigingen te bevestigen 13. Bekijk het resultaat en test of alles correct werkt. Eindresultaat: 68

70 Navigatie voor je klant optimaliseren 14. Maak op de pagina Happy Socks een Prijs selector en maak op deze pagina ook een productmenu met de keuze uit Dames of Heren. 15. Maak op de pagina Dames een Prijs selector en een productmenu met de keuze uit merken. Einde cursus 69

71 Informatie op de productpagina en de meer info-pagina

72 Informatie op de productpagina en de meer info-pagina Wat leer je in dit hoofdstuk: - Hoe je de productpagina instelt o De juiste informatie o De bestelknop - Hoe je het meerinfo-scherm instelt - Aanpassen database - Van/voor prijs instellen Inleiding Met je webshop wil je natuurlijk zoveel mogelijk producten verkopen. De informatie die je laat zien, is daarom erg belangrijk. Op de productpagina laat je zoveel mogelijk verschillende producten zien. Dus er is geen plaats voor heel veel informatie. De informatie die je laat zien moet de belangrijkste zaken tonen, zoals merk en prijs. Als een klant geïnteresseerd is en klikt op het product wordt het meerinfo-scherm zichtbaar. Op het meerinfo-scherm laat je alle informatie zien over dat product. Behalve als daar vertrouwelijke gegevens in staan zoals je leverancier of de inkoopprijs. In deze cursus ga je ontdekken hoe je kunt instellen dat de juiste informatie zichtbaar is op je productpagina en het meerinfo-scherm. Als je kijkt naar de productpagina HEREN zie je afbeeldingen van sokken met een korte omschrijving en de prijs. Wellicht zou je willen dat mensen direct de sokken kunnen bestellen, zonder dat ze eerst op de sok moeten klikken. Je gaat in de volgende oefening een bestelknop bij de afbeeldingen op de productpagina toevoegen. 71

73 Informatie op de productpagina en de meer info-pagina 1 Een bestelknop en meerinfo-knop toevoegen 18. Klik op Productlijst selecteren en selecteer de productlijst 19. Klik op Presentatie en daarna op Productoverzicht Het onderstaande scherm komt tevoorschijn 20. Zet de twee schuiven Bestelknop weergeven en Meerinfo link weergeven op JA 21. Bekijk het resultaat. 72

74 Informatie op de productpagina en de meer info-pagina 2 Instellingen op het meerinfo-scherm Je gaat nu de meerinfo-pagina bekijken 1. Klik op de meerinfo-link Je ziet nu nevenstaand scherm. Er staat al veel informatie. Wil je meer informatie uit je database laten zien of een wijziging aanbrengen dan kan dat. 2. Klik op de Meerinfo product Hier kun je instellen welke velden je wilt laten zien, welke info je waar wilt hebben en hoe groot je de afbeelding wilt hebben. Op het eerste tabblad kun je lay-out instellingen aangeven Op het tweede tabblad geef je aan welke velden je wilt tonen Let op: velden die in tabblad 1 zijn aangeven toon je niet nog een keer op het tweede tabblad (bijvoorbeeld omschrijving en een foto) 73

75 Informatie op de productpagina en de meer info-pagina Van/voor prijs instellen Let op bij het aanpassen van het formaat van een afbeelding! Als je de Breedte en de hoogte van de sokken aanpast, kan de sok vervormen. Als je dat wilt herstellen zet je de Breedte op (bijvoorbeeld) 500 en laat je de Hoogte leeg. Het systeem past dan automatisch de verhouding goed aan. Klik vervolgens op de vinkjes. Ook een webshop heeft aanbiedingen, maar in de productlijst is daar geen rekening mee gehouden. Je gaat de productlijst aanpassen zodat je wel een Van/Voor prijs kan laten zien aan de klant Daarvoor moet je een aantal stappen zetten: - Productlijst downloaden - Database aanpassen - Database uploaden (omdat je een kolom toevoegd kom je terecht in de wizard) - Productpagina en meerinfo-scherm aanpassen 3 Van-voor prijs instellen 1. Download de productlijst 2. Voeg een kolom Van toe: - Selecteer de rij Prijs - Klik op de lijstpijl van de knop Invoegen (of kies de rechtermuisknop) - Kies voor Bladkolommen invoegen 74

76 Informatie op de productpagina en de meer info-pagina 3. Vul de kolommen zoals je hieronder kunt zien Happy Socks: Van 7,95 Prijs 5,50 Bij de JBS sokken laat je de kolom Van leeg (deze sokken zijn niet in de aanbieding) 4. Sla de productlijst op Je wilt een productlijst uploaden omdat je deze hebt aangepast. Dan maken we onderscheid in 2 soorten wijzigingen: - Je wijzigt de inhoud van één of meerdere cellen - Je voegt één of meerdere kolommen toe Als je alleen de inhoud van één of meerdere cellen wijzigt, kun je de productlijst uploaden zonder extra moeite. Elke keer als je nieuwe kolommen in de productlijst zet, herkent het systeem dat er iets is aangepast. Je moet dan instellen hoe het systeem deze extra kolom kan gebruiken. Je wordt gelukkig automatisch geholpen, je komt in de wizard terecht. Deze wizard zal alle noodzakelijke vragen stellen zodat de nieuwe informatie op de juiste manier gebruikt kan worden in je webshop. 5. Upload de productlijst: Klik op Productlijst en daarna op Productlijst selecteren 6. Selecteer de productlijst 7. Klik vervolgens op Handmatig importeren 75

77 Informatie op de productpagina en de meer info-pagina 8. Selecteer de opgeslagen productlijst en klik op het groene pijltje Omdat je een nieuwe kolom hebt geplaatst in de productlijst krijg je een melding: 9. Klik op Productlijst wizard en daarna op het groene pijltje 76

78 Informatie op de productpagina en de meer info-pagina 10. Selecteer opnieuw de productlijst en geef aan dat je de bestaande productlijst wil verversen 11. Klik een aantal keer op de groene pijl totdat je bij stap 6 bent gekomen 12. Vink bij stap 6 (Productlijst) het vakje Van aan Hiermee zorg je ervoor dat Van prijs ook zichtbaar wordt 13. Klik door tot aan stap 10. De productlijst wordt opnieuw opgebouwd. 77

79 Informatie op de productpagina en de meer info-pagina 14. Bekijk het resultaat Als je nu het resultaat op de site bekijkt zie je dat er boven de vetgedrukte prijs nu een andere prijs staat: de Van prijs. Je ziet dat de prijs alleen zichtbaar is bij de Happy Socks. Bij JBS hebben we de velden in de database leeg gelaten. Toch wil je de klant laten zien dat het hier om een aanbieding gaat. (een van-prijs) Dat ga je nu instellen. 78

80 Informatie op de productpagina en de meer info-pagina 15. Ga naar de productlijst (Productlijst Productlijst selecteren Klikken op productlijst) Je gaat nu 3 dingen doen: - Het veld Van uitzetten op het meerinfo-scherm - Op het meerinfo-scherm het label Prijs vervangen met het woord Nú - Bij het productscherm voor de oude prijs het woord Van zetten 16. Klik op Presentatie en daarna op Meerinfo Product De Labels van het meerinfo-scherm worden weergegeven 17. Vink vervolgens het label van het veld Van uit 18. Klik op Veld labels en verander de veldnaam Prijs in Nú 19. Bekijk het resultaat 79

81 Informatie op de productpagina en de meer info-pagina Als laatste wil je de klant laten zien dat het een aanbieding gaat 20. Klik op Productoverzicht 21. Ga naar het tabblad Productlijstvelden 22. Zorg dat alleen de velden Van en Prijs zijn aangevinkt 23. Ga naar Productoverzicht en klik in het eerste tabblad op labels weergeven 80

82 Informatie op de productpagina en de meer info-pagina 24. Bekijk het eindresultaat Einde cursus 81

83 Informatie- pagina s

84 Informatiepagina s Wat leer je in dit hoofdstuk: - De noodzaak van informatiepagina s - Een lees meer blok te gebruiken - Een contactformulier te gebruiken Inleiding Met je webshop wil je uiteraard zoveel mogelijk verkopen. Daarvoor heb je één of meerdere productpagina s. Naast die productpagina s heb je andere pagina s nodig om de klant van benodigde informatie te voorzien. Pagina s die eigenlijk in geen enkele webshop mogen ontbreken zijn: - Contactpagina - Voorwaarden pagina - Veel gestelde vragen oftewel de FAQ-pagina - Over ons pagina De over ons-pagina kan zorgen voor de gunfactor en dus extra omzet. De contact- en voorwaarden pagina s zorgen voor vertrouwen en duidelijkheid bij de potentiële klant. Contactgegevens en de algemene voorwaarden zijn wettelijk verplicht. De FAQ-pagina kan een erg belangrijke pagina zijn: - De klant kan eventuele antwoorden op zijn mogelijke vragen vinden. Dit kan net de reden zijn om wel te gaan bestellen - Het scheelt tijd en moeite omdat ze daardoor waarschijnlijk minder contact hoeven op te nemen met jou 1 Informatiepagina s aanmaken 22. Klik op Pagina selecteren 23. Verwijder de pagina informatie die in je webshop staat 24. Voeg in je webshop toe - over ons - FAQ - contact 83

85 Informatiepagina s 2 Informatiepagina s vullen 1. Selecteer de over ons pagina 2. Sleep blok Tekst naar het midden van de pagina 3. Typ in deze teksteditor een aantrekkelijke tekst. Een goede over ons pagina hoeft niet moeilijk of uitgebreid te zijn, een goede over ons pagina moet wel persoonlijk zijn. In het boek staat een aantal tips over wat je in de tekst kunt vermelden en ook je docent Nederlands kan nuttige tips geven. Voorwaarden over ons-pagina: - Bevat minimaal 150 woorden - Bevat een leuke foto van jezelf - Zorg voor de gunfactor 84

86 Informatiepagina s 4. Selecteer de pagina Voorwaarden Wettelijke eis Standaard is er een voorwaarden pagina opgenomen in de webshop. Deze pagina is wettelijk verplicht. MyShop heeft in de voorwaardenpagina met de minimumeisen al voor je in je shop gezet. Let op: Mocht je in de toekomst een commerciële webshop runnen, dan zal je de voorwaarden zelf moeten bijhouden. Mocht je niet aan de wettelijke eisen voldoen dan kun je een flinke boete krijgen! 5. Personaliseer de pagina Voorwaarden Pas de tekst aan - Verander het woord fictief in de naam van jouw woonplaats - Verander in de opleverdatum van je webshop - Verander Voorbeeldshop in Modesokken Tip: Het gaat sneller als je de tekst in de editor kopieert en in Word plakt. In Word vervang je het woord Voorbeeldshop (staat er ruim 50 keer in) met Modesokken via de optie zoeken en vervangen. Zet de aangepaste tekst daarna weer terug zet in de editor 85

87 Informatiepagina s 6. Selecteer de pagina faq 7. Pas de FAQ-pagina aan: - Bedenk minimaal 5 vragen die je wil laten terugkomen op je FAQ-pagina - Sleep 5 keer het Lees meer blok in het midden van de pagina om de vragen én antwoorden in te voegen 8. Check het resultaat 86

88 Informatiepagina s 9. Selecteer de Contact-pagina 10. Pas de contactpagina aan: - Plaats een tekstblok in het midden - Plaats een tekstblok rechts - Plaats een contactblok in het midden 11. Typ in het middelste tekstblok: Vragen, opmerkingen, suggesties Neem contact op met Modesokken.nl Centreer de getypte tekst 12. Typ in het tekstblok rechts: Typ in dit blok de gegevens, zoals hiernaast aangegeven 13. Verander het contactblok en stel deze in zoals hieronder aangegeven 14. Bekijk alle resultaten Einde cursus 87

89 Header en Footer

90 Header en Footer Wat leer je in dit hoofdstuk: - De header aanpassen - De topheader aanpassen - De footer aanpassen Inleiding In elke webshop kun je via links in de header en footer op de diverse pagina s terecht komen. Op dit moment in de cursus is vooral de header een beetje een zooitje. Je hebt in opdracht diverse pagina s gemaakt en deze staan willekeurig in de header. Je gaat eerst deze rommel opruimen. 1 Header en topheader aanpassen 25. Klik op Home pagina 26. Klik daarna op Header en Tabbladen Je gaat als eerste een tabblad merken maken en de merken hieronder met een drop down-menu laten verschijnen Informatie is erg belangrijk, maar hoeft niet in de header te staan. De focus moet uiteraard op de verkoop liggen. Je gaat de links van de informatie verplaatsen naar de topheader en de footer. 89

91 Header en Footer 27. Verwijder alle informatietabbladen door op het prullebakje te klikken. (ter info: je verwijdert de informatiepagina s niet echt, je verwijdert alleen de link ernaar toe in de header) 28. Voeg het tabblad Merken toe en klik op het groene vinkje 29. In het volgende scherm hoef je niets te wijzigen. Klik op Opslaan 90

92 Header en Footer 30. Sleep Merken tot aan boven de merken JBS en Happy Socks 31. Schuif de merken JBS en Happy Socks naar rechts zoals hieronder. Je hebt nu een submenu gemaakt. 32. Bekijk het resultaat 33. Klik daarna op bedrijfsinformatie De informatiepagina s moeten wel gemakkelijk vindbaar zijn voor de klant. We gaan daarom links plaatsen in de topheader. 91

93 Header en Footer 9. Klik op Header en daarna op Verwijzingen 10. Voeg de tabbladen FAQ en Contact toe en sla de wijzigingen op Let op: Ze moeten verwijzen naar de bijbehorende pagina 92

94 Header en Footer De verwijzingen naar de FAQ- en de contactpagina staat nu in de topheader. 2 Footer aanpassen 1. Klik op Home pagina 2. Klik daarna op Footer en Verwijzingen 93

95 Header en Footer Je ziet hierboven alle Footer links staan. Footerlinks werken hetzelfde als de Header tabbladen. Je gaat een aantal aanpassingen doen in de Footer. Terugkijken mag! Als het goed is kun je onderstaande opdrachten zonder problemen zelfstandig uitvoeren. Zo niet dan kun je nog even terugkijken in deze cursus. 3. Verander een linktekst en link hem aan de juiste pagina: - Vervang het tabblad Falke voor JBS - Laat de link JBS linken naar de juiste pagina - Controleer of het correct werkt op je site 4. Link de volgende footerlinks naar de juiste pagina s: - Over ons - Contact - Veelgestelde vragen (aan de FAQ-pagina) 5. Laat de Facebook link verwijzen naar je eigen Facebook-pagina (Tip: Vink Pagina (eigen) aan en vul in Einde cursus 94

96 Bedrijfsgegevens, betaalmethode en instellen

97 Bedrijfsgegevens, betaalmethode en instellen Wat leer je in dit hoofdstuk: - Aanpassen van je bedrijfsgegevens - Instellen betaalmethode - Instellen van adressen voor: o Voorlopige bestelling o Orderbevestiging na betaling o Een als voorraad 0 is Inleiding Je gaat in deze handleiding leren waar je je persoonlijke gegevens kan toevoegen en later misschien wijzigen. - Contactpersoon - Bedrijfsinformatie - Contactinformatie Je gaat in dit hoofdstuk ook de betaalmethode instellen en instellen waar belangrijke mails naar toe worden gestuurd: - Op welke wijze kun je betalen - Wanneer een klant iets heeft besteld in jouw winkel, zal hij daar een bevestiging per van willen ontvangen. - Als webwinkelier wil je natuurlijk direct een mailtje ontvangen dat je iets verkocht hebt. Dan weet je dat je artikelen moet gaan opsturen. - Als de voorraad op is wil je ook een mail ontvangen. Dan weet je dat je bij moet bestellen. 1 Basisgegevens veranderen 34. Log in in je webwinkel via Voer je gebruikersnaam en wachtwoord in Je komt automatisch terecht op het dashboard van je winkel. Rechtsboven in de hoek zie je het icoontje (3 tandwielen) van de algemene instellingen. 96

98 Bedrijfsgegevens, betaalmethode en instellen 36. Klik op het tandwiel-icoontje 37. Klik daarna op bedrijfsinformatie 38. Vul in bovenstaand venster zo veel mogelijk velden in. Je hebt waarschijnlijk geen KvK- en/of BTW-nummer of een fax: deze velden laat je leeg 97

99 Bedrijfsgegevens, betaalmethode en instellen s je alle gegevens hebt ingevuld, klik dan rechtsboven op de knop Alles opslaan. e gegevens worden nu opgeslagen In deze opdracht ga je instellen waar de diverse s naar toe worden gestuurd. 2 Instellen van betaal methode en adressen 1. Klik linksboven op je shopnummer. Er ontvouwt zich een menu: het webshop dashboard. Hier staan de algemene instellingen van je webshop. 2. Klik op de menuoptie Algemeen 3. Klik daarna op beheer Zeker als je een kleine webshop hebt die maar af en toe iets verkoopt is het erg belangrijk dat je een krijgt bij een verkoop. Je weet dan dat je actie moet ondernemen. (o.a. betaling controleren, order picken, inpakken, opsturen ) Bij beheer is het mogelijk om aan te geven welke s je wilt ontvangen en op welk adres. Uiteraard kun je dit in de toekomst indien nodig nog aanpassen. 98

100 Bedrijfsgegevens, betaalmethode en instellen 1 Jouw adres Jouw adres Jouw adres Jouw adres Dit is je voor algemeen gebruik. 2. Nadat je iets hebt veranderd in de balk zul je altijd op de groene moeten klikken: pas dan zal de verandering worden opgeslagen. 3. Voorlopige bestelling: je krijgt een nog voordat de klant betaald heeft. Zo kun je weten of de klant afhaakt tijdens het betaalproces. 4. Bestelbevestiging: Hier vul je een eigen adres in. Je krijgt een bericht wanneer de bestelling definitief is. 5. Bestelbevestiging klant (afzender): Het adres dat je hier invult is zichtbaar voor de klant. Zou hij willen antwoorden op je dan komt op dit adres de reactie binnen. (het zou zo kunnen zijn dat je voor de bestelbevestiging verkoop@jouwwinkelnaam.nl gebruikt en bij bestelbevestiging klant info@jouwwinkelnaam.nl) 6. Bestelbevestiging winkel (afzender): Dit adres wordt gebruikt als afzender van de bestelbevestiging die naar de winkeleigenaar wordt gestuurd. Als klanten adressen zoals die van yahoo.com of hotmail.com gebruiken, dan kan het zijn dat spam-filters deze tegenhouden. Een adres dat hier wordt ingevuld kan dat voorkomen. 99

101 Bedrijfsgegevens, betaalmethode en instellen 7. Na betaling: Als je gebruik maakt van een payment-provider (ideal, PayPal, etc.) kun je een adres ingeven zodat je bericht krijgt wanneer er betaald is. 8. Wanneer voorraad nul wordt: Dit is alleen van toepassing als je gebruik gaat maken van het voorraadsysteem. Je krijgt dan automatisch een wanneer een bepaald product niet meer op voorraad is. 9. Je kan bij 3 adressen een opties aangeven: wil je wel of juist geen wilt ontvangen als de situatie zich voordoet. Deze optie is bij 9 de enige die interessant kan zijn in de les: je krijgt dan een bericht als de voorraad van een bepaald product nul wordt oftewel op is. 4. Vul bij de punten 1, 4, 6 en 8 je eigen adres in 5. Zet achter punt 8 de optie op JA In een webshop kun je vaak op meerdere manieren betalen. De meest bekende zijn: - Achteraf met bv. Billink of Afterpay - ideal - PayPall - Overschrijven Aangezien je een oefensite aan het maken bent ga je het betalen instellen met de optie overschrijven. 6. Klik op Bestelproces en daarna op Betaalopties 7. Klik op het plusje na Voeg betaalmethode toe 100

102 Bedrijfsgegevens, betaalmethode en instellen 8. Typ bij titel Overschrijven 9. Selecteer bij Betaaldienst de optie Handmatig betalen 10. Kies bij betaalmethode Standaard Er verschijnt onderstaand dialoogvenster 11. Typ onderstaande tekst na of verzin zelf een tekst 12. Klik op Update 101

103 Bedrijfsgegevens, betaalmethode en instellen Test 1. Vraag je buurman/vrouw nu een bestelling te doen in jouw shop. Laat hem/haar kiezen als betaalmethode Overschrijven Als het goed is krijg je nu een bevestigingsmail binnen! 2. Controleer of er een bevestigingsmail in je inbox van je mailaccount zit. Einde cursus 102

104 Bestellen en formulieren

105 Bestellen en formulieren Wat leer je in dit hoofdstuk: - Waar je het orderbeheer vindt - Wat de functie is van orderbeheer - Welke formulieren het systeem aanmaakt: o Voorlopige bestelling o Bestelbevestiging o Factuur o Pakbon - Waar de formulieren voor dienen - Hoe je het overzichtsscherm Orderbeheer kan aanpassen - Hoe je een bestelling afhandelt in het systeem Inleiding Als er in je winkel een bestelling wordt geplaatst dan maakt het systeem van myshop automatisch een aantal formulieren aan in het orderbeheer. We gaan deze formulieren bekijken en geven het nut hiervan aan. Om deze opdracht uit te kunnen voeren ga je eerst een bestelling plaatsen in je eigen winkel. Dit zal je vaker moeten doen om te controleren of de aanpassingen die je hebt gedaan ook werken. Test met je eigen gegevens Het is goed om de bestelprocedure zelf te testen. Plaats daarom af en toe een bestelling in je eigen winkel. Vul als klant je eigen gegevens in! Zo kun je precies zien wat klanten ontvangen. Je kan nu controleren of er fouten zitten in je bestelprocedure. Mogelijke fouten: - Een klant krijgt geen - Er zitten taalfouten in de - De voorraad wordt niet automatisch aangepast - Enz. De fouten die je ontdekt kun je daarna herstellen 104

106 Bestellen en formulieren 1 Bestellen Plaats een bestelling in je eigen winkel. 1. Ga naar je webshop - Typ in de adresbalk shopnummer.mijnwinkel.nl of - Klik op het oog als je in je backoffice bent ingelogd 2. Bestel 3 artikelen in je eigen webshop. 3. Vul je eigen gegevens in en kies voor de betaalmethode Overschrijven. Als je bestelling succesvol is gedaan en jij de opdracht instellen hebt uitgevoerd, krijg je nu verschillende s binnen: Als consument - moet je een bestelbevestiging krijgen Als webwinkelier - copy bestelbevestiging. Let op: Je kan ook instellen dat je een voorlopige bestelbevestiging in je mailbox krijgt. Maar als je de opdracht instellen exact hebt uitgevoerd krijg je deze niet Controleer in je inbox of je twee s hebt ontvangen 2. - Indien je alleen de voor de klant hebt ontvangen: Herhaal de cursus instellen. Stel daar (zonder typefouten) het juiste adres in. - Indien je helemaal geen hebt ontvangen: Doe dan een nieuwe bestelling. Waarschijnlijk heb je de bestelling niet afgerond of een andere fout gemaakt. 105

107 Bestellen en formulieren Nu je in je mailbox een kopie van de bestelling hebt ontvangen, kun je de order klaar maken voor verzending en de bijbehorende formulieren printen. 3 Formulieren 1. Indien je nog niet bent ingelogd in de backoffice van je webshop: log in via 2. Klik rechtsboven in de balk op orderbeheer. Nadat je op de knop orderbeheer hebt geklikt verschijnt het volgende scherm: overzicht orderbeheer. Je komt nu terecht in de orderhistorie. Let op: Afhankelijk van jouw orders kan dit scherm er afwijkend uitzien. 106

108 Bestellen en formulieren 3. Klik op de knop Toon acties De volgende opties zijn nu beschikbaar: 1. Bestelbevestiging zoals deze is verstuurd naar de klant 2. Factuur: soort kassabon van de bestelling 3. Pakbon: niet verplicht om mee te verzenden, maar de pakbon is wel heel handig om de bestelling gereed te maken 4. Terugbetaling, als de klant zijn artikelen retour heeft gestuurd 5. Order verwijderen: hier heb je de mogelijkheid om de bestelling te verwijderen Belastingdienst De belastingdienst wil in je administratie een overzicht van opeenvolgende orders zien. Dus het is niet slim om zomaar orders te verwijderen! 4 Formulieren printen 1. Open de bestelbevestiging in het scherm Orderbeheer/overzicht Vergelijk deze met de mail die je (als klant) hebt gekregen. Zijn er verschillen? 2. Maak een print of printscreen van de bestelbevestiging, de pakbon en de factuur. (vraag aan je docent wat zijn voorkeur heeft) 107

109 Bestellen en formulieren Aanpassen van scherm orderbeheer In het overzicht van het scherm orderbeheer zie je een aantal velden die myshop standaard zichtbaar maakt. Wat ons betreft ontbreekt er een veld, namelijk de klantnaam. Voor een bestelling kan het heel handig zijn dat je in je orderhistorie zou kunnen zien wat de naam van de klant is. Denk hierbij aan een dubbele bestelling of een klant die in het verleden niet heeft betaald. 5 Toevoegen kolom in orderbeheer 1. Ga hiervoor naar de balk boven Order. Klik op het tabblad Kolommen in overzicht In deze opdracht ga je zorgen dat de naam van je opdrachtgever zichtbaar wordt in het overzichtsscherm. 2. Zet in bovenstaand scherm onder Klantnaam en Prijs de keuze op JA 108

110 Bestellen en formulieren Je orderscherm zal nu ook de naam van je klant en de factuurprijs laten zien. Wat doe je als een order is uitgeleverd/afgehandeld Om ervoor te zorgen dat je een bestelling niet twee keer gaat uitleveren, kun je aangeven in de orderhistorie dat de bestelling is uitgeleverd. 6 Afhandelen van een bestelling 1. Ga naar het scherm Orderbeheer 2. Vink hiervoor het vakje aan op de regel van de bestelling die je wilt afhandelen 3. Ga daarna naar de knop Kies actie. 109

111 Bestellen en formulieren 4. Klik in bovenstaand menu op Uitgeleverd en daarna op Uitvoeren De status van de bestelling is nu veranderd in Uitgeleverd. Op deze manier kan je fouten voorkomen. Zeker als je veel bestellingen hebt gehad kun je op deze manier het overzicht bewaren. Einde cursus 110