Je webwinkel vormgeven

Hulp bij een professioneel ontwerp voor je shop

1. Introductie

De vormgeving van je webwinkel kun je vergelijken met de etalage van een fysieke winkel; door wat je etaleert, spreek je een bepaalde doelgroep aan. Blink je uit met een professionele vormgeving? Dan weet je op te vallen tussen de vele webwinkels en kom je betrouwbaar over. Maar: hoe zorg je voor een goed ontwerp van je webshop? Dat leggen we je in deze gids kort en bondig (altijd fijn) uit. Lezen maar! Het Mijnwebwinkel Team

www.dreamkey.nl

2. Je huisstijl ontwerpen Voordat je met het ontwerp van je webwinkel aan de slag gaat, is het belangrijk om een huisstijl als basis te hebben. Een huisstijl is letterlijk de stijl van jouw bedrijf en zorgt ervoor dat mensen in één oogopslag zien wat je doet en waar je voor staat. Je huisstijl zorgt voor herkenbaarheid én onderscheid ten opzichte van je concurrenten. Door alle visuele elementen - dus ook je website - aan te laten sluiten bij je huisstijl zorg je als bedrijf voor een eenduidige uitstraling. Dit kun je realiseren door het gebruik van kleuren, lettertypes en beelden. 2.1 Je bedrijf analyseren Neem eerst je bedrijf eens goed onder de loep. Wie is je doelgroep? Welk gevoel wil je uitstralen? Wat vind je belangrijk? Schrijf de belangrijkste kernwoorden op en bekijk hoe je dit kunt visualiseren naar beeld. Ga hiervoor verder met de volgende stap: een moodboard maken. 2.2 Een moodboard maken Om je uiteindelijke huisstijl een bepaald gevoel uit te laten stralen, is het zinvol om eerst een moodboard te maken. Zoek verschillende plaatjes bij elkaar die qua sfeer of kleur passen bij je bedrijf. Vanuit dit moodboard kun je weer verder met het ontwerpen van je logo en kleurenpallet.

2.3 Je logo ontwerpen

Een logo is erg belangrijk voor je bedrijf. Het logo vormt de basis voor je huisstijl. Een goed logo herken je aan de volgende punten:

• Het sluit aan bij de sfeer van je bedrijf • Het logo blijft duidelijk wanneer het verkleind wordt • Het komt in zowel kleur als zwart/wit tot zijn recht • Tekst in het logo is goed leesbaar

Tip: Niet zo handig met Adobe Illustrator of Photoshop? Met onze logo creator ontwerp je eenvoudig je eigen logo! In dit blog leggen we precies uit hoe de logomaker werkt.

Een logo ontworpen met onze logo creator. 2.4 Lettertypes kiezen Kies naast het eventuele lettertype voor je logo maximaal 2 verschillende lettertypes (in het Engels: fonts) die je voor je merk gaat gebruiken. Zorg dat deze goed leesbaar zijn en bij elkaar passen. Over het algemeen zijn sans-serif lettertypes - zoals Arial en Verdana - het meest geschikt voor online teksten, omdat deze het beste leesbaar zijn.

Binnen ons systeem kun je kiezen uit een groot aantal Google Fonts. Besluit je om voor andere communicatie-uitingen toch een ander lettertype te downloaden, let dan goed op de licentie. Soms zijn gedownloade lettertypes vrij te gebruiken, maar het kan ook voorkomen dat je moet betalen om een licentie aan te schaffen.

2.5 Een kleurenpallet bepalen Wanneer je het moodboard voor je merk bepaald hebt, is het een stuk eenvoudiger om het kleurenpallet voor je huisstijl te bepalen. Kies een aantal hoofdkleuren (max. 3) en een duidelijke conversiekleur (voor dingen die je extra wil laten opvallen zoals de koop-knop).

Omdat er (waarschijnlijk) een hoop producten in je webwinkel komen te staan, is het aan te raden om van het kleurenpallet geen bonte kermis te maken. Zo zorg je ervoor dat de aandacht op je producten gevestigd blijft.

In hoofdstuk 4 leggen we uit waar je de kleuren instelt voor jouw webwinkel.

Tip: Adobe Color CC is een handig hulpmiddel om eenvoudig mooie kleurencombinaties samen te stellen.

Overzicht Adobe Color CC Zo, je huisstijl is bepaald! Nu kun je verder om de basis van je webwinkel op te zetten.

3. Het fundament voor een goed ontwerp Het vormgeven van je webwinkel begint bij een goede basis: het bepalen van de indeling. Zodra je deze basis hebt staan, is het tijd om er jouw eigen sausje overheen te gooien.

Tip: Houd er altijd rekening mee dat mensen een website van links naar rechts lezen en van boven naar beneden bekijken. De elementen die je links bovenin plaatst zien bezoekers over het algemeen het beste.

3.1 Responsive thema activeren Voordat je aan de slag gaat met het vormgeven van je webwinkel, is het verstandig om te kijken of het responsive thema aan staat. Het responsive thema zorgt ervoor dat je webwinkel op verschillende apparaten – pc, laptop, tablet of smartphone – optimaal wordt getoond.

Ga naar Instellingen/Vormgeving/Thema keuze en zorg dat hier het thema ‘Clear as Day’ aan staat.

Nog niet helemaal zeker of alles goed staat? In dit support item leggen we uit hoe je test of je webshop responsive is.

3.2 Je indeling bepalen Om een ontwerp voor je shop te kunnen maken, is het handig om eerst te begrijpen uit welke onderdelen je webwinkel bestaat. Wanneer je in de beheeromgeving gaat naar Instellingen/Vormgeving/Indeling zie je uit welke delen je webwinkel is opgebouwd. Kies de breedte van je webwinkel en stel in of je de topbalk of headerbalk aan wilt hebben staan.

Tip: Wij raden aan om de breedte op maximaal te zetten, dus 1100 pixels.

Je hoofdmenu is een van de belangrijkste elementen in je webwinkel. Zet deze daarom altijd op een duidelijke plek! Dit doe je door het element 'navigatiemenu' naar de gewenste plek te verslepen. Een duidelijke indeling van je webwinkel is essentieel om bezoekers de weg door je winkel te laten vinden.

Meer over het bepalen van een goede indeling voor je shop? Bekijk het webinar: ‘Een goede homepage indeling voor je webwinkel’

4. Kleuren en menustijl instellen In hoofdstuk 2.4 heb je het kleurenpallet voor je webwinkel kunnen bepalen. In dit hoofdstuk leggen we uit waar je deze kleuren instelt voor jouw webwinkel.

4.1 Kleuren instellen Om je huisstijl door te voeren in je webwinkel, stel je eenvoudig de kleuren in. Dit doe je bij Instelling/Vormgeving/Template instellingen. Hier vind je alle kleurinstellingen zoals: achtergrondkleur, tekstkleur en linkkleur.

Je tekstkleur moet goed leesbaar zijn, dus geef deze een kleur die voldoende afsteekt tegen de achtergrond. Zorg er ook voor dat je linkkleur anders is dan je tekstkleur. Zo zien je bezoekers wanneer ze ergens op kunnen klikken.

Tip: Wil je sommige onderdelen transparant instellen? Laat het invulveld dan leeg.

4.2 Menustijl instellen Zoals eerder beschreven is het van belang dat je hoofdmenu goed opvalt en overzichtelijk is. Om ervoor te zorgen dat je menu goed aansluit bij de vormgeving van je webwinkel, stel je eenvoudig de kleuren en opmaak van je menu in bij Vormgeving/Template instellingen/Navigatie. Je kunt hier ook instellen of je hyperlinks in het menu wilt onderstrepen etc. Op de volgende pagina’s vind je een compleet overzicht van alle Template instellingen.

Template instellingen Bij Vormgeving/Template instellingen vind je alle mogelijkheden om jouw huisstijl door te voeren in je shop. De template instellingen zijn onderverdeeld in diverse tabbladen. In dit document vind je per tabblad terug wat je zoal kunt aanpassen en hoe.

Achtergrondkleuren Achtergrond Upload hier je achtergrondafbeelding. Klik op ‘Achtergrond positie

aanpassen’ om te bepalen hoe deze getoond wordt (bijvoorbeeld herhaald of gecentreerd).

Achtergrondkleuren Liever geen afbeelding of gebruik je een afbeelding die niet helemaal doorloopt? Stel dan hier de achtergrondkleur in.

Gehele website Favicon Upload hier een logo of icoon van 16x16 pixels. Deze wordt getoond

in het tabblad van de internetbrowser. Is je logo te ingewikkeld voor zo’n ieniemienie plaatje? Kies dan liever voor een detail uit je logo (zoals de eerste letter).

Ondersteunende kleur

De ondersteunende kleur wordt gebruikt om op terug te vallen en kun je tegenkomen op diverse plekken. Waar precies? Dat hangt af van je andere kleurinstellingen. Kies hier daarom een neutrale kleur die past binnen je pallet.

Witruimte rond paginainhoud

Als tekst tegen een rand aan staat leest dat niet zo lekker, daarom staat de witruimte automatisch ingesteld op 25 pixels. Plaats je afbeeldingen in de paginainhoud? Dan wil je misschien wel alle 1100 pixels gebruiken. Vul hier dan 0 in.

Schaduw tonen Voeg met een druk op deze knop schaduw toe aan de artikelblokken, blokken in je indeling en het submenu in je navigatie.

Artikeloverzichten Stickerkleur Gebruik je stickerteksten bij artikelen of automatische stickers? Dan krijgen

ze deze (tekst)kleur. In hoofdstuk 7.1 lees je er meer over.

Automatische stickers

Schakel deze functie in om automatisch het kortingspercentage te tonen bij artikelen met een actieprijs.

Foto weergave Als deze functie aan staat wordt de ruimte voor je artikelafbeelding en subpagina-afbeelding volledig gebruikt. Hoe dat precies uitpakt hangt af

van het formaat van je foto’s. Uitproberen maar!

Witruimte rond foto’s

Standaard staat er geen witte rand om artikelafbeeldingen in je artikeloverzicht. Wil je dat wel, dan bepaal je hier hoe dik die rand is.

Overig Subpagina navigatie

Kleuren van de subpagina navigatie: Deze (tekst)kleur wordt gebruikt voor je subpagina-blokken als deze getoond worden in je winkel. Of dat zo is zie je terug bij Vormgeving/Pagina instellingen.

Slideshow achtergrondkleur

Deze kleur kan kort zichtbaar zijn tussen de afbeeldingen door. Gebruik dus een neutrale kleur.

Slideshow bladerknopjes

Slideshow bladerknopjes: kies hier een passende kleur voor de knopjes die op je slideshow-afbeeldingen getoond worden.

Bestelproces betaalstappen tonen

Betaalstappen tonen: de knoppen 1 t/m 4 van het bestelproces zet je hier aan of uit. Hint: onze voorkeur heeft aan! Zo weet je bezoeker precies hoeveel stappen hij nog te gaan heeft.

Koppen Koppen tonen Gebruik je kolommen in je indeling? Dan zorgt deze functie voor een

kopje boven elk element in die kolommen. Een titel zoals gastenboek of nieuwsbrief verdwijnt dus wanneer je dit schuifje uitzet.

Kleuren Stel hier de kleuren in voor bovengenoemde koppen. Achtergrond-afbeelding

Upload hier een achtergrondafbeelding. Deze wordt getoond achter de koppen van je indeling.

Blokken Achtergrondkleur De hoofdkolom bestaat uit de welbekende 1100 pixels breedte waarin

het allemaal gebeurt. De zijkolommen staan links en rechts van de hoofdkolom. Dit gedeelte valt weg op mobiele apparaten.

Kleur van alle randen

Kleur van alle randen: deze functie zet een randje om de verschillende blokken, en om alle artikelen.

Afgeronde hoeken Zorg voor wat minder scherpe hoeken met deze instelling. Bekijk het voorbeeld en stel eventueel het aantal pixels nog ietsjes bij.

Normale teksten Lettertype Kies hier uit een flinke collectie (Google)fonts. Dit font wordt gebruikt

voor alle ‘normale teksten’ zoals artikel- en paginaomschrijvingen. Per pagina/artikel kun je dit nog aanpassen via de editor.

Lettergrootte Stel hier in hoe groot de letters standaard moeten worden. Kleur teksten En uiteraard welke kleur ze moeten krijgen. Kleur van links Eventuele links in je tekst geef je hiermee een afwijkende kleur. Prijzen De prijzen van je artikelen krijgen de kleur die je hier kiest, voor

afgeprijsde artikelen kun je een afwijkende kleur invullen. De instelling geldt voor zowel artikeloverzichten als detailpagina’s.

Lettergrootte prijs Mag de prijs wel wat extra in het oog springen? Pas dan hier de grootte aan.

Lettergrootte artikelnaam

Met deze instelling pas je de grootte van de namen in je artikeloverzichten aan.

Kopteksten Lettertype Bepaal hier welk font je wilt gebruiken voor alle koppen in je shop.

Denk aan paginanamen, artikelnamen en kopjes in de indeling. Lettergrootte Hier vind je de opties voor de lettergrootte van je koppen. Probeer

gerust wat opties uit om uit te vinden welke het best bij jouw opmaak past.

Kleur koppen Of je hier dezelfde kleur gebruikt als bij gewone teksten bepaal je natuurlijk helemaal zelf.

Knoppen Achtergrondkleur Inmiddels heb je vast en zeker een mooi kleurenpallet bepaald,

bepaal hier welk van de kleuren je graag op de knoppen hebt. Tekstkleur op knoppen

Zorg voor voldoende contrast tussen achtergrondkleur en tekstkleur zodat het goed leesbaar is.

Achtergrondkleur koop-knop

Kies voor deze knop een kleur waarop je klanten graag willen klikken en die complementair is aan het kleurenpallet van je shop!

Niet beschikbare knoppen

Dit zijn knoppen waar je klant niet op kan klikken, zoals stap 3 en 4 van het bestelproces wanneer je klant stap 1 en 2 nog niet heeft afgerond.

Formulier elementen Kleur randen invulvelden

Deze velden kom je bijvoorbeeld tegen in het bestelproces en op je contactformulier.

Kleur van foutmeldingen

Gebruik hier bij voorkeur een opvallende waarschuwende kleur, zoals rood.

Kleur van infomeldingen

Kies een kleur uit je huisstijl die afsteekt tegen je voornaamste kleur.

Kleuren en gedrag Pagina’s in het menu Hier bepaal je welke kleuren je navigatiemenu krijgt. Actieve status en hover

De pagina die open staat (actief) en de pagina die je muis aanwijst (hover) krijgen deze kleuren.

Standaard opmaak Bepaal hier of je alle pagina’s in het menu onderstreept en/of

schuingedrukt wilt tonen. Je kunt van deze instelling afwijken door in het submenu bij Inhoud/Pagina’s voor ‘Menustijl’ te kiezen

Pijltje onderliggende pagina’s

Als deze functie aan staat wordt er pijltje getoond bij elke hoofdpagina die 1 of meerdere subpagina’s heeft.

Sticky navigatie Deze knop is alleen te zien wanneer je navigatie in een balk staat. Zet je de knop aan dan blijft je navigatiebalk plakken (en dus zichtbaar) wanneer je bezoeker naar beneden scrollt op een pagina. Handig!

Menu bullet De afbeelding die je hier toevoegt (max. 16x16 pixels) wordt gebruikt bij opsommingen in plaats van de welbekende zwarte stip.

Tekst Lettertype navigatie Eventueel kun je hier een alternatief lettertype kiezen voor je

navigatie. Lettergrootte Automatisch gebruiken we hier de grootte die je koos voor normale

teksten. Aanpassen kan door een ander aantal pixels uit het rijtje te kiezen.

Pagina header Logo in de header Upload hier je bestaande logo, of maak een nieuwe via de

Logomaker. Het bestand mag maximaal 1100 pixels breed zijn en maximaal 400 pixels hoog.

Uitlijning logo Kies hier of je het logo links, in het midden, of rechts wilt tonen. Header achtergrondafbeelding

Deze achtergrond van max. 2200 x 400 pixels wordt achter je logo getoond. Deze mag je natuurlijk ook weglaten. Bijvoorbeeld omdat je er een kleur achter wilt tonen.

Achtergrondkleuren Stel hier een achtergrondkleur in. Deze tekstkleur gebruiken we voor je winkelnaam indien er geen logoafbeelding is geüpload.

Topbalk Kleuren topbalk Bepaal hier de kleuren van de dunne balk boven je

headerafbeelding. Breedte topbalk Kies hier of je balk over de volledige breedte moet doorlopen. Uitlijning van de blokken

De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 2 rechts).

Headerbalk Kleuren headerbalk Bepaal hier de kleur van de dunne balk onder je headerafbeelding Breedte headerbalk Kies hier of je balk over de volledige breedte moet doorlopen Uitlijning van de blokken

De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 1 rechts).

Headerbalk achtergrond

Wil je een afbeelding, patroon of kleur achter je headerbalk tonen? Upload hier dan een afbeelding van maximaal 50 pixels hoog.

Footer Kleuren Deze kleuren worden alleen gebruikt voor de footer. Hoe je de

kleuren invult weet je inmiddels J Kleur van links Als je een footer gebruikt staan er ongetwijfeld links in, hiermee

geef je ze een ander kleurtje dan de links in je normale teksten. Lettergrootte Automatisch gebruiken we hier de grootte die je koos voor

normale teksten Lettergrootte koppen En hier de grootte die je koos voor koppen. Aanpassen kan door

een ander aantal pixels uit het rijtje te kiezen.

5. Afbeeldingen toevoegen aan je webwinkel Je indeling staat en je hebt je basiskleuren ingesteld. Dan is het nu tijd om afbeeldingen toe te voegen aan je webwinkel.

5.1 Sfeerbeelden Sfeerbeelden van je producten en je merk zorgen voor een beleving bij je klanten. Je kunt ervoor kiezen om dit beeldmateriaal zelf te maken. Zorg er dan wel voor dat dit op een professionele manier gebeurt. Professionele foto’s zijn namelijk cruciaal om het vertrouwen van je bezoekers te winnen.

Tip: Zelf met productfotografie aan de slag? Lees het blog ‘Zo maak je zelf goede productfoto’s!’ voor inspiratie.

Ben je zelf niet in de mogelijkheid om goed beeldmateriaal te maken, dan zijn er gelukkig ook andere manieren om dit op te lossen. Zo kun je bijvoorbeeld een fotograaf inhuren om sfeerbeelden te maken of beeldmateriaal zoeken op (de wat hippere) stockphoto websites.

5.2 Achtergrondafbeelding Om een achtergrond afbeelding in te stellen ga je naar Instellingen/Vormgeving/Template instellingen/Algemeen. Let erop dat je de achtergrond van je webwinkel neutraal en rustig houdt. De aandacht moet naar de inhoud gaan en niet naar de achtergrond.

Tip: Op zoek naar een rustige achtergrondafbeelding? Kijk dan eens op: http://subtlepatterns.com.

5.3 Header De header is de afbeelding bovenin je webwinkel. Het is gebruikelijk om hier je logo (en eventueel pay-off) in te plaatsen en eventueel je USP’s (Unique Selling Points), betaalmethodes, contactgegevens en/of een keurmerk.

Bij Instellingen/Vormgeving/Indeling kun je de header instellen. Bepaal de gewenste breedte van je header. Vervolgens kun je de elementen die je in de header wilt zetten naar 'pagina header' slepen. Meer tips over het maken van een header? Bekijk het blog 'DIY: maak een goede header voor je shop'.

Tip: Wanneer je iets communiceert in je header, hou het dan kort. Zo kan je bezoeker de belangrijkste boodschap direct scannen.

5.4 Afbeelding plaatsen Het plaatsen van een afbeelding kan op twee manieren. Je kunt een afbeelding vanaf je computer uploaden naar het afbeeldingenoverzicht of een afbeelding vanuit een URL (webadres) plaatsen.

In het support gedeelte op onze site lees je alles over het plaatsen van afbeeldingen.

5.5 Afbeeldingen naast elkaar plaatsen In sommige gevallen kan het handig zijn om meerdere afbeeldingen naast elkaar te plaatsen. Denk bijvoorbeeld aan afbeeldingen van productcategorieën. Op ons blog leggen we je uit hoe je afbeeldingen naast elkaar kunt plaatsen.

De webshop Tinne+Mia gebruikt sfeerbeelden om door te linken naar verschillende categorieën.

6. Een slideshow in je webwinkel plaatsen Een slideshow is een handige manier om aanbiedingen extra onder de aandacht te brengen of sfeerbeelden van je producten te tonen.

6.1 Afbeeldingen voor je slider Meestal worden er minimaal drie afbeeldingen gebruikt in een slider. Naast het uploaden van eigen slideshow afbeeldingen, kun je ook aanbiedingen, meest verkochte producten of geselecteerde producten tonen in je slideshow. Probeer ervoor te zorgen dat je verschillende foto’s gebruikt die bij elkaar passen, bijvoorbeeld door één stijl van fotograferen of kleurgebruik. Zo behoud je eenheid in je webwinkel.

Vervolgens is het belangrijk dat de afbeeldingen voor je slideshow allemaal dezelfde afmeting hebben. Zorg ervoor dat je afbeelding minimaal 2200 pixels breed is. Bekijk voor de hoogte wat mooi past bij jouw shop.

Tip: Via de website www.fotor.com kan je gemakkelijk het formaat van je foto bepalen. Ga naar de website, klik op ‘edit’ en importeer je afbeelding via de knop 'import'. Klik vervolgens op ‘crop’ om de afmeting van de afbeelding aan te passen. 6.2 Stel je slideshow in Ga in de beheeromgeving naar Instellingen/Slideshow. Het is mogelijk om de slideshow bovenaan tussen de paginaheader en pagina-inhoud te tonen of juist onder of boven de pagina-inhoud.

Tip: Hulp nodig bij het maken van een slideshow? Bekijk de video 'een schitterende slideshow maak je zo' en lees het bijbehorende blog. Ook kun je via het support item bekijken hoe je een slideshow in je webwinkel plaatst.

7. Productpresentatie Een ander belangrijk onderdeel van de vormgeving van je webwinkel is je productpresentatie. Door je producten op een professionele en waarheidsgetrouwe manier te presenteren, verhoog je de kans op conversies en verminder je de kans op retouren.

7.1 Productfotografie Een waarheidsgetrouwe weergave van je producten zorgt ervoor dat klanten minder snel teleurgesteld worden en hun product minder snel retourneren. Het is bijvoorbeeld belangrijk dat de kleur van je product overeenkomt met de kleur in werkelijkheid.

Je kunt zowel sfeerfoto’s van je producten maken als packshots. Met packshots bedoelen we dat je jouw producten tegen een witte achtergrond fotografeert waardoor ze vrijstaand worden.

Op ons blog lees je meer over het maken van goede productfoto’s.

7.2 Stickers Stickers zijn een goede manier om je artikelen extra te laten opvallen. Zo kun je ze gebruiken om aanbiedingen en kortingen te tonen of om meer informatie te geven over een bepaald product.

Om de stickertekst in te voeren ga je naar Inhoud/Artikelen en klik je op het artikel dat je wilt bewerken. Zorg dat er een vinkje staat bij 'stickertekst'. Kies vervolgens bij Instellingen/Vormgeving/Template instellingen de stickerkleur

Sticker in het thema 'Classic' (links) en in het thema 'Clear as Day' (rechts)

7.3 Verschillende productweergaves Je kunt je producten in je productoverzicht en op de productdetailpagina op verschillende manieren weergeven. Experimenteer met welke weergave voor jouw producten het beste werkt. Moet de nadruk vooral op de tekst liggen, kies dan voor de weergave ‘text first’. Zijn de afbeeldingen belangrijker? Kies dan een van de andere weergaves.

• Productoverzicht weergave Er zijn verschillende manieren om je producten te tonen op de productdetailpagina. Ga naar Inhoud/Artikelinstellingen om een productweergave te kiezen voor je producten op een bepaalde pagina. • Productdetailpagina weergave Om je productweergave voor de productdetailpagina in te stellen, ga je ook naar Inhoud/Artikelinstellingen. Als je op deze pagina wat verder naar beneden scrollt, kom je bij de instellingen voor de productdetailpagina terecht.

Tip: lees ook het blog '5 manieren om je producten te presenteren'.

8. Je footer ontwerpen Het onderste stukje van je webwinkel: de footer. Het lijkt misschien een onbelangrijk deel, maar er kijken meer mensen naar de footer van je webshop dan je denkt! De voornaamste reden voor bezoekers om naar beneden te scrollen, is het zoeken van contactgegevens of informatie over voorwaarden, retouren, verzendkosten etc.

Footer van Nanaas.nl Je kunt de footer inschakelen bij Instellingen/Vormgeving/Indeling. Zorg dat de footer aangevinkt staat onder de kop 'Instellingen'. Je kunt nu je footer indelen in verschillende kolommen waar je vervolgens tekst of afbeeldingen in plaatst. Tip: Bekijk ons webinar 'Hoe maak ik een fabeltastische footer?' en lees het bijbehorende blog terug. Of leer hoe je van A tot Z een footer maakt via het item over footers in onze support sectie.

9. Je huisstijl doorvoeren Voor een professionele uitstraling is het slim om je huisstijl in alle uitingen door te voeren. Denk naast je webwinkel bijvoorbeeld aan je facturen, je visitekaartjes en de uitstraling van je stand wanneer je op een beurs staat.

9.1 Favicon Een favicon is het icoontje dat in de adresbalk van je webbrowser verschijnt wanneer iemand je website opent. Door een favicon in te stellen maak je je webwinkel herkenbaar in iemands bookmarks. Maak eenvoudig je eigen favicon en ga naar Instellingen/Vormgeving/Template instellingen 'Gehele website' om je favicon in te stellen.

Het favicon icoontje in de webbrowser. 9.2 Vormgeving van facturen Voor een professionele uitstraling, voer je je huisstijl ook door in de opmaak van je facturen. Ga in de beheeromgeving naar Instellingen/Vormgeving/Factuurindeling om de achtergrond van je factuur te kiezen en om je logo op facturen plaatsen.

Augusta Wind kenmerkt haar handgemaakte tassen met een stempel. 9.3 Je vormgeving doorvoeren in overige uitingen Natuurlijk zijn er nog een hele hoop andere plekken waar je jouw huisstijl kunt doorvoeren. Denk bijvoorbeeld aan visitekaartjes, de vormgeving van je nieuwsbrief en je stand tijdens een beurs. Maar ook aan producten die je zelf hebt gemaakt en een kenmerk wilt meegeven.

10. Afsluiting Hopelijk hebben bovenstaande tips je geholpen om een goed ontwerp voor je webwinkel te maken. Houd wel altijd in gedachten dat functie minstens even belangrijk is als ontwerp; zorg er dus wel voor dat je mooi vormgegeven webwinkel ook nog gebruiksvriendelijk is.

Wanneer je zelf niet zo thuis bent in beeldbewerking en grafisch ontwerp, is het slim om hulp in te schakelen. Onze ontwerppartner Ontwerpmijnwebwinkel is gespecialiseerd in het ontwerpen van webwinkels met ons systeem. Met een professioneel vormgegeven shop win je sneller het vertrouwen bij bezoekers wat het aantal conversies ten goede zal komen.

Mocht je het antwoord op je vraag niet vinden bij 'Vraag & Antwoord', dan staat ons support team op maandag t/m vrijdag van 09.00 tot 17.00 voor je klaar. Stuur gerust een e-mail of tweet je vraag.

Tip: Benieuwd naar vormgeving van andere webwinkels? Laat je inspireren door shops gemaakt met ons systeem.