Theme Conversion 1 Laatste update: 2016/11/22 dmws
Inhoudsopgave Installeren van Theme Conversion... 2 Logo instellingen... 3 Logo uploaden... 7 Logo size... 8 Logo mobile menu... 9 Favicon uploaden... 10 Typografie... 11 Topbar... 14 Main header... 18 Mobile menu kleuren... 20 USP s header... 23 Header shopping cart... 25 Menu s... 27 Horizontaal menu: opties... 30 Verticaal menu: opties... 33 Extra horizontaal menu... 36 Toon in menu opties... 38 Highlight kleuren... 39 Productview opties... 45 Opties productweergaves... 48 Hero image... 53 Afmetingen Hero afbeeldingen... 56 Slide maken en ontwerpen... 58 Instellingen slider... 60 Banners homepage... 65 Banners beheren... 70 Afmetingen banners... 76 Homepage instellingen... 78 Sidebar... 83
USP s sidebar... 88 Reviews / feedback... 90 Quickview (snel bekijken)... 92 Product aantallen... 93 Collectiepagina... 94 Toon grid/list optie... 99 Knop alles tegelijk in winkelwagen... 101 Toon content boven of onder... 102 Filters horizontaal of verticaal... 104 Productpagina opties... 105 Productpagina timer... 109 Footer... 112 Vertalingen... 117 Vertalingen eigen zinnen (meertalig)... 128
Installeren van Theme Conversion Voor het installeren van het theme. Ga je naar instellingen design personaliseer thema. Klik hier (als je wilt) op een preset naar keuze. Een preset zijn allerlei settings die wij alvast voor je gedaan hebben, dat maakt het vullen wat leuker en zo zie je meteen meer wat er allemaal mogelijk is binnen het Theme Conversion. Het thema heeft vier presets: B2B, Fashion, Food en Living. Kies een preset, je kunt de * presets bekijken op Dmwsthemes.nl. Pagina 2 van 130
Logo instellingen Het logo uploaden in je webshop is bijna nét zo makkelijk als een mailtje openen. Ga naar design personaliseer thema en ga naar LOGO. Upload hier je normale logo met een afmeting tot max 600 px breed. p(banner tip). Gebruik een.png file met een transparante achtergrond voor het beste effect. Pagina 3 van 130
Logo size Dit is de grootte van je logo. Aan de hand van de vorm van je logo zul je hier even moeten spelen wat voor jouw logo het beste uitkomt. Je hebt 3 sizes: 1. Small 2. Medium 3. Large * Gratis logo bewerking software? Probeer https://www.gimp.org/. Pagina 4 van 130
Logo mobile menu Klik op browse en upload je logo. Dit logo wordt getoond in je mobiele menu. Als je dus kiest voor een donker mobiel menu, zul je hier een licht logo moeten uploaden. Gebruik altijd een.png file met transparante achtergrond. Pagina 5 van 130
Favicon uploaden Klik op browse en upload hier je favicon. Een favicon is die kleine afbeelding die je boven in je browser ziet. De afmeting van de favicon is 32 32 pixels en is een.png file met transparante achtergrond Pagina 6 van 130
Logo uploaden Het logo uploaden in je webshop is bijna nét zo makkelijk als een mailtje openen. Ga naar design personaliseer thema en ga naar LOGO. Upload hier je normale logo met een afmeting tot max 600 px breed. Pagina 7 van 130
Logo size Dit is de grootte van je logo. Aan de hand van de vorm van je logo zul je hier even moeten spelen wat voor jouw logo het beste uitkomt. Je hebt 3 sizes: 1. Small 2. Medium 3. Large * Gratis logo bewerking software? Probeer https://www.gimp.org/. Pagina 8 van 130
Logo mobile menu Klik op browse en upload je logo. Dit logo wordt getoond in je mobiele menu. Als je dus kiest voor een donker mobiel menu, zul je hier een licht logo moeten uploaden. Gebruik altijd een.png file met transparante achtergrond. Pagina 9 van 130
Favicon uploaden Klik op browse en upload hier je favicon. Een favicon is die kleine afbeelding die je boven in je browser ziet. De afmeting van de favicon is 32 32 pixels en is een.png file met transparante achtergrond Dit zijn favicons: Pagina 10 van 130
Typografie De typografie van je webshop vormt de kern van je design. Gebruik heldere, mooie letters die iedereen makkelijk kan lezen. Kies één font voor je titels en één font voor je bodytekst, de hele collectie kun je bekijken op https://fonts.google.com/ * Bodytekst is alle platte tekst in je webshop Ga naar design personaliseer thema en ga naar TYPOGRAPHY. Wanneer je een font wilt kiezen dan heb je een gevarieerde keuze uit de diverse Google fonts. Deze zijn makkelijk aan te passen door in het dropdown menu een keuze te maken. Pagina 11 van 130
Headings / Titles Lettertypes (fonts) Kies hier de lettertypes voor alle titels in je webshop. Voorbeeld van een titel: Kleur headings / titles Lettertypes Kies hier de kleur van je headings / lettertypes Kies hier de kleur van alle titels in je webshop. Font grootte Ga naar design personaliseer thema en ga naar TYPOGRAPHY. Om makkelijk de grootte van de tekst aan te passen. Dan ga je naar body font size gaat dan kan je daar het font groter maken door een grotere corps te kiezen. Pagina 12 van 130
* De grootte van een lettertype op het internet heet corps Bij DMWS blijf je leren. Pagina 13 van 130
Topbar Dit is de bovenste balk van je webshop. Deze heeft de volgende instellingen. Topbar color Dit is de achtergrondkleur van je topbar. Topbar tekst kleur Dit is een mooie. Kies licht voor een witte kleur, kies donker als je een lichte top bar hebt. Dan pakt hij automatisch de kleur die is ingesteld voor de bodytekst. Invulling topbar: Pagina 14 van 130
1. Telefoonnummer Als je je telefoonnummer duidelijk in je webshop wilt hebben, zodat bezoekers je direct kunnen bellen, vul dan hier je telefoonnummer in. Wil je dit niet? Laat het veld dan leeg en het wordt niet getoond. Pagina 15 van 130
2. USP in de topbar Dit is een stukje tekst *dat je voor alles kunt gebruiken. Pas het gemakkelijk aan. Als je het *niet invult, wordt het niet getoond. 3. Toon vergelijken Lightspeed biedt bezoekers de functie om producten te kunnen vergelijken. Zet dit aan als je wilt dat bezoekers direct naar hun vergelijk pagina kunnen. 4. Toon valuta s Deze functie zorgt ervoor dat de valuta s worden getoond in je shop. 1. aan toont overal een teken voor elke prijs, uit toont geen teken voor de prijs. 2. Heb je meerdere valuta s ingesteld? Dan toont hij hier de actieve valuta s. 3. Laat het gewoon aanstaan als je Eurotekens wilt tonen. 4. Hij toont uiteraard geen valuta s die niet zijn ingesteld in de backend. Talen: Talen worden automatisch getoond als je deze hebt ingesteld in de backend van Lightspeed. Pagina 16 van 130
Pagina 17 van 130
Main header 1. Header kleur Verander hier de achtergrondkleur van je header. Tip: een lichtgrijze kleur of wit is altijd goed. Zorg dat je logo in een goed contrast staat met je achtergrondkleur. 2. Menukleur en menu tekstkleur Als je het *horizontale menu *gebruikt, bepaal dan hier de kleuren ervan. Zorg dat het goed leesbaar blijft. Pagina 18 van 130
3. Keurmerk uploaden In de praktijk blijkt het altijd een probleem te zijn: het keurmerk uploaden. Welke versie, goede kwaliteit, goede formaat, dat is nu verleden tijd. Wij hebben de keurmerken voor je op een rijtje gezet, je hoeft hem alleen maar te selecteren. Hierna link je het naar de juiste URL (die van jouw bedrijf op de keurmerkwebsite. Wil je geen keurmerk tonen of je bent nergens aangesloten? Kies er dan voor om geen/ * none te selecteren. Dan wordt er niets getoond. Of een eigen afbeelding uploaden Heb je zelf een keurmerk bedacht? Of wil je hier een andere afbeelding tonen? Geen probleem, dat kan! Upload een afbeelding van 600 190 pixels en kies daarna hoe groot je hem wilt tonen: Small Medium Large Bepaal zelf even wat het mooiste is en voila, je eigen afbeelding staat als een blok. Pagina 19 van 130
Mobile menu kleuren Niet geheel onbelangrijk: je mobiele menu. Zorg ervoor dat dit uiterst lekker leesbaar is voor * je bezoekers. Een goed contrast is essentieel. Mobile menu color Dit is de achtergrondkleur van je mobiele menu Mobile menu text color Dit is de tekstkleur van je mobiele menu Pagina 20 van 130
Pagina 21 van 130
De steunkleur wordt bepaald door accent kleur 1 in Highlight colors settings. Pagina 22 van 130
USP s header Jouw unieke waarde proposities direct in beeld voor je bezoekers, zoals het hoort. * Kies eerst of je ze wilt tonen of niet in de horizontale balk in de header. Kies de kleur van de balk en de kleur van de tekst. Pagina 23 van 130
USP opties: Voer de USP in Voer hier jouw USP in. Maak hem niet te lang, eerder kort en krachtig * Voorbeeld USP: Vandaag voor 18:00 uur besteld, morgen in huis! USP link Als je wilt dat de USP ergens naar toe linkt, bijv. naar een /servicepagina die over verzending gaat, vul dan hier de URL in. URL staat voor *Uniform Resource Locator *en is het adres van een bestand op internet. Dit zijn webpagina s of afbeeldingen. Ieder bestand krijgt een eigen URL. * Een voorbeeld is http://www.designmijnwebshop.nl/lightspeed USP icon Het icoontje dat voor de USP staat. Je kunt hier kiezen uit een hele reeks iconen, zoek net dat icoontje dat voor jou perfect is! Bekijk hier alle voorbeelden: http://fontawesome.io/cheatsheet/ Pagina 24 van 130
Header shopping cart Hoe makkelijk kan het zijn? 1. Als je een GRATIS VERZENDING tarief hanteert voor je klanten, vul dit dan hier in. Heb jij bijvoorbeeld Gratis verzending vanaf 75,00 Euro, vul dan 75 in. 2. Onze vriendelijke shoppingcart rekent dan uit hoeveel een bezoeker nog moet spenderen om te profiteren van Gratis verzending Pagina 25 van 130
Gratis verzending vanaf een bepaald bedrag is een enorme conversiebooster, vandaar dat Theme Conversion hier gebruik van maakt om een bezoeker nog meer te laten kopen in * jouw webshop. Pagina 26 van 130
Menu s Theme Conversion biedt vier verschillende menu s. We leggen ze alle vier uit en wat de mogelijkheden zijn. Menu style: Horizontaal of verticaal menu Kies hier voor het verticale menu of voor het horizontale menu. Heb je heel veel menu items? Dan is het wellicht verstandig om het verticale menu te kiezen. * Let op: kies je voor het horizontale menu; het verticale menu wordt ook getoond op de collectie pagina en de productpagina. Deze geldt dan voor extra navigatie, bezoekers ervaren dit als zeer prettig. Maak dus ook nog een keuze welk verticaal menu je wilt, voor op de vervolgpagina s. Pagina 27 van 130
Horizontaal menu: opties Horizontaal menu: dropdown of megamenu Kies hier voor een dropdown menu of een megamenu. Selecteer er een en kijk wat je ervan vindt in de webshop. Maak zelf een keuze aan de hand van de hoeveelheid menu items die je hebt. Menu 1: standaard horizontaal menu met mega menu. Instellingen voor dit menu: Pagina 28 van 130
1. Menustyle: horizontaal of verticaal Dit thema heeft twee soorten horizontale menu s en twee soorten verticale menu s. Zie deze voorbeelden: Pagina 29 van 130
Horizontaal menu: opties Kies: Horizontaal Ga naar design customize theme/personaliseer thema en MENU STYLE: en kies horizontaal Horizontaal menu: opties Horizontaal menu: dropdown of megamenu Kies hier voor een dropdown menu of een megamenu. Selecteer er een en kijk wat je ervan vindt in de webshop. Maak zelf een keuze aan de hand van de hoeveelheid menu items die je hebt. Pagina 30 van 130
Dropdown: Pagina 31 van 130
Megamenu: Featured article in het mega menu In het menu kun je een featured article (ofwel een uitgelicht artikel) laten zien. Vul hier als volgt de URL in: Wil je geen featured article? Laat dit dan leeg. * Voor het vullen van je categorieen en subcategorieen, check deze link: Pagina 32 van 130
Verticaal menu: opties Kies voor: Verticaal menu Ga naar design customize theme/personaliseer thema en naar MENU STYLES: Verticaal menu options De keuze is heel simpel: Wil je dat het menu naar beneden valt? Kies dan accordeon. Wil je dat het menu naar rechts opent? Kies dan voor To the right Pagina 33 van 130
Extra horizontaal menu Kies hier voor aan of uit. Pagina 34 van 130
Toon payments / betaallogo s in extra menu Vink deze aan als je de betaallogo s van jouw betaal mogelijkheden hier wilt tonen. Hoe maak je dit extra menu aan? Dit is heel simpel. Ga naar je dashboard: Ga naar design navigation en maak een nieuw Menu aan rechtsboven. Noem dit menu letterlijk Extra menu. Je kunt dit menu vullen door menu items aan te maken. Maak hier de items aan die je wilt, en geef ze de juiste links. Je kunt hier kiezen uit pagina s, of URL s. Pagina 35 van 130
Extra horizontaal menu Extra horizontaal menu Kies hier voor aan of uit. Toon payments / betaallogo s in extra menu Vink deze aan als je de betaallogo s van jouw betaal mogelijkheden hier wilt tonen. Hoe maak je dit extra menu aan? Dit is heel simpel. Ga naar je dashboard: Ga naar design navigation en maak een nieuw Menu aan rechtsboven. Noem dit menu letterlijk Extra menu. Pagina 36 van 130
Je kunt dit menu vullen door menu items aan te maken. Maak hier de items aan die je wilt, en geef ze de juiste links. Je kunt hier kiezen uit pagina s, of URL s. Tip: als je de betaallogo s wilt tonen in dit menu, kijk dan even hoeveel je er hebt, en hoeveel ruimte je over hebt voor menu items. De pagina s kun je aanmaken bij inhoud. * Meer info: Pagina s aanmaken in Lightspeed Pagina 37 van 130
Toon in menu opties Makkelijker kunnen we het niet maken, vink deze items aan als je ze wilt tonen in je hoofdmenu. Pagina 38 van 130
Highlight kleuren Dit is het highlight kleurenpalet van je webshop. Maak hier dus iets moois van! Eerste accentkleur De ondersteunende hoofdkleur in de shop. Wij hebben de plekken al bepaald, jij hoeft alleen maar de kleur te kiezen en enjoy. Voorbeeld: Pijltjes, bolletjes, rondjes, accenten. Tweede accentkleur De tweede ondersteunende kleur in de shop. Wij hebben de plekken al bepaald, jij hoeft alleen maar de kleur te kiezen en enjoy. Deze houden wij graag heel licht. We wilden hier eigenlijk ook geen optie voor maken, maar spelen met kleur zit nu eenmaal in ons. Pagina 39 van 130
Voorbeeld: deze blokjes in de sidebar en bijvoorbeeld de achtergrond kleur van het menu: Pagina 40 van 130
Pagina 41 van 130
In shoppingcart color De koopknop is de belangrijkste! Vul hier de kleur in voor de koopknoppen door de hele webshop. Prijs kleur Waar een product is, is een prijs. Vul hier de kleur in van de prijs door de hele shop. Pagina 42 van 130
SALE kleur Dit is de kleur van het SALE blokje. Én het is ook bijv. de kleur van foutmeldingen, niet op voorraad, alles wat negatief is. SALE is negatief voor een webwinkelier maar wél positief voor een bezoeker. De kleur is * rood. NEW kleur Dit is de kleur van het NEW blokje. Én het is ook bijv. de kleur van positieve meldingen, op voorraad en de USP icons. Alles wat positief is. Categorie titel achtergrond Dit is de achtergrondkleur van de titelbalkjes op de categorieen. Zie deze voorbeelden: Pagina 43 van 130
Maak je de achtergrondkleur donker? Kies dan voor licht als tekst: Pagina 44 van 130
Productview opties Dit is de manier waarop je producten door de hele shop getoond worden: Homepage: Nieuwe producten Aanbevolen Populaire producten Pagina 45 van 130
Collectie (overzicht) pagina: In normal weergave Pagina 46 van 130
Productpagina: Gerelateerde producten Anderen kochten ook Pagina 47 van 130
Opties productweergaves 1. De standaard weergave small Alle benodigde informatie. Een beknopte weergave van de producten. * Small = 4 naast elkaar, Large = 3 naast elkaar. Pagina 48 van 130
2. Standaard weergave small + Fill image Pagina 49 van 130
3. Grotere weergave: Large (3 naast elkaar) Pagina 50 van 130
3. Simpele weergave (simplistic view) Deze weergave is uitermate geschikt voor modellen, fashion, kleding, of grotere producten: Pagina 51 van 130
Pagina 52 van 130
Hero image De alles kunnende hero image, door jou te beheren! Wat is een hero image? Een grote afbeelding, die direct de aandacht trekt van jouw bezoekers en die vanaf de eerste seconde een sfeer neerzet van jouw bedrijf, webshop of * winkel. Wat kun je allemaal instellen per hero slide? Afbeelding uploaden Afbeelding voor tablet en mobiel uploaden (optioneel) Titels aanpassen Teksten aanpassen Kleuren van de titels en teksten aanpassen Positie van de tekst aanpassen (links, gecentreerd, rechts) Uitlijning van de tekst aanpassen (links, gecentreerd, rechts) Pagina 53 van 130
Button aan/uit zetten Button tekst aanpassen Link aanpassen De hero image aan / uit zetten Ga naar design customize theme/personaliseer thema HERO SLIDER. Hier is het belangrijk om de knop activate the hero slider aan te zetten anders worden er geen hero sliders getoond. Staat ie aan? Allright, naar SLIDE 1. Wil je geen HERO SLIDER? Dan zet je hem uit en ga je verder naar de volgende onderwerpen. Pagina 54 van 130
HERO SLIDE UPLOADEN Hier is het mogelijk om de eerste hero slide te uploaden. Je ziet 3 upload buttons, deze gelden voor: 1. Hero image voor desktop ( afmeting: 2850 1000px ) 2. Hero image voor tablet ( afmeting: 1800 1130 px ) 3. Hero image voor mobiel ( afmeting: 1350 1700 px ) Wat voor afbeelding je ook upload, je hoeft er zelf geen tekst in te gaan shoppen. Let op: dit kan wel! Dit staat bij instellingen slider. Pagina 55 van 130
Afmetingen Hero afbeeldingen * Het mooie woord voor afmetingen in webdesign is Dimensions OMG, zoveel instellingen, dat gaat mij nooit lukken. Tuurlijk wel, eitje. Je hebt in dit thema de mogelijkheid om 3 afbeeldingen per slide te uploaden. Slide: een slide is afbeelding die zich bevindt in een slider. Ofwel afbeeldingen die zich na * elkaar tonen met een leuk effect in een bannerblok. 1. Desktop afbeelding (computers / laptops) 2850 1000 pixels 2. Tablet afbeelding (ipad / Samsung S) *1800 1130 pixels * Pagina 56 van 130
3. Mobiel afbeelding (iphone / Samsung / whatever) 1350 1700 pixels / met USP balk: 1350 1500 pixels Download de hele set hier: Download link Waarom? Omdat dit redelijk verschillende afmetingen zijn en wij van mening zijn dat als je een beetje om je producten en design geeft, je het beste resultaat voor je bezoekers wilt. Vandaar dat we voor ieder device (lees: apparaat) een losse banner mogelijkheid hebben gegeven. Misschien wat veel werk, maar dan heb je ook wat. Handig om te weten: als je alleen de desktop versie upload (2850 1000 pixels) dan neemt hij deze uiteraard over op de andere apparaten. Het is alleen leuker en mooier om deze * apart te maken. Oh ja, omdat wij zo ontzettend veel moeite hebben gedaan om dit thema zo responsive mogelijk te maken, zijn deze opties allemaal gemaakt voor jullie. Speel er wat mee en kijk wat de mogelijkheden zijn voor jou. * Het meeste gebruikte woord in webdesignland: RESPONSIVE. Responsive betekent in normale taal dat een website zich aanpast aan het apparaat waar je een website bekijkt. Dit om de gebruikerservaring van een bezoeker (of een potentiële koper) te optimaliseren. Het gaat erom dat het zo makkelijk mogelijk is om bijv. te navigeren op een computer, op een tablet én op vooral: mobiel. Pagina 57 van 130
Slide maken en ontwerpen Maak het aantrekkelijk Een slide afbeelding moet aantrekkelijk zijn. Dat is het hele idee van deze hero image. Hij moet jouw bezoeker meteen raken met iets dat jij te bieden hebt. Hierboven zie je hoe we een fashion banner maken. Probeer dit zelf in gratis software als Gimp of betaalde software als Adobe Photoshop (Elements). DMWS geeft hier helaas geen cursussen in maar heb je hulp nodig? We hebben ook hele * aantrekkelijke designpakketten in de aanbieding. 1. Je kunt een slide aan of uit zetten in de HERO slider. Hero slide: show or not show Pagina 58 van 130
2. Upload je afbeelding in het juiste formaat voor alle apparaten (of alleen desktop, de rest past zich aan) Klaar? Vergeet niet om op te slaan. Dit doe je telkens rechtsboven in Customize theme / Personaliseer thema. Pagina 59 van 130
Instellingen slider Wat kun je allemaal instellen per hero slide? * Om je zoveel mogelijk vrijheid te geven, kun je op basis van een foto uploaden, de rest zelf doen. Zie het als een cursus, daar moet je ook even op gang komen en bekijken hoe de vork in de steel zit. Beloofd: het is heel erg makkelijk. En je leert wat van webdesign. Afbeelding uploaden: Upload je afbeelding in je juiste grootte, zoals in de vorige stap besproken. Afbeelding voor tablet en mobiel uploaden (optioneel) Upload (als je wilt) de afbeeldingen voor tablet en mobiel. Waarom? Omdat het er nóg beter uitziet. Pagina 60 van 130
Hero slide text place & text allign Waar in de afbeelding wil je de tekst geplaatst hebben? Links, in het midden of rechts? Dit is de text place. Text align betekent of je de tekst linkslijnend, gecentreerd of rechtslijnend wilt hebben. Speel hier wat mee, en varieer. Titel aanpassen Dit is de titel van je slider. Neem hier een pakkende zin. Pagina 61 van 130
Tekst Dit is de tekst die onder de titel komt te staan. tekstkleur en tekstachtergrond Bepaal hier de kleur van de titel en de tekst. Wil je een doorschijnend donker vlak achter je tekst? Vink dan text background aan. Dit zorgt ervoor dat de tekst altijd goed leesbaar is, omdat de tekst dan in een blok wordt geplaatst. Zie dit voorbeeld: Pagina 62 van 130
De linktekst en button Dan is er nog de linktekst, zoals BESTEL NU of BEKIJK COLLECTIE. Maak deze pakkend, en geef de URL in waar hij naartoe moet linken. Wil je een button tonen waar deze tekst in staat? Zet dan de button aan. De kleur wordt automatisch bepaald in colors. Nou, dat kan dus allemaal met een hero image. Probeer er een paar uit en je wordt er vanzelf handig in. Pagina 63 van 130
* Hulp nodig of toch uitbesteden? Bekijk onze design pakketten. Pagina 64 van 130
Banners homepage Theme Conversion heeft een zeer gevarieerde banner module. *Wat kun je allemaal met deze banners? * Afbeelding uploaden Afbeelding voor mobiel uploaden (optioneel) Titels aanpassen Teksten aanpassen Kleuren van de titels en teksten aanpassen Positie van de tekst aanpassen (links, gecentreerd, rechts) Uitlijning van de tekst aanpassen (links, gecentreerd, rechts) Button aan/uit zetten Button tekst aanpassen Link aanpassen Download hier de hele bannerpack, dan heb je direct alle afmetingen, dat scheelt een * hoop werk. Doordat de banner opties zo eenvoudig en uitgebreid zijn, kun je ze zelf beheren, * vrijheid dus! Pagina 65 van 130
Volgorde van de banners Optie 1: alle banners aan (1,2,3,4) Deze optie heeft alle banners aan. * Let op: Banner 1 kan ook een slider zijn! Je kunt hier 3 banners in beheren. Pagina 66 van 130
dmws Theme Conversion - 1 Optie 2: Drie banners aan (1,3,4) In Theme Conversion werkt dit heel simpel: Je vinkt een banner uit en de andere passen zich gewoon aan. Laat je de tweede banner dus weg, dan wordt de eerste banner (of slider) helemaal breed. Dat is super handig. Optie 3: Eén banner (of slider) Als je banner 2, 3 en 4 weglaat, dan blijft er 1 mooie banner staan. Dit is banner 1 (kan ook gebruikt worden als slider). Pagina 67 van 130
Optie 4: Twee brede banners (de bovenste is een slider) Bij deze optie zet je banner 1 en 3 aan. Voila, wat gebeurt er? Twee mooie banners onder elkaar. Optie 5: Twee onderste banners: 3 en 4. Heb je even genoeg van je bovenste twee banners? (banner 1 en 2) dan tonen de onderste twee zich netjes als je 1 en 2 uitzet.! Let op: deze tonen onder elkaar op een tablet, dus er staat dan een wit vlak naast de kleine. Daar is niets aan te doen. Zelfs door ons niet. Pagina 68 van 130
* Hoe pas je de banners aan en zet je ze aan en uit? Ga naar de volgende topic! Pagina 69 van 130
Banners beheren Dit is de banner die we gaan maken in deze topic: Let op: de eerste banner van de bannerset heet Banner 1 (slider). Je kunt hier ook een slider van maken als je de Banner 1 slide 2 aanvinkt en/of Banner 1 slide 2 aanzet. In * totaal heb je dan 3 slides in 1 banner. De andere banner hebben 1 afbeelding. Download hier de hele bannerpack, dan heb je direct alle afmetingen, dat scheelt een * hoop werk. 1. De banner aan zetten De extra slides in banner 1 zet je aan in de desbetreffende slide. Pagina 70 van 130
1. Je afbeelding uploaden Kijk in dit schema hoe groot je de banner moet opmaken aan de hand van je layout van de webshop. Dit is de lege banner. Upload de banner zonder tekst. Wil je wel tekst in je banner? Dat kan, * geen probleem. Je hoeft dan alle onderstaande instellingen niet te doen. Banner tekst plaatsing Pagina 71 van 130
Dit houdt in waar in de banner je de tekst wilt plaatsen. Links, in het midden of rechts. Dit ligt aan de foto. In onze afbeelding staand de laptops rechts, dus is het verstandig om de tekst links te plaatsen. Banner tekst uitlijning Dit wil zeggen hoe we de tekst uitlijnen. Linkslijnend, gecentreerd of rechtslijnend. Probeer hier mee te spelen, dat is leuk. Kijk dit gebeurt er als je hem links plaatst en de tekst uitlijning centreert: Zie je het verschil? Pagina 72 van 130
Tekst kleur Wat de kleur van de tekst moet worden, kan verschillen per banner. Hier kiezen we voor donker. Banner Titel Voer hier de titel van de tekst in. Banner Tekst Voer hier de tekst in van je banner. Hou het kort, ga hier geen lange verhalen vertellen, die leest toch niemand. Banner link tekst Pagina 73 van 130
Het is dat groene tekstje daar. Die kun je ook nog een aparte kleur geven! Link kleur Link URL Uiteraard ook een optie waar hij naar toe moet linken. Pagina 74 van 130
En als laatste: banner tekst achtergrond Altijd handig als er weinig contrast is, een zwarte achtergrond achter de tekst van je banner. Zoals hieronder: Mooi he? Tip: als je het zwarte achtergrondblok voor je tekst aanzet, kies dan voor een * lichte tekst. Werkt mooi contrasterend. Pagina 75 van 130
Afmetingen banners Er zijn in Theme Conversion meerdere variaties mogelijk qua opbouw, denk aan verticale navigatie / horizontale navigatie sidebar aan / uit dus ook de banners (om ze perfect te kunnen beheren) kunnen een andere afmeting hebben. Download hier de hele bannerpack, dan heb je direct alle afmetingen, dat scheelt een * hoop werk. Hier zie je een overzicht van de bannergroottes in pixels: Normaal Pagina 76 van 130
Retina in pixels Nog een banner: boven de footer! Desktop Mobile 1780 458 pixels 1350 940px Pagina 77 van 130
Homepage instellingen Stel hier de basis onderdelen van je homepage in. Begin met de artikelen: Nieuwe artikelen (worden getoond als je nieuwe artikelen toevoegt) Populaire artikelen Aanbevolen artikelen (kun je zelf bepalen) Je kunt deze alle drie los instellen, dus aan of uit zetten. Pagina 78 van 130
* Weergave van deze artikelen wijzigen? Ga naar Productweergave Producttabs Kies deze optie als je de producten in tabs wilt hebben, zodat mensen zelf kunnen switchen. Wil je ze liever onder elkaar, vind dit uit. Productslider Vink deze aan als je wilt dat je producten automatisch sliden van links naar rechts. Pagina 79 van 130
Overige opties: Toon logo slider aan / uit Pagina 80 van 130
Toon blog artikelen op de home aan / uit Toon de tags op de homepagina! Let op: Als je toon tags aanzet, moet je even controleren of je ze ook in de sidebar hebt aangezet. Als je bijvoorbeeld geen sidebar hebt, en je hebt wel je tags aan op de homepage, zullen ze onderin verschijnen, boven de footer. Heb je wel een sidebar, dan worden ze autmatisch daarin getoond. Je kunt ze daar dan weer uitzetten in de instellingen van de sidebar. Home titels tekst uitlijning Wil je de titels van bijv. blog en Over ons links lijnend of in het midden? Tekst homepage Vul deze tekst in de backend bij content home : Pagina 81 van 130
Pagina 82 van 130
Sidebar De sidebar is die leuke linkse zijkant en daar kun je het volgende in aan zetten: Ga naar design customize theme/personaliseer thema en bepaal of je de sidebar ook op de homepage wilt. Dit doen we omdat hij op de vervolgpagina s namelijk wel aan staat. Je kunt overigens wel alles in de sidebar uitzetten, als je dat wilt. Pagina 83 van 130
Goed: Er zijn 3 opties in je sidebar (zijbalk) 1. Toon USP s in je sidebar Dit toont de vier USP s die je invoert bij USP s sidebar. Deze voer je in even verderop in hetzelfde blok bij: Er zijn altijd wel vier USP s (UNIQUE SELLING POINTS) te bedenken over jouw winkel. Vul * deze dan ook allemaal in. Pagina 84 van 130
De titel van je USP bar. Deze titel staat in de vertalingen van je Lightspeed webshop. In het topic vertalingen leggen we uit hoe dit werkt. Het lijkt heel moeilijk, maar het is heel makkelijk. * Sommige stukjes in de webshop hebben een vertaling nodig, simpel omdat wij niet weten wat jullie webwinkeliers op sommige plekken willen communiceren naar jullie bezoekers. Onze gedachten van een USP block is kopen bij ons, maar misschien wil jij onze voordelen. Hoe je dat doet? Lees je bij vertalingen, of hieronder. Helemaal makkelijk: je kunt het ook direct vertalen naar meerdere talen (mocht je meerdere talen in je webshop voeren). Wij hebben elk stukje tekst in de webshop een standaard Engelse hoofdvertaling gegegeven. De vertaling voor de titel van het USP blokje in de sidebar is: usp sidebar title (een overzicht van essentiële dingen staat in vertalingen. Helemaal fijn in een overzichtje. Deze zet je zo in de vertalingen van je Lightspeed webshop: Ga naar inhoud translations en klik rechtsboven (linkse knop) op voeg custom vertaling toe / add a custom translation). Hier staat voer je in het bovenste veld de key in, dat is in dit geval: usp sidebar title en vertaal deze zin naar elke taal die je voert. Pagina 85 van 130
2. Toon laatst bekeken artikelen in de sidebar Simpel as that: wil je dat bezoekers kunnen zien wat ze net bekeken hebben? Vink deze aan. Pagina 86 van 130
3. Toon tags in je sidebar Tags? Wat zijn dat? Dat zijn die dingetjes die je in de producten in je backend kan invoeren per product. Als je bijvoorbeeld elke rood artikel de tag rood geeft, en een bezoeker klikt toevallig op zo n tag rood, dan ziet hij een overzicht van alle producten met de tag rood. Pagina 87 van 130
USP s sidebar 1. Toon USP s in je sidebar Dit toont de vier USP s die je invoert bij USP s sidebar. Deze voer je in even verderop in hetzelfde blok bij: Er zijn altijd wel vier USP s (UNIQUE SELLING POINTS) te bedenken over jouw winkel. Vul * deze dan ook allemaal in. De titel van je USP bar. Deze titel staat in de vertalingen van je Lightspeed webshop. In het topic vertalingen leggen we uit hoe dit werkt. Het lijkt heel moeilijk, maar het is heel makkelijk. * Sommige stukjes in de webshop hebben een vertaling nodig, simpel omdat wij niet weten wat jullie webwinkeliers op sommige plekken willen communiceren naar jullie bezoekers. Onze gedachten van een USP block is kopen bij ons, maar misschien wil jij onze voordelen. Hoe je dat doet? Lees je bij vertalingen, of hieronder. Helemaal makkelijk: je kunt het ook direct vertalen naar meerdere talen (mocht je meerdere talen in je webshop voeren). Wij hebben elk stukje tekst in de webshop een standaard Engelse hoofdvertaling gegegeven. De vertaling voor de titel van het USP blokje in de sidebar is: usp sidebar title (een overzicht van essentiële dingen staat in vertalingen. Helemaal fijn in een overzichtje. Pagina 88 van 130
Deze zet je zo in de vertalingen van je Lightspeed webshop: Ga naar inhoud translations en klik rechtsboven (linkse knop) op voeg custom vertaling toe / add a custom translation). Hier staat voer je in het bovenste veld de key in, dat is in dit geval: usp sidebar title en vertaal deze zin naar elke taal die je voert. Nou, dat was toch niet zo moeilijk? Probeer het nog een keer als het niet is gelukt. Maak anders een ticket aan op www.designmyweb.store Pagina 89 van 130
Reviews / feedback Reviews zijn erg belangrijk, vergeet dat niet. We hebben het geprobeerd zo makkelijk mogelijk te maken, dat wordt je als theme ontwikkelaar niet altijd even makkelijk gemaakt, trouwens. We zijn er vanuit gegaan dat er twee reviewsites het meeste gebruikt worden: 1. Kiyoh 2. Feedback Company Toon reviews in de footer, in de sidebar of allebei Dit heeft eigenlijk geen uitleg nodig. Waar wil je ze hebben? Mocht je nou in de sidebar (ook) aan hebben staan, wil je ze dan bovenaan in de sidebar of onderaan? Voorbeeld van onderaan: Pagina 90 van 130
Kies welke je hanteert: Kiyoh of Feedback Company! Let goed op: Je kunt er maar 1 aanzetten. Je zet deze aan door je ID in te voeren dat je hebt verkregen van je reviewsite. Hoe krijg ik die dan? Zo n review ID. Pagina 91 van 130
Quickview (snel bekijken) Een hele makkelijke functie die je aan of uit moet zetten. :) Pagina 92 van 130
Product aantallen Deze optie zorgt ervoor dat in je collectiepagina en je zijmenu (dropdown) de aantallen van de inhoud wordt getoond van bijv. een categorie. Eigenlijk een super saaie functie, maar er wordt veel naar gevraagd, dus why not? Pagina 93 van 130
Collectiepagina De welbekende collectiepagina. Wat is de collectiepagina? Deze pagina toont de collecties van de categorieen. Opties (één voor één) Toon grid / list optie Pagina 94 van 130
Theme Conversion heeft de UNIEKE functie die het mogelijk maakt voor een bezoeker om alles van deze pagina tegelijk in de winkelwagen te plaatsen. Dat kan in de listorder. De listorder (zoals hierboven afgebeeld) toont ook alle varianten van een product, én deze kunnen ook direct besteld worden! Zet deze functie dus aan als je je klanten de keuze wilt geven om te kiezen tussen lijst en normale weergave. * Wil je je klanten alleen 1 optie bieden? Ga dan naar Dashboard settings advanced ga naar onderen en vink List of Grid aan. Degene die je als nu selecteert wordt de basis layout van je collectiepagina. Daarna: Ga naar design customize theme/personaliseer thema en naar COLLECTIONPAGINA. Vink hier de list/grid optie dan uit en je hebt alleen LIST voor je bezoekers. Pagina 95 van 130
Demo: One button to add all Vink deze knop aan of uit. De knop om alles tegelijk in de winkelwagen te plaatsen wordt nu aan of uit gezet. Pagina 96 van 130
Categorie informatie boven of onder? Heb je informatie/ een afbeelding en tekst in je categorieën en wil je deze tonen? Dat kan! Wil je deze onder of boven de producten tonen. Kies hier. Toon afbeelding en lees meer Dit toont de afbeelding van je categorie, en een lees meer optie. Vink die aan als je grote lappen met tekst hebt. Dat scheelt ruimte. Pagina 97 van 130
Filter horizontaal of verticaal Wil je de filters links in de sidebar tonen? Of wil je ze horizontaal boven de producten tonen? Maak hier een keuze. Toon merken filter Het merken filtertje wordt automatisch aangemaakt door Lightspeed. Wil je deze tonen aan je bezoekers of niet? Vink aan of uit. Pagina 98 van 130
Toon grid/list optie Toon grid / list optie Theme Conversion heeft de UNIEKE functie die het mogelijk maakt voor een bezoeker om alles van deze pagina tegelijk in de winkelwagen te plaatsen. Dat kan in de listorder. De listorder (zoals hierboven afgebeeld) toont ook alle varianten van een product, én deze kunnen ook direct besteld worden! Zet deze functie dus aan als je je klanten de keuze wilt geven om te kiezen tussen lijst en normale weergave. Pagina 99 van 130
* Wil je je klanten alleen 1 optie bieden? Ga dan naar Dashboard settings advanced ga naar onderen en vink List of Grid aan. Degene die je als nu selecteert wordt de basis layout van je collectiepagina. Daarna: Ga naar design customize theme/personaliseer thema en naar COLLECTIONPAGINA. Vink hier de list/grid optie dan uit en je hebt alleen LIST voor je bezoekers. Demo: Pagina 100 van 130
Knop alles tegelijk in winkelwagen One button to add all Vink deze knop aan of uit. De knop om alles tegelijk in de winkelwagen te plaatsen wordt nu aan of uit gezet. Pagina 101 van 130
Toon content boven of onder Categorie informatie boven of onder? Heb je informatie/ een afbeelding en tekst in je categorieën en wil je deze tonen? Dat kan! Wil je deze onder of boven de producten tonen. Kies hier. Pagina 102 van 130
Toon afbeelding en lees meer Dit toont de afbeelding van je categorie, en een lees meer optie. Vink die aan als je grote lappen met tekst hebt. Dat scheelt ruimte. Pagina 103 van 130
Filters horizontaal of verticaal Filter horizontaal of verticaal Wil je de filters links in de sidebar tonen? Of wil je ze horizontaal boven de producten tonen? Maak hier een keuze. Toon merken filter Het merken filtertje wordt automatisch aangemaakt door Lightspeed. Wil je deze tonen aan je bezoekers of niet? Vink aan of uit. Pagina 104 van 130
Productpagina opties De allerbelangrijkste pagina van je webshop: de PRODUCTPAGINA :) Waar koopt een bezoeker in de meeste gevallen zijn artikelen? Althans: waar wordt hij overgehaald om op IN WINKELWAGEN te klikken? Op de procuctpagina, juist. Verzorg deze goed. Er zijn veel opties aan of uit te zetten. Hier zetten we ze allemaal even op een rijtje. 1. Toon titels in HOOFDLETTERS aan / uit Pagina 105 van 130
Toont de titels van het product in hoofdletters. Reviews altijd zichtbaar Wil je de reviews niet onder een tab? Toon ze altijd, door deze aan te zetten. Afbeelding uitvergroten Als je wilt dat je bezoekers de afbeelding kunnen vergroten naar volledig scherm: aanzetten :) Toon USP s op je productpagina Je hebt de mogelijkheid tot 2 USP s op je productpagina. Deze staan onder je Koopknop! Gebruik deze goed! Let op: dit zijn overal dezelfde, gebruik dus universele USP s. Niet productgebonden. Pagina 106 van 130
Toon voorraad Makkelijk: Toon de voorraad (of niet) van dit product. Toon artikelen met merknaam en logo tje Pagina 107 van 130
Korting van de staffels boven of onder de koopknop? Wil je de kortings meldingen onder of boven de koopknop? Bijvoorbeeld: koop 2, en krijg 10% korting. Toon acties op de productpagina Deze optie toont de share vergelijk en wenslijst optie bij het product. Toon SKU (stock keeping Unit) en artikelnummer op productpagina Pagina 108 van 130
Productpagina timer Jaag je klanten een beetje op door ze een timer te laten zien. Bied jij je bezoekers VANDAAG BESTEL VOOR 18:00 UUR MORGEN IN HUIS, gebruik deze timer dan! Hij * is heel simpel in gebruik. *Deze optie telt af naar het moment dat jouw bezoekers nog profiteren van gratis verzending. * Pagina 109 van 130
Order before time (bestel voor een bepaalde tijd) Dit is de tijd waarnaar de klok aftelt. Heb jij bijvoorbeeld elke dag voor 18:00 uur besteld, is morgen in huis? Zet deze klok dan op 18:00:00 Shown from (tonen vanaf welke tijd?) Vul hier de tijd in in 24uurs notatie. Wil je deze melding elke dag vanaf 15 uur s middags laten zien? Zet hier 15 in. De dagen Vink hier de dagen aan waarop deze actie geldt. Dus bezorg je niet in het weekend? Vink dan Zaterdag en Zondag uit, bijvoorbeeld. Pagina 110 van 130
! Let op: Deze zin staat onder vertalingen als standaard op 18:00 uur. Wil je deze vertalen ga dan naar VERTALINGEN. Je moet deze zin in twee stukjes vertalen: Place your order before [time], shipped today! & You got Deze zet je zo in de vertalingen van je Lightspeed webshop: Ga naar inhoud translations en klik rechtsboven (linkse knop) op voeg custom vertaling toe / add a custom translation). Hier staat voer je in het bovenste veld de key in, dat is in dit geval: usp sidebar title en vertaal deze zin naar elke taal die je voert. Pagina 111 van 130
Footer Footer colors: Pagina 112 van 130
Dit spreekt voor zich, speel met de kleuren en maak er iets moois van. Pagina 113 van 130
Footer teksten In de beschrijving staat precies waar de tekstjes voor zijn en geplaatst worden. Pagina 114 van 130
Banner in footer: Rechtsonderin kun je een bannertje plaatsen in de footer. Afmeting: 555 360px Pagina 115 van 130
Pagina 116 van 130
Vertalingen Titels in je webshop die vertaald moeten worden naar je eigen smaak/taal. Sommige titels moeten in de vertalingen van je Lightspeed webshop gezet worden. Het lijkt heel moeilijk, maar het is heel makkelijk. * Sommige stukjes in de webshop hebben een vertaling nodig, simpel omdat wij niet weten wat jullie webwinkeliers op sommige plekken willen communiceren naar jullie bezoekers. Onze gedachten van een USP block is kopen bij ons, maar misschien wil jij onze voordelen. Helemaal makkelijk: je kunt het ook direct vertalen naar meerdere talen (mocht je meerdere talen in je webshop voeren). Wij hebben die stukjes tekst in de webshop een standaard Engelse hoofdvertaling gegegeven. Hoofd key NL Waar in de shop? usp sidebar title Free shipping? Order for: Onze USP s Gratis verzending? Bestel nog voor: Titel voor het usp blokje in je sidebar zinnetje in je winkelwagen dropdown rechtsboven Free shipping! Gratis verzending! in je winkelwagen dropdown Stay up to date with the latest news and developments Buy $1 for $2 each and save $3 Ordered before [time], delivered tomorrow! Blijf op de hoogte en schrijf je in Bestel $1 stuks en je krijgt $3 korting: $2 per stuk Voor 18:00 besteld, morgen in huis. Nieuwsbrief titel in de bovenste balk van de footer kortingsregel op productpagina bezorgtimer op productpagina NOTE: You got is los! You got Je hebt nog bezorgtimer op productpagina Others also bought Anderen die kochten ook Onder de gerelateerde artikelen Active filters Gekozen filters Op de collectiepagina, als een filter geactiveerd is About us Over ons Tekst op de homepage titel Pagina 117 van 130
Back to overview Share this product Terug naar overzicht Deel dit product Terug naar overzicht linkje op productdetailpagina Deel dit artikel op social media op productpagina USP blokje in de sidebar is: bijvoorbeeld: usp sidebar title Helemaal fijn in een overzichtje. Deze zet je zo in de vertalingen van je Lightspeed webshop: Ga naar inhoud translations en klik rechtsboven (linkse knop) op voeg custom vertaling toe / add a custom translation). Hier staat de key in, dat is in dit geval: usp sidebar title en vertaal deze zin naar elke taal die je voert. Pagina 118 van 130
Pagina 119 van 130
Uitleg locaties: usp sidebar title Pagina 120 van 130
Free shipping? Order for: Pagina 121 van 130
Pagina 122 van 130
Free shipping! Pagina 123 van 130
Newsletter title Buy $1 for $2 each and save $3 Pagina 124 van 130
Place your order before [time], shipped today! (deel 1) Pagina 125 van 130
You got (deel 2) Active filters Pagina 126 van 130
Others also bought Pagina 127 van 130
Vertalingen eigen zinnen (meertalig) Heb je een meertalige webshop en je wilt bijvoorbeeld je banners, USP s, alles wat je zelf invoert in je webshop vertalen? Dat dat je zo: Ga naar design customize theme/personaliseer thema en Ga naar de plek waarop je een vertaling wilt invoeren, bijvoorbeeld een banner: Je ziet hier staan: Flexibel bannerset. Dit is taal 1: jouw hoofdtaal. * Stel hier je hoofdtaal in: Dashboard Instellingen landen / talen. Pagina 128 van 130
Kopieer deze zin (selecteren en CTRL C / Command C) Pagina 129 van 130
Ga naar dashboard inhoud vertalingen Deze zinnen hebben o.a. vertalingen nodig (als je een meertalige shop hebt: - Hero image / slides - Banners - USP in de topbalk - USP s horizontaal - USP s verticaal - USP s onder koopknop Pagina 130 van 130