Foto s uploaden, Productlijst maken en met de wizard Uploaden naar MyShop Inleiding Je hebt inmiddels een mooie homepagina gemaakt. Met een passende skin, een mooi logo en uitnodigende plaatjes en slogans. Nu ga je in enkele producten in je webshop zetten. Je gaat in de serie productpagina maken leren hoe je producten en productfoto s toevoegt aan een pagina in je webwinkel. De volgende onderdelen maken deel uit van deze cursus: - Deel 0: Introductie - Deel 1: Foto s uploaden - Deel 2: Productlijst maken - Deel 3: Nieuwe productlijst uploaden met de wizard - Deel 4: Wijzigingen in je productlijst aanbrengen Introductie Wat leer je in de introductie: - Welke stappen er nodig zijn om een productpagina te maken - Wat het verschil is tussen een productpagina en het meer info-scherm
Product- en meer info-pagina Dit is de product-pagina: Hier zie foto s van meerdere producten. Je kunt zelf instellen of dat van je hele assortiment is of een deel daarvan zoals een productpagina van één merk of een sale-pagina. Je kunt zelf aangeven welke informatie uit je database je onder de foto s wilt laten zien. In principe kies je voor basisinformatie van elk product zodat de potentiele klant de belangrijkste informatie in één oogopslag kan vinden. De bezoeker kan natuurlijk direct bestellen, maar kan ook aanvullende informatie opvragen met de meer info-knop Meestal kun je aan de linkerkant navigeren naar andere productpagina s. Dit is de meer info-pagina: Als je op de knop meer info klikt krijgt de potentiele klant aanvullende informatie (zoals in dit geval wasvoorschriften, wasadvies, enz.) Onderaan staat uiteraard de bestelknop.
Informatie Alle Informatie en foto s van zowel de productpagina als de meer info-pagina komen uit een database. We nemen je stap voor stap mee hoe je eerst zelf een database maakt. Daarna ga je zelf een productpagina en het meer info-scherm inrichten. Oefenbestanden Je kunt gebruik maken van bestanden op de website van www.webshopheld.nl om te oefenen. Uiteraard mag je tijdens de oefening ook gebruik maken van je eigen foto s en productgegevens. Stap 1: foto s uploaden Wat leer je in dit hoofdstuk: - Wat belangrijk is bij (product)foto s - Meerdere foto s tegelijk uploaden naar MyShop Inleiding We starten met het uploaden van foto s naar MyShop. Misschien heb je nog geen foto s van je producten. Dat is geen probleem. We hebben al een aantal foto s voor je klaargezet op de webpagina van de webshopheld. Het maken van foto s behandelen we niet in dit hoofdstuk.
Eisen aan een goede foto voor MyShop 1. Maak duidelijke foto s. Je klant kan het product niet vastpakken voelen of ruiken. Een goede foto is dus erg belangrijk. 2. Geef de foto s een logische en duidelijke naam. Dit doe je voor jezelf, maar in de toekomst ook voor de vindbaarheid in Google. 3. Als je mooie foto s hebt gemaakt maak de foto s dan geschikt voor het internet: de foto s mogen niet te groot zijn i.v.m. de laadtijd van je webpagina. Een afbeelding mag maximaal 256 Kb groot zijn! Let op: zijn de foto s te groot, dan worden ze niet geladen! Programma s zoals Photoshop en Illustrator maken de foto s automatisch kleiner als je kiest voor opslaan voor het web. 4. Als je veel productfoto s wilt uploaden is het handig de foto s in een zip-bestand te zetten. Dan upload je alle foto s tegelijk. Een Zip-bestand mag niet groter zijn dan 3 Mb. Een zip-bestand maak je eenvoudig zelf: - selecteer de gewenste foto of foto s in de Windows verkenner - klik met de rechtermuisknop op de gewenste bestanden - kiezen voor kopiëren naar/ gecomprimeerde (gezipte) map
1 1. Maak van je foto s een zip-bestand of download het bestand happy socks.zip Zet dit bestand op je USB-stick of in de map Mijn documenten. Je kunt dit zip-bestand vinden op de website www.webshopheld.nl op de pagina Webshop bouwen met oefenbestanden. 2. Upload nu het zip-bestand met de productfoto s naar je webshop - Klik in je winkel op: Producten/ Productplaatjes/ Bladeren. - Navigeer naar de plaats waar je het bestand hebt opgeslagen - Selecteer nu het zip-bestand happy socks.zip - Klik op Openen.
De afbeeldingen staan nu online (op het internet). Als je wilt weten waar dan klik je op bekijk. Je ziet dan het webadres van het plaatje: Dit webadres heb je nodig in je database! Werkwijze één foto uploaden: 1. Klik in je winkel op: Producten/ Productplaatjes/ bladeren. 2. Navigeer naar het bestand en selecteer de gewenste foto 3. Klik op openen De foto wordt geüpload. Werkwijze meerdere foto s uploaden: 1. Maak een zipbestand van je foto s 2. Klik in je winkel op: Producten/ Productplaatjes/ bladeren. 3. Navigeer naar het bestand en selecteer het zip-bestand 4. Klik op openen De foto s uit het zip-bestand worden nu tegelijk geüpload.
stap 2: een productlijst maken Wat leer je in dit hoofdstuk: - Een productlijst maken in Excel - Belangrijke info over de productlijst - Een drop down menu maken Inleiding Eindresultaat oefening: een productlijst We hebben in stap 1 de benodigde afbeeldingen op het internet gezet. Het is nu tijd om de productlijst te gaan maken met behulp van een spreadsheetprogramma. We gaan nu de productlijst maken in Excel. 2 1. Open het programma Excel 2. Open een lege werkmap 3. Sla het lege document op. Plaats het bestand op je USB-stick en kies een logische naam, bijvoorbeeld: happysockslijst
Maak nu velden aanmaken in onze happy-socks productlijst. 4. Neem alle velden correct over uit de tabel hiernaast. Typ in cel A1 het woord Artikelnummer Typ in cel B1 het woorden Voor {domain} enz. Sluit af in cel S1 met de Prijs Handig: Knippen en plakken kan vanuit dit document! Dat scheelt typewerk Resultaat: Je hebt nu de kolommen benoemd. Als het goed ziet je Excel-sheet er uit als in onderstaande schermafdruk.. Artikelnummer Voor {domain} Merk {domain} Categorie {domain} Kleur EAN-code Foto groot {picture} Foto klein {picture} Omschrijving Maat Drop down menu Productomschrijving Materiaal Bijzonderheden Wasvoorschriften Wasadvies Verpakt per Voorraad {number} Prijs Belangrijk om te weten: 1. De artikellijst MOET beginnen met het artikelnummer. Daarna werk je van de grootste groep (Voor -> Merk -> Categorie -> Kleur) naar de steeds kleinere groep. 2. Je mag geen kolommen hebben zonder naam en alle kolommen moeten ook verschillende (unieke) namen hebben! Doe je dat niet goed, dan geeft MyShop een foutmelding als je de lijst gaat uploaden! 3. We maken in deze oefening een productpagina met daarop sokken. De kolommen maat en wasadvies passen daarbij. Uiteraard kun je zelf kolomnamen toevoegen die passen bij je eigen producten. Bijv. gewicht, bouwjaar, hoogte of omtrek. 4. Denk na over de volgorde, deze volgorde is ook de volgorde in het meer info-scherm. Eindig met de prijs! 5. Zorg dat je ook een kolom opneemt voor kleine foto s en grote foto s. Daarnaast kun je nog een veel andere informatie aangeven. 6. Het is niet erg als je in de database een deel van de tekst die je getypt hebt niet kunt lezen.
5. Je gaat nu de 1 e regel in de productlijst vullen. Typ nu onderstaande gegevens over in je productlijst. Begin in cel A2. Bespaar jezelf typewerk: kopieer grote lappen tekst. Artikelnummer 10001 Voor {domain} Merk {domain} Categorie {domain} Kleur Dames Happy Socks Vrolijke sok Multi EAN-code 123456789 (zoek in het systeem de locatie van de grote foto op: http://...) - Ga in je webbrowser naar je Webwinkel in Myshop Foto groot {picture} - Klik bij producten/productplaatjes op juiste productplaatje - Kopieer de Url en plak deze in je productlijst Foto klein {picture} (zoek in het systeem de locatie van de kleine foto op: http://...) Omschrijving Triangle Maat 36-40 Drop down menu 1 Productomschrijving Happy Socks zijn lekker zacht en van hoge kwaliteit. Deze vrolijke sokken zijn voorzien van een Triangle motief. Deze sokken van Happy Socks zijn afgewerkt met een brede ribgebreide band. De sokken zijn gemaakt van 80% gekamd katoen. Het kammen van katoen zorgt ervoor dat de korte draadjes worden verwijderd, waardoor de sok minder snel gaat pluizen. Materiaal Bijzonderheden Wasvoorschriften Wasadvies Verpakt per Voorraad {number} 2 Prijs 7,95 80% katoen, 17% polyamide, 3% elasthan niet drogen in droogtrommel, bleken niet mogelijk, niet strijken, niet chemisch reinigen 30 graden 1 paar Resultaat:
De tweede sok (artikelnummer 10002) die je in je productlijst zet is heeft precies dezelfde informatie, alleen heeft deze sok een grotere maat, namelijk 40-43. Ook blijven de foto s hetzelfde! Alleen de voorraad kan afwijken, dat ligt uiteraard aan de inkopen. We zetten de voorraad voor elke sok op 2 stuks. 6. Kopieer nu de regel in je productlijst en verander alleen - het artikelnummer in 10002 - de maat in 40-43 De rest blijft hetzelfde! De derde sok (artikelnr. 10003) heeft als omschrijving: Faded diamonds. Veel is hetzelfde als bij de eerste sok. Toch moet je hier meer veranderen: - Artikelnummer Elke sok heeft een uniek nummer - Voor {domain} Het is een herensok - Locatie van de foto s Hier hoort uiteraard een andere foto - Omschrijving De sok heeft een ander patroon - Maat Deze sok heeft een andere maat - Drop down menu De uitleg staat op de volgende pagina (- Eventueel de voorraad) Artikelnummer 10003 Voor {domain} Merk {domain} Categorie {domain} Kleur Heren Happy Socks Vrolijke sok Multi EAN-code 123456789 Foto groot {picture} (zoek in het systeem de locatie van de grote foto op: http://...) Foto klein {picture} Omschrijving (zoek in het systeem de locatie van de kleine foto op: http://...) Faded Diamonds Maat 40-43 Drop down menu 2 Productomschrijving Happy Socks zijn lekker zacht en van hoge kwaliteit. Deze vrolijke sokken zijn. Faded diamonds motief.enz. 7. Voeg nu artikelnummer 10003 toe aan de database.
Drop down menu Er zijn veel artikelen die nagenoeg hetzelfde zijn, maar alleen (zoals bij sokken, schoenen of een fotolijst) een andere maat hebben. Maak dan gebruik van het drop down menu. Je voorkomt hiermee dat exact dezelfde productfoto s in je Webshop naast elkaar zichtbaar zijn. Zet in deze kolom bij de identieke producten (maar in dit geval met een andere maat) hetzelfde cijfer. We raden je niet aan om het drop down menu in te zetten bij een identiek artikel met een andere kleur. Klanten willen graag zien hoe een artikel eruit ziet, kortom welke kleur rood een artikel bijvoorbeeld heeft. Gebruik je geen drop down menu: laat dan de kolom leeg of haal de kolom weg. Maak niet de fout om overal hetzelfde getal neer te zetten. Dan komt er op je productpagina maar 1 artikel, met een flink drop down menu!
8. Vul nu de rest van de werkmap aan met de overige sokken. (minimaal 12) Maak daarbij handig gebruik van de functionaliteit van Excel: - gebruik de vulgreep bij het kopiëren van tekst - gebruik de vulgreep bij het doornummeren van artikelnummers 9. Sla je bestand als happysocks_productlijst op je USB-stick
Werkwijze productlijst maken: 1. Open een lege Excel-map 2. Start in cel A1 met het benoemen van de koppen Regels bij het benoemen van de koppen - In kolom A MOET het artikelnummer - Laat geen kolommen leeg - Elke kolom heeft een unieke naam - Eindig met de kolom prijs 3. Vul de database met alle informatie van je producten 4. Sla het bestand op Gefeliciteerd. Je hebt nu een productlijst gemaakt van minimaal 10 producten. Ga verder met stap 3.
Stap 3: Nieuwe productlijst uploaden met de Wizard Wat leer je in dit hoofdstuk: - Een productlijst importeren via de 9 stappen van de wizard - De productlijst in een pagina zetten - Plaatjes zichtbaar maken op de productpagina en het meer info-scherm Eindresultaat: een productpagina en een meer info-scherm met drop down menu
Inleiding Je hebt in stap 2 een werkbare productlijst gemaakt die je kunt uploaden in het systeem van MyShop. 1 Volg nu de stappen om een nieuwe productlijst te uploaden 1. Klik daarvoor in het systeem op Producten in de linkerkolom van MyShop en klik vervolgens op Nieuwe productlijst 2. Klik op bladeren en selecteer de happysocks_ productlijst op je USB-stick. 3. Klik op volgende Je komt nu terecht in de wizard. Je gaat die nu doorlopen
4. Doorloop nu de stappen in de wizard STAP 1 STAP 2 Hier worden automatisch kolomtypes aangegeven. Controleer of alle kolomtypes juist zijn. Als je de lijst goed hebt gemaakt kloppen de gegevens en klik je op Volgende Je kiest de kolom die kloppen bij de omschrijvingen Pas eventueel de kolommen hier aan. Kies bij voorraadbeheer voor Ja, binnen mijnwinkel Je zet in je productlijst ook je voorraad. Als je kiest voor voorraadbeheer binnen mijn winkel zal MyShop een product wat is uitverkocht uit je assortiment halen. Zo heb je geen klanten die je achteraf moet teleurstellen! STAP 3 We hebben nu geen bijbehorende producten, klik op Volgende STAP 4 Selecteer: Ja, ik wil een menu Stel nu alles in zoals in onderstaande schermafdruk
STAP 5 Laat hier snel zoeken staan en klik op volgende STAP 6 Selecteer de onderdelen die je op de overzichtspagina wil laten zien. Bedenk dat je niet te veel info geeft op deze pagina, dus kies alleen de noodzakelijke onderdelen.
STAP 7 Doe hetzelfde voor de meer-info pagina s. Hier kun je natuurlijk wel de volledige info geven
STAP 8 Kies hier voor - ja, ik wil keuzelijsten - op meer infoscherm en productlijst - drop down menu - Maat STAP 9, Ja, ik wil een bestelknop, zowel op de productenlijst als meerinfo scherm
De Wizard is nu doorlopen.je bent er bijna! 2 1. Maak nu een nieuwe pagina aan met de naam Happy Socks 2. Ga naar blokken, klik op het plusje in de middelste kolom 3. Kies productlijst en klik op ok 4. Kies de happysocks_productlijst en klik op ok 5. Bekijk de pagina Er verschijnen geen productplaatjes! 6. Ga in het menu van MyShop naar je Productlijst en klik op Productlijst:
7. Verander in het tabblad Layout instellingen: - Kies als foto Foto klein - druk op Ok. Je foto s worden door deze actie zichtbaar op de productpagina Happy Socks 8. Verander in het tabblad instellingen ook de kop van de foto (van artikelnummer) in omschrijving Nu staat er boven de productfoto de omschrijving ipv het artikelnummer Je kunt later nog diverse instellingen aanpassen: - als je iets niet goed hebt gedaan in de Wizard - je bent niet tevreden met het resultaat: 9. Laat het resultaat aan je docent zien. Als hij akkoord is met je productpagina, kun je aan de slag met je eigen productlijst.