Documentatie Unity theme

Transcriptie

1 Documentatie Unity theme

2 Inleiding Het Unity Theme is het ideale thema voor elke webshop. Met veel focus op adaptive en mobile-first design, hoge snelheid, conversieverhoging en kwaliteit bereikt u de meest optimale resultaten. Het thema is veel beter afgewerkt en heeft net dat extra detail. Geen enkel ander thema is zo bij de tijd en goed afgewerkt als het Unity theme. Ook heeft het Unity theme een aantal bijzondere functies: Shop de look Nieuw! Unieke inspiratie pagina Nieuw! Inspiratiepagina koppelen aan een product Nieuw! Zoekbalk met Livesearch dat binnen categorieën zoekt Nieuw! Plus en min punten Nieuw! In winkelwagen popup met gerelateerde producten Bestseller! Uniek splitscreen design Geheel aanpasbaar menu Web progressive app voor mobiel Productafbeeldingen op hover Bestseller! Verzending afteltimer Bestseller! Aangepaste klantenservicepagina Aangepaste winkelwagenpagina 2

3 Inhoudsopgave Prijspakketten Unity Theme 4 1. Thema installatie 5 Welkom bij het Unity Thema 5 Gevolgen thema installeren 5 Thema editor activeren 5 Thema updates 6 2. Thema vormgeving 7 Aan de slag 7 Basis instellingen 14 Tips & Tricks Thema instellingen 21 Presets 21 Logo 21 Typografie 21 Achtergrond 22 Afbeeldingen 23 Algemeen 27 Homepage 28 Categorieën 29 Product 30 Klantenservice 30 3

4 Prijspakketten Unity Theme DESIGN BASIC DESIGN ADVANCED DESIGN PROFESSIONAL 899,- 1750,- 2450,- Op basis van een thema een ontwerp naar aanleiding van uw wensen Opmaken sliders max 3 max 4 in overleg Typografie Banners opmaken Categorie afbeeldingen Technisch realiseren van het design Instellingen van het design doorvoeren Het doorvoeren van uw eigen huisstijl Live zetten van de shop 100% klanttevredenheidsgarantie! max 10 max 25 in overleg Vormgever junior junior senior Gratis SEO & SEA scan van onze partner TrafficToday Complete nazorg Complete ontzorging Telefonisch support max 2,5 uur max 5 uur Personalisering van uw thema max 5 uur max 10 uur Vooronderzoek Voorrang in de planning! Bedenken en doorvoeren van creatieve nieuwe elementen Opmaak 3 unieke ontwerpen desktop, tablet, mobiel Design professional biedt unieke meerwaarde! Uw webshop wordt onder andere voorzien van drie unieke ontwerpen. Verbetert aanzienlijk de gebruikerservaring op elk device. 4

5 1. Thema installatie Welkom bij het Unity Thema. Wat leuk dat je ons thema wilt installeren. Wij hopen dat wij kunnen voldoen aan al uw wensen en mocht er iets niet helemaal naar behoren werken, schroom dan niet om contact met ons op te nemen via Om het Unity thema te installeren: Ga je eerst naar instellingen > design > Theme Store > Typ in de zoekbalk Unity of zoek tussen de thema s tot je het Unity thema ziet. Hier kun je gelijk een keuze maken tussen de verschillende varianten (pre-sets). Klik op koop thema en bevestig vervolgens je aankoop om het thema te installeren. Bij de verschillende varianten (pre-set) hebben wij de instellingen alvast voorgeprogrammeerd (ingesteld), zodat je een perfecte basis hebt om mee te starten. Je kan natuurlijk ook zelf aan de slag! Gevolgen thema installeren Omdat bij het installeren van een nieuw thema de design instellingen weer gereset worden, zal er direct na het installeren de webwinkel op de standaard configuratie van het nieuwe thema draaien. Daarom is het aan te raden om deze stap goed voor te bereiden, zodat je dit snel weer kunt aanpassen. Bij het omzetten van het thema verdwijnen enkele specifieke instellingen: Alle instellingen bij Design > Thema editor > Thema aanpassen worden vervangen door de standaardinstellingen van het nieuwe thema. Alles wat in de Template Editor is aangepast zal verdwijnen. De code in de Template Editor wordt namelijk vervangen door de code van het nieuwe thema. Wij raden aan om de overstap tijdens de openingstijden van ons supportteam te doen, zodat er bij eventuele problemen direct iemand van beschikbaar is voor ondersteuning. Let op! Dit overzetten bedraagt enkel het thema zelf. De instellingen (kleuren, afbeeldingen, etc) dienen hierna nog handmatig goed gezet te worden. Thema editor activeren Wanneer je uitstekend uit de voeten kunt met HTML en CSS, kun je de Thema Editor gebruiken om het design van je webshop naar jouw wens en/of huisstijl aan te passen. 5

6 Activeer je de Thema Editor, dan wordt jouw webshop losgekoppeld van het hoofdthema en wordt deze gezien als een maatwerk thema. Als InStijl Media het hoofdthema aanpast, worden de aanpassingen dus niet doorgevoerd in jouw thema. Wanneer je de Thema Editor activeert, dan ontvang je ook geen updates meer voor het thema. Wanneer InStijl Media een update voor een thema uitvoert, wordt de code toegevoegd aan het hoofdthema, aangezien het thema op onze servers staat. Aan het hoofdthema zijn alle webshops gekoppeld die gebruik maken van dat thema. Wanneer het hoofdthema wordt geüpdatet, wordt de update ook doorgevoerd bij alle gekoppelde webshops. Thema updates Het kan zijn dat er een extra functionaliteit toegevoegd aan de webshop, denk hierbij aan een Blog-functie of Productbundels. Wanneer zo n functie nieuw ontwikkeld is, zijn er updates aan het thema nodig om dit zichtbaar te maken op jouw webshop. Op dat moment zal je in de backoffice de instellingen zien die bij deze functies horen, maar is deze update niet zichtbaar aan de voorkant van je winkel. Om dit te realiseren, zal je zelf de code behorend bij deze functies in de Thema Editor moeten toevoegen. Hiervoor brengen wij kosten in rekening voor het plaatsen van dit stukje maatwerk. 6

7 2. Thema vormgeving Aan de slag Gefeliciteerd! U heeft het nieuwe Unity thema geïnstalleerd. Om snel aan de slag te kunnen met uw thema raden we aan om alle content in uw webshop te zetten. Stapt u over van een ander thema of heeft u alle content al staan? Dan kunt u doorgaan naar basis instellingen. Producten Zonder producten die je kunt verkopen heeft het weinig zin om een webshop te beginnen. Het vullen van je webshop zal enige tijd in beslag nemen, maar is absoluut de moeite waard. Er zijn twee manieren om producten aan te maken: 1. Handmatig via de backoffice 2. Een product toevoegen door deze te importeren Product aanmaken 1. Klik in het linker menu van de backoffice op Producten. 2. Klik bovenaan het scherm op Product toevoegen. 7

8 Titel Een korte omschrijving van het product. Deze komt bij een product te staan in de categorieën waaraan het product is toegevoegd. Let op: De titel bepaalt ook de URL die wordt gemaakt voor het product. Bijvoorbeeld: je voegt een product toe met als titel Rood sweatshirt. De URL van het product wordt dan: Als je later de titel van je product aanpast, wordt de URL niet aangepast om te zorgen dat je ranking in zoekmachines behouden blijft. Om de URL van het product aan te passen, moet je de product URL wijzigen. Voor meer informatie ga je naar SEO-gegevens van een product. Om wijzigingen aan te brengen in de product-url via een import zie Lijst met alle opties in een importsheet. Lange titel Dit is de langere omschrijving die wordt weergegeven op de productpagina s. Omschrijving Voer hier een korte omschrijving in van het product. Let op! Het hangt van je thema af of deze omschrijving wel of niet zichtbaar wordt op de productpagina in je webshop. Vul je geen SEOgegevens in, dan wordt dit veld gebruikt door zoekmachines (metaomschrijving). De SEO-gegevens kun je invullen verderop op deze pagina. Zichtbaar Stel hier de zichtbaarheid in van het product. Je kunt kiezen uit drie opties: 1. Altijd zichtbaar: het product is altijd zichtbaar ongeacht of het product op voorraad is of niet. 8

9 2. Zichtbaar wanneer op voorraad: het product is alleen zichtbaar wanneer het product op voorraad is. 3. Verborgen: het product is niet zichtbaar in de webshop. Merk Vul hier het merk in van het product. Leverancier Vul hier de leverancier in van het product. Levertijd Vul hier de levertijd in. Prijs Vul hier de prijs in van de standaard variant van het product. Aantal Vul hier het aantal op voorraad in dat je hebt van dit product. Klik na het invullen van alle gegevens rechts bovenin/onderin het scherm op Opslaan om het product aan te maken. Producten importeren Is je productassortiment digitaal beschikbaar in de vorm van een Excel- of andersoortig bestand in.csv-formaat? Dan kun je kostbare tijd besparen door je producten te importeren. Ga hiervoor naar Tools > Imports in het linker menu van de backoffice. Categorieën U kunt uw productaanbod op heldere en overzichtelijke wijze organiseren. Voordat u de schappen van uw winkel gaat vullen, raden we u aan om ruimschoots de tijd te nemen voor het indelen van uw assortiment in categorieën die logisch zijn voor uw klanten. Zo vinden ze sneller waarnaar ze op zoek zijn, en vergroot u uw kansen om omzet te creëren. Ga in het linker menu van de backoffice naar Producten > Categorieën om categorieën aan te maken. Soorten categorieën Uit onderzoek is gebleken dat goede webwinkels maximaal zeven hoofdcategorieën hebben, waarbij iedere hoofdcategorie een korte krachtige benaming heeft. Dit zorgt voor een goed leesbare navigatie. Per categorie zijn er drie verschillende type pagina s die u kunt aanmaken: product-, overzichts-, en tekstpagina s. 9

10 Producten Het type Producten is de categorie waarin u producten kunt plaatsen. Als klanten op deze categorie klikken, zullen ze een overzicht zien van alle producten die in deze categorie geplaatst zijn. Als klanten op een product klikken, komen ze uit op een productpagina. Een productpagina bevat een korte beschrijving van het betreffende product, een afbeelding waar eventueel op kan worden ingezoomd en de mogelijkheid om het product toe te voegen aan de winkelwagen. Het type producten is de enige pagina waar u producten aan kunt toevoegen. U kunt maximaal 3 lagen diep met productcategorieën. Wilt u meer niveaus diep? Gebruik dan overzichtpagina s. Categorieën (Overzicht) Een overzichtspagina, type Categorie, toont alle onder de hoofdcategorie geplaatste subcategorieën. Onder een overzichtspagina kunt u nog een overzichtspagina plaatsen als subcategorie of productenpagina s. Let op! Overzichtspagina s kunnen niet onder een product- of tekstpagina worden geplaatst. U kunt geen producten plaatsen in overzichtspagina s. Tekstpagina s Deze pagina s kunnen alleen tekst (met opmaak) bevatten. Gebruik deze pagina s om bijvoorbeeld 10

11 uw klanten te informeren over uw webwinkel, de door u gehanteerde algemene voorwaarden/ disclaimer of betalings- en verzendmethoden. Er kunnen geen subcategorieën aangemaakt worden onder een tekstpagina. Knoppen op de productpagina Categorie toevoegen 1. Ga in het linker menu van de backoffice naar Producten > Categorieën. 2. Klik rechts bovenin het scherm op de knop Categorie toevoegen om een nieuwe categorie aan te maken. 3. Er opent een pop-upvenster waarin u een naam en type kunt aangeven. Titel - naam van de categorie. Deze wordt in het menu weergegeven. Lange titel - lange naam van de categorie. Deze komt op de categorie pagina in uw webwinkel te staan Zet in de categorie - dit veld kunt u leeglaten als de categorie een hoofdcategorie is. Is de categorie een subcategorie, selecteer dan de categorie waaronder de nieuwe categorie komt te vallen. Type - geef hier het type aan van de categorie: Product, overzicht en tekstpagina. 4. Na het aanmaken van de categorie komt u weer uit in het overzicht van alle categorieën. Klik op de categorie om deze te bewerken. U wordt doorgestuurd naar de pagina waar u de categorie kunt bewerken. 11

12 Order categorieën 1. Ga in het linker menu van de backoffice naar Producten > Categorieën. 2. Klik rechts bovenin het scherm op de knop Categorieën sorteren om de volgorde van uw categorieën aan te passen. 3. U wordt doorgestuurd naar een pagina met al uw categorieën. Klik op de categorie die u wilt verplaatsen en houdt uw muis ingedrukt. Sleep nu de categorie naar de juiste positie. 4. Klik rechtsboven in het scherm op Gereed wanneer alle categorieën op de juiste plek staan. Subcategorieën Gebruik de toggle om de subcategorieën weer te geven of te verbergen. On: 12

13 Off: Sucategorie toevoegen 1. Klik rechts naast een categorie op de knop Toevoegen om een nieuwe subcategorie aan te maken onder deze categorie. 2. Er opent een pop-upvenster waarin u een naam en type kunt aangeven. Titel - naam van de categorie. Deze wordt in het menu weergegeven. Lange titel - lange naam van de categorie. Deze komt op de categorie pagina in uw webwinkel te staan Zet in de categorie - dit veld is al ingevuld met de categorie waarvoor deze subcategorie aangemaakt wordt. Bij de verkeerde categorie op Toevoegen gedrukt? Selecteer dan de categorie waaronder de nieuwe categorie komt te vallen. Type - geef hier het type aan van de categorie: Product, overzicht en tekstpagina. 3. Na het aanmaken van de categorie komt u weer uit in het overzicht van alle categorieën. Klik op de subcategorie om deze te bewerken. U wordt doorgestuurd naar de pagina waar u de categorie kunt bewerken. Verplaatsen naar Met de Move to functionaliteit heeft hetzelfde doel als de rearrange categories; het verplaatsen van categorieën. 1. Klik rechts naast de categorie op Verplaats naar om deze categorie te verplaatsen onder een andere categorie. 2. Er opent een pop-upvenster waarin u een categorie kunt selecteren. 3. Selecteer de categorie waaronder de categorie geplaatst moet worden, de zogehete parent categorie. Klik vervolgens op Opslaan op de wijzigingen door te voeren. 13

14 Basis instellingen Hier worden alle instellingen die al standaard in Lightspeed zijn onder het kopje Design Uitgelegd. Headlines Voor de slider hebben wij 3 varianten. Hiervan verschillen de formaten betreft de afbeelding. Afhankelijk van welke variant u heeft gekozen, verschillen de instructies. Splitscreen Klantenservice Slider Slider Navigatie U kunt met Navigatie een afwijkend menu creëren dat niet gebaseerd is op de categorieën onder Producten > Categorieën. Door de gelijke webshop kun je menu items selecteren en hier een eigen naam aan geven. In het Unity thema maken we gebruik van momenteel 2 soorten menu types die standaard in dit thema gebruikt kunnen worden. Default (Navigatiemenu) Search (Zoekbalk) Default (Navigatiemenu) Het hoofdmenu is volledig zelf naar wens in te richten. Standaard komen bovenin de categorieën te staan van uw shop, maar wilt u graag uw eigen menu samenstellen dan is dat ook mogelijk. Als u via het Dashboard navigeert naar Design > Navigatie > Default. Alle links die je hier aanmaakt zullen vervolgens ook verschijnen in het menu. Categorieën De link Categorieën zal altijd in het hoofdmenu verschijnen zodra je categorieën hebt toegevoegd aan je webshop. Dit kun je doen via Dashboard > Producten > Categorieën. 14

15 Inspiratie De link Inspiratie zal verschijnen wanneer je een categorie hebt aangemaakt met de naam inspiratie. Deze pagina krijgt dan automatisch de Inspiratie layout en de subcategorieën de Inspiratie artikelen layout. Standaard links In het aangepaste menu is het ook mogelijk om standaard links naar de verschillende pagina s toe te voegen. In het voorbeeld hebben wij bijvoorbeeld de pagina s Nieuw en Sale toegevoegd. Klantenservice De link klantenservice zal altijd in het thema verschijnen achteraan de menu links. Search (Zoekbalk) In het Unity Theme hebben wij het mogelijk gemaakt om bezoekers specifiek te kunnen laten zoeken in een categorie. Als u via het Dashboard navigeert naar Design > Navigatie. Vervolgens klik je rechts bovenin op de groene knop Menu toevoegen en vul je bij titel Search in. Als je vervolgens op Opslaan klikt dan is je menu voor de zoekcategorieën aangemaakt en kun je beginnen met categorieën toevoegen aan dit navigatiemenu. Let op: Zoektermen worden pas getoond vanaf 3 karakters. 15

16 Wanneer alle categorieën staan ingevuld, zou je als het goed is de categorieën gelijk terug moeten vinden wanneer je een zoekterm in typt. Producten en categorieën op de voorpagina U kunt ervoor kiezen om bepaalde producten of categorieën extra aandacht te geven op de homepage van uw webwinkel. Het hangt van het door u gekozen thema af hoeveel producten en categorieën u op uw homepage kunt plaatsen. Wij adviseren maximaal twee rijen voor uw producten en twee voor de door u gekozen categorieën. Ga in het linker menu van de backoffice naar Design > Producten voorpagina om producten te selecteren en naar Design > Categorieën voorpagina om categorieën te selecteren. De vervolgstappen werken exact hetzelfde. 1. Klik rechts bovenin het scherm op de... toevoegen knop. 2. De product- of categorie pop-upvenster wordt geopend. Klik rechts naast het product op de groene plus om dit product aanbevolen product te maken. Klik rechts naast de categorie op Kies op de categorie aanbevolen categorie te maken. 16

17 Wilt u de volgorde wijzigen? Klik op het icoon links naast het product. Houd deze vast terwijl u met de muis het product naar de juiste plek sleept. U kunt producten/categorieën weer verwijderen naast het product op Verwijderen te klikken. Alle producten verwijderen? Doe dit kan via de bulkactie. Selecteer alle producten die u wilt verwijderen en klik links bovenin op Bulk acties > Verwijderen. Tips & tricks Hier vind je alle tips en tricks van het Unity Thema. Inspiratiepagina 1. Ga in het linker menu van de backoffice naar Producten > Categorieën. 2. Klik rechts bovenin het scherm op de knop Categorie toevoegen om een nieuwe categorie aan te maken. 3. Er opent een pop-upvenster waarin u een naam en type kunt aangeven. Title - Geef deze categorie de titels Inspiratie. 17

18 Type - Geeft de categorie het type Overzicht mee. 4. Na het aanmaken van de categorie komt u weer uit in het overzicht van alle categorieën. Klik op de categorie om deze te bewerken. Inspiratie Artikelen Wanneer u klaar bent met het invullen en bewerken van de categorie Inspiratie, kunt u hier subcategorieën onder hangen. De subcategorieën onder de categorie Inspiratie worden gezien als artikelen en krijgen automatisch de layout zoals in het Unity thema met inspiratie. Wanneer u deze subcategorieën op het type producten zet, dan kunt u producten aan deze artikelen toevoegen. 18

19 Plus en minpunten Het uitlichten van de plus en minpunten van producten is tegenwoordig iets wat veel mensen goed helpt bij het maken van hun keuze. Open en transparant vertellen over je product wat zijn sterke en minder sterke punten zijn, wekt vertrouwen en blijkt erg gebruiksvriendelijk te werken. Aan de slag De plus en minpunten kunt u aanmaken als u gaat naar Dashboard > Producten > Specificaties en vervolgens een set aanmaakt of bewerkt. Door in de titel het pluspunt neer te zetten, zoals Erg goedkoop en de waarde check in te vullen, maakt u een pluspunt aan. Door de waarde cross mee te geven, geeft u een minpunt aan. Handleiding Soms heeft u weleens producten waarbij een handleiding of een pdf document nodig is. In ons thema kunt u via specificaties een link naar een handleiding of pdf toevoegen. Als u gaat naar Dashboard > Producten > Specificaties kunt u een set aanmaken of bewerken. In de titel kunt u zetten wat u wilt, bijvoorbeeld handleiding, als u dan vervolgens een link in het waardeveld zet, dan wordt deze specificatie automatisch herkent als handleiding. Tip: PDF s kunt u ook bij dashboard > Tools > Bestanden uploaden en vervolgens de link kopiëren en plakken in het waardeveld. 19

20 20

21 3. Thema instellingen Om de instellingen van het thema aan te kunnen passen naar uw wensen kunt u navigeren naar Design en vervolgens naar Thema aanpassen. Presets De eerste optie op deze pagina is de Preset optie en kunt u na het klikken op de knop Bekijk presets één van de drie beschikbare presets selecteren. Zodra u op de installeren knop klikt wordt deze preset geïnstalleerd. Onthoud wel dat u bij het installeren van een preset nog wel de bijkomende afbeeldingen, zoals het logo, aan moet passen. 1. Logo Hier kunt u het logo en de favicon van uw webshop aanpassen. De maximum breedte van het logo is 200px (400px voor retina) en de maximum hoogte is 80px. De favicon moet 16 pixels breed en hoog zijn. 2. Typografie Hier is het mogelijk om de stijl van de algemene teksten van de website aan te passen. Bijvoorbeeld het lettertype en de tekstkleuren. 2.1 Titels (Google Web Fonts) Hier kunt u selecteren welk font er gebruikt moet worden voor de titels. 2.2 Body (Google Web Fonts) Hier kunt u selecteren welk font er gebruikt moet worden voor de teksten. 2.3 Top balk tekstkleur Hier kunt u de kleur van de tekst in de bovenste navigatiebalk veranderen. Dit betreft de balk waar de usp s en de keuze van het land en valuta instaan. 2.4 Header tekstkleur Hier kunt u de kleur aanpassen van de teksten in de header. Denk hierbij aan de icoontjes van mijn account, verlanglijst en winkelwagen. 2.5 Navigatie tekstkleur Hier kunt u de kleur aanpassen van de teksten in de navigatiebalk. Denk hierbij aan de menulinks en categorieën. 21

22 2.6 Body tekstkleur Hier is het mogelijk om de kleur van de teksten van de website aan te passen. Denk hierbij aan alle teksten, zoals categorieën, producten, tekstpagina s. Al het overige op de website. 2.7 Highlight tekstkleur Hier is het mogelijk om de highlight kleur van de teksten aan te passen. Denk hierbij aan de teksten die worden uitgelijnd of links waar mensen op kunnen klikken. 2.8 Knop tekstkleur Hier is het mogelijk de tekstkleur van de knoppen aanpassen. 2.9 Footer tekstkleur Hier is het mogelijk de tekstkleur aan te passen van de footer. Denk hierbij aan alle links die in de footer staan en social media icoontjes Sale Hier is het mogelijk de tekstkleur van Sale aan te passen Nieuw Hier is het mogelijk de tekstkleur van Nieuw aan te passen Bestseller Hier is het mogelijk de tekstkleur van Besteller aan te passen. 3. Achtergrond Hier is het mogelijk de achtergrondkleur van verschillende delen van u website aan te passen. 3.1 Achtergrondafbeelding Hier is het mogelijk een achtergrondafbeelding te uploaden voor uw website. 3.2 Achtergrondafbeelding positie Hier is het mogelijk om de positionering te selecteren van de afbeelding die is geüpload in het voorafgaande veld. 3.3 Achtergrondafbeelding herhalen Hier wordt bepaald hoe de afbeelding systematisch wordt weergegeven. 3.4 Achtergrondkleur Hier is het mogelijk om de achtergrondkleur van de website aan te passen. 3.5 Topbalk kleur Hier is het mogelijk om de topbalkkleur van de website aan te passen. 22

23 3.6 Header kleur Hier is het mogelijk om de header achtergrondkleur van de website aan te passen. 3.7 Knop Hier is het mogelijk om de kleur van de call-to-action knoppen op de website aan te passen. 3.8 Footer kleur Hier is het mogelijk om de achtergrondkleur van de footer aan te passen. 4. Afbeeldingen Hier is het mogelijk de afbeeldingen van de website aan te passen en de daar bijbehorende instellingen. De selectievelden onder deze categorie bepalen de weergave van de product-, categorie- en merk afbeeldingen. Wanneer één van deze is aangevinkt wordt de afbeelding opgevuld zodat er geen witruimtes ontstaan aan de zijkanten van de afbeelding. Optimale formaten van de afbeeldingen in het Unity Theme zijn: 4.1 Slider Voor de slider hebben wij 3 varianten. Hiervan verschillen de formaten betreft de afbeelding. Afhankelijk van welke variant u heeft gekozen, raden wij u aan de volgende formaten te hanteren. Splitscreen (960x470px) De opties onder het veld om je slider versie te selecteren, zijn voor de splitscreen. Het is mogelijk om de afbeelding te uploaden, de URL van de afbeelding, de titel en een subtitel. Klantenservice Slider (1020x420px) Headlines zijn afbeeldingen die een slider vormen die op uw homepage wordt weergegeven. Ga via het linker menu van de backoffice naar Design > Headlines een slider toe te voegen. 23

24 Headlines kunnen zeer goed gebruikt worden om (tijdelijke) acties te tonen. Let er op dat dit per taal moet worden ingesteld. 1. Klik rechts bovenin het scherm op Headline toevoegen om een nieuwe headlines toe te voegen. Als u meerdere headlines/afbeeldingen toevoegt, dan vormen de afbeeldingen samen een slideshow. 2. Er opent een nieuw scherm waarin u de titel van de headline kunt invullen en de taal selecteren. Titel - Naam van de headlines. Afhankelijk van uw gekozen thema komt deze tekst ook op de headline te staan. Taal - Selecteer de taal waarin deze headline wordt weergegeven. De talen in het drop-downmenu zijn dezelfde talen die zijn toegevoegd onder Instellingen > SHOP INSTELLINGEN > Internationalisatie. Wilt u in alle talen van uw shop dezelfde headline? Dan moet de headline voor iedere taal opnieuw aanmaken. 3. Na het aanmaken van de headline wordt u direct doorgestuurd naar de bewerkpagina. Titel - Naam van de headlines. Afhankelijk van uw gekozen thema komt deze tekst ook op de headline te staan. Deze heeft u bij het aanmaken van de headline al ingevuld. Taal - Selecteer de taal waarin deze headline wordt weergegeven. De talen in het drop-downmenu zijn dezelfde talen die zijn toegevoegd onder Instellingen> SHOP INSTELLINGEN > Internationalisatie. Wilt u in alle talen van uw shop 24

25 dezelfde headline? Dan moet de headline voor iedere taal opnieuw aanmaken. Link naar - U kunt de header ook laten doorlinken naar een categorie, merk, product of een externe link. Selecteer bij Type de optie waar u de headline naartoe wilt linken. In de tweede drop-downmenu kunt u de pagina kiezen waar de headline vervolgens naartoe moet linken. Kiest u bijvoorbeeld voor Type Product, dan kiest u in het tweede drop-downmenu het product waar de headline naartoe moet linken. Wanneer u in het dropdown menu kiest voor Aangepast kunt u ook naar een externe website verwijzen. Afbeelding - Klik op Bladeren om het bestand te uploaden. U kunt de afbeelding verwijderen door op de afbeelding te klikken en vervolgens op Verwijderen links onderin het pop-upvenster De volgorde van de headlines kunt u aanpassen door op het drie streepjes icoon te klikken links van de headline en de afbeelding naar boven of beneden te slepen. Servicedesk Om de servicedesk in te stellen, kijk naar servicedesk. Op elke headline zit een compressie. Deze compressie is een systeemlimiet om te voorkomen dat de systeem performance eronder lijdt. Als dit er niet op zou zitten, dan laadt bijvoorbeeld uw webwinkel een stuk minder snel. Slider (1920x470px) De instellingen om je slider in te stellen vind je onder het dropdown menu van waar je de slider variant selecteert. Je kan een afbeelding uploaden en een content met url neerzetten. Je kunt HTML gebruiken in het content tekstveld. 25

26 4.2 Product afbeeldingen Minimaal 650px breed in verband met de afbeelding op de productpagina. De hoogte kan variëren, maar voor het beste resultaat raden wij aan om één formaat aan te houden voor alle productafbeeldingen. Als het geüploade formaat anders is dan verschijnen er witte randen; wat dus op te lossen is door passende afbeeldingen aan te vinken. 4.3 Categorie afbeeldingen 510x290px in verband met de afbeelding op de collectiepagina. Als het geüploade formaat anders is dan verschijnen er witte randen; wat dus op te lossen is door passende afbeeldingen aan te vinken. 4.4 Merk afbeeldingen 244x100px in verband met de afbeelding op de collectiepagina. Als het geüploade formaat anders is dan verschijnen er witte randen; wat dus op te lossen is door passende afbeeldingen aan te vinken. 4.5 Product afbeelding dimensies Hier kunt u aangeven of u staande foto s heeft of liggende. Portrait: minimaal 650x750px. Square: minimaal 650x650px. 4.6 Productenrij Hier kunt u aangeven of u veel producten naast elkaar wilt of juist alles iets groter opgezet wilt hebben en minder producten op 1 rij. Uitgeschakeld homepage: 4 producten en collectiepagina 3 producten op 1 rij. Ingeschakeld homepage: 5 producten en collectiepagina 4 producten op 1 rij. 26

27 5. Algemeen Hier kunt u alle algemene instellingen vinden die op meerdere pagina s terugkomen. 5.1 Promotietekst Voer hier je promotietekst in. (you can use html in this field) 5.2 Gratis verzending Wanneer u bij een bepaald bedrag Gratis verzenden aanbiedt, dan is het mogelijk hier het vanaf bedrag in te voeren. Bijvoorbeeld gratis verzenden vanaf 100 euro of dollar, voer dan 100 in. Vervolgens zal van zelf uitgerekend worden hoeveel iemand nog bij moet bestellen om in aanmerking te komen voor gratis verzending. 5.3 USP S Alle webshop usp s kunt u hier instellen en zullen op meerdere plaatsen weergegeven worden. Ze worden namelijk bovenin de topnavigatie, Onderin boven de footer en na 8 producten op de collectiepagina weergegeven. * Voor de productpagina is er een aparte mogelijkheid om usp s toe te voegen voor alle producten. 5.4 Product thumbnails Activeer hier of je bij de producten op de desktop meerdere afbeeldingen wilt laten zien. 5.5 Keurmerk Geef uw belangrijkste keurmerk nu een prominent plek bij dit thema en koppel er een link aan, zodat de trouwbaarheid van uw webshop gelijk uitblinkt. 5.6 Paginatie Op de collectiepagina is het mogelijk om de paginatie zelf te kiezen. We hebben de mogelijkheid om voor vertrouwde paginatie met de nummers te gaan of dat je de nieuwe en verbeterde infinity scroll activeert. 5.7 Aangepaste winkelwagen Toont een vernieuwde weergave van de winkelwagenpagina met uw USP s en betaalmethoden. Het berekenen van verzendkosten wordt hier niet getoond. 27

28 6. Homepage Hier kunt u alle instellingen voor de homepagina vinden. 6.1 Openingstijden (Servicedesk) Net als alle grote webshops hebben wij een servicedesk functionaliteit binnen Lightspeed weten te ontwikkelen. Om deze naar wens te laten werken, dienen de openingstijden van elke dag ingevuld te worden. Wanneer de servicedesk wel actief is, maar geen openingstijden zijn ingevuld voor een specifieke dag, gaat de servicedesk er vanuit dat je gesloten bent. Ook kun je aangeven dat je gesloten bent door Closed of Gesloten in te voeren. De invoer van de openingstijden is erg bepalend, dus voer die als volgt in: [begintijd] - [sluitingstijd] Het horizontale streepje is het scheidingsteken tussen de begintijd en sluitingstijd 6.2 Shop de look Het is in het Unity Theme mogelijk om een Shop de Look te maken met uw eigen samengestelde producten. Upload hier de achtergrondafbeelding van de Shop de Look. 6.3 Shop de look producten Om producten toe te voegen aan de shop de look dien je ze eerst toe te voegen bij aanbevolen producten. Wanneer ze bij aan bevolen producten staan, voer je het ID in van de producten die je in de shop de look wilt laten terugkeren. Het ID van een product verkrijg je op de volgende manier: 1. Ga naar uw Dashboard en vervolgens producten. Kies een product in de backoffice en zoekt naar het ID nummer van dit product in de adresbalk van uw browser. Dit is het nummer aan het eind van de URL. Bijvoorbeeld: Tot slot gaat u naar uw Thema instellingen naar het kopje 6. Homepage. Daar kunt u vervolgens het ID nummer invoegen van het product. De product ID s kunt u eenvoudig scheiden doormiddel van een komma. 28

29 6.4 Shop de look coordinates Hier is het mogelijk om de coördinaten in te voeren waar de bolletjes moeten komen te staan van de Shop de look. De coördinaten zijn in procenten. Dus wanneer je het bolletje op 10% van de afbeelding wilt, dan vul je 10 in. Het in voeren van de coordinaten gaat als volgt: 1. Voer eerst de y-as oftewel de verticale as is in, bijvoorbeeld: Plaats dan achter dit getal een dubbele punt ( : ). 3. Voer vervolgens de x-as in oftewel de horizontale as, bijvoorbeeld: De coordinaten van het eerste bolletje zijn nu 34:22 en het bolletje zal dus verschijnen 34% van boven hoog en 22% van links. 5. Om het 2e bolletje in te voeren, plaatst u een komma (, ) en herhaalt u de bovenstaande stappen. Uiteindelijk zal je bij bijvoorbeeld 3 bolletjes een reeks hebben, als: 34:22,76:44,14: Homepage tags Activeer hier de homepage tags mocht je deze op de homepage willen tonen. 6.6 Voeg merken toe Activeer hier de merken. 7. Categorieën Hier kunt u alle instellingen voor de categorieën aanpassen. 7.1 Categorieën Het is mogelijk om de categorieën boven de producten of onder de producten neer te zetten. Als je up selecteert dan komen de categorieën boven de producten en bij down komen ze eronder te staan. 29

30 7.2 Categories in carousel Selecteer hier of je na 3 categorieën ze in een carousel wilt hebben of onder elkaar in rijen. 7.3 Maak alle categorieën zichtbaar in de zijbalk Door deze optie aan te vinken worden alle categorieën gelijk zichtbaar in de zijbalk. 8. Product Hier kunt u alle instellingen aanpassen van de productpagina en wat daaraan gelinkt is. 8.1 Volledige producttitel Kies hier of u de volledige titel op de productpagina wilt weergeven of niet. 8.2 Zichtbaar hoeveel producten op voorraad Kies hier of u wilt tonen hoeveel producten nog op voorraad zijn. 8.3 Reviews Kies hier of u de reviews wilt tonen. 8.4 Product usp s Hier kunt u de usp s invoeren voor op de productpagina en er een bijpassend icoontje voor alle 3 de usp s selecteren. 8.5 Verzendingstimer Voor vandaag besteld, morgen in huis hebben wij een verzendingstimer ontwikkelt, waar je de tijd in kan stellen tot hoe laat mensen kunnen bestellen voor de verzending van de volgende dag. Voer bij de start shipping timer de tijd in wanneer de timer moet beginnen. Bijvoorbeeld wanneer de timer van 8 uur s ochtends moet beginnen dan voer je 8 in. Voer bij shipping timer de tijd tot wanneer mensen kunnen bestellen om het de volgende dag nog in huis te hebben. 9. Klantenservice 9.1 Nieuwsbrief Activeer de nieuwsbrief en upload een bijpassende promotieafbeelding voor er naast. 9.2 Contactgegevens Voer de contactgegevens in van uw bedrijf die vervolgens in de footer verschijnen. 9.3 Social media Voer de link in van de social media account die bij u van toepassing zijn. 9.4 Feedback widgets Mocht u een feedback widget hebben, voer dan het desbetreffende ID in. 30