In deze handleiding leggen we uit hoe je werkt met de nieuwe Shop Thema en Page Builder. En tonen we de filmjes met visuele uitleg.

1. Introductie 

Specificaties

Met de nieuwe Header & Footer Builder kunnen webshop-eigenaren zelf hun header en footer vormgeven. Deze hand-out helpt gebruikers op weg met de basisstappen en een overzicht van de belangrijkste functies. 

2. Shop Thema-instellingen (stijlinstellingen voor je thema) 

Ga in het CMS naar: ‘CMS / layout /Shop Thema → Shop thema instellen‘.

Hier stel je de algemene vormgeving/huisstijl van je webshop in. 

Klik op ‘Nieuw Shopthema toevoegen‘ (groene knop rechtsboven)

2.1 Kleurnamen 

• Minimaal 2 en maximaal 9 kleuren instelbaar. Van deze kleuren maakt het nog twee tinten dus uiteindelijk heb je 27 kleuren om uit te kiezen. 

• Klik op de kleur en kies in het kleuren menu de Hex –code en vul deze in. 

Klik achter iedere kleur afzonderlijk op ‘Opslaan’ (diskette) 

• Deze kleuren kunnen vervolgens gekozen en gebruikt worden voor buttons, tekst, achtergronden en andere elementen waar de kleur instelbaar is. 

2.2 Lettertypen (fonts) 

• Stel het primary en secondary lettertype in.

• Er kan gekozen worden uit de lettertypen die die tevoorschijn komen in het lijstje.

• Klik achter ieder font op ‘Opslaan‘ (diskette).

Het primary-lettertype is het basis lettertype en wordt gebruikt voor de body-tekst en in de (navigatie) menu’s. Het secondary-lettertype wordt gebruikt voor kopjes.

2.3 Hoeken 

Je kunt kiezen uit vooringestelde waarden.

Button-hoeken 

Pas de afronding van knoppen aan door de ‘Radius’ te kiezen. Dit is de ronding van de hoek. Hiermee bepaal je of knoppen hoekig, mild afgerond of volledig rond ogen. Klik op ‘Shopthema opslaan‘ als je klaar bent.

Border-hoeken 

Dit werkt hetzelfde als de button-hoeken. Kleine tip: maak deze gelijk van elkaar, dit zorgt voor een consistent design van de knoppen en borders. Klik op ‘Opslaan‘ als je klaar bent.

3. Footer Builder 

De footer is te bewerken via het CMS menu: 
Layout/Footer → Scrol naar beneden op de pagina (de velden kun je verder leeg laten) → Klik op Shop element aanpassen  

3.1 Voorvertoning & devices 

Boven in de editor staan drie weergave-opties: 

• Desktop 

• Tablet 

• Mobiel 

Daarnaast: 

• Preview-knop (vierkant met pijl) → hier bekijk hoe je header eruitziet 

• Export changes → gebruik dit alleen als je klaar bent met bewerken (versie opslaan)

In het linkermenu vind je verschillende elementen die je naar de rechterzijde kunt slepen. Er verschijnt een groene balk met waar het element naartoe gesleept moet worden. Zodra je het element naar de juiste plek hebt gesleept, zal deze verschijnen.  

Om steeds terug te gaan naar het hoofdmenu klik je op het plusje.  

3.2 Elementopties 

Wanneer je een element selecteert, zijn dit de beschikbare acties: 

• Verwijderen (prullenbak) 

• Kopiëren (kopieer icoon) 
• Plakken (plak icoon)

• Verplaatsen (pijl alle kanten icoon) 

• Onderliggend element selecteren (niveau hoger) 

3.3 Footer USP 

Element met Unique Selling Points – Footer Usp 

• Sleep het balkje naar rechts totdat er een groene streep verschijnt. 

Vervolgens kun je de Footer USP’s opmaken.

1. Als je kiest voor Mobiel dan wordt de Footer Usp weergegeven als een Swiper.

2. Klik op ‘Toon alle slides‘ om alle Usp’s te tonen.

3.4 Footer Shipping methods 

Afhankelijk van welk ‘doos’/kader/container je kiest krijg je verschillende optie in het linkermenu te zien

Hier worden de verzendwijzen en betaalmethoden toegevoegd. Je kunt de afbeeldingen naar wens toevoegen/verwijderen. Je kunt de volgorde wijzigen door te slepen.  

3.5 Footer Menu 

Er worden 5 kolommen toegevoegd in de footer. Door op een tandwieltje te klikken kun je per kolom de tekst wijzigen. Links voeg je toe door op het menu-item te klikken en onder Href de link toe te voegen. Je voegt extra kolommen toe door te kopiëren.  

3.6 Footer Mobile Menu 

Mobiele variant van het menu. Kies mobiel weergave.

Dit werkt met accordeons voor compacte presentatie.

3.7 Footer Disclaimer 

• Vrij configureerbare tekst.
• Perfect voor juridische tekst, copyright of voorwaarden.

• Door de juiste container te kiezen kun je een link toevoegen die dan extern verwijst naar bv Facebook

4. Header Builder 

De header is te bewerken via het CMS menu:
Layout / Header → Scrol naar beneden op de pagina (de velden kun je verder leeg laten) –> Klik op —  Creëer shopelement.

4.1 Voorvertoning & devices 

Boven in de editor staan drie weergave-opties: 

• Desktop 

• Tablet 

• Mobiel 

Daarnaast: 

• Preview-knop (vierkant met pijl) → hier bekijk hoe je header eruitziet.

• Export changes → gebruik dit alleen als je klaar bent met bewerken (versie opslaan).

5. Header-elementen (Add blocks) 

In het linkermenu vind je verschillende elementen die je naar de rechterzijde kunt slepen. Er verschijnt een groene balk met waar het element naartoe gesleept moet worden. Zodra je het element naar de juiste plek hebt gesleept, zal deze verschijnen.  

Om steeds terug te gaan naar het hoofdmenu klik je op het Plusje.  

5.1 Elementopties 

Wanneer je een element selecteert, zijn dit de beschikbare acties: 

• Verwijderen (prullenbak) 

• Kopiëren (kopieer icoon) 

• Verplaatsen (pijl alle kanten icoon) 

• Onderliggend element selecteren (niveau hoger) 

5.2 USP Bar 

Er zijn twee varianten: 

1. Desktop weergave –> Bar 

2. Mobiele weergave –> Swiper mobile (dit is een slider) 

Afhankelijk van de weergave waar je in zit (desktop of mobiel), wordt de juiste variant van de USP bar getoond.  

Desktop weergave

Icoontje aanpassen (het element, zoals een sterretje of hartje, wat voor de USP tekst staat) 

1. Klik op het icoontje  

2. In het linkermenu verschijnt de icoon-bibliotheek 

3. Klik op het gewenste icoontje  

Om een ‘ander’ icoontje uit fontawesome toe te voegen, klik je op Icon name: 

1. Ga naar https://fontawesome.com/icons 

2. Zoek op het gewenste icoontje (in het Engels) 

3. Kopieer en plak de titel van het icoontje  

Om je eigen icoontje toe te voegen , klik je op ’tandwieltje’:

1. Klik op ’tandwieltje’
2. Verwijder ….. USP
3. Kies een andere USP layout
4. Vervang de standaard afbeelding door de icoon-afbeelding

Tekst aanpassen 

1. Klik op de tekst die je wilt aanpassen 

2. Pas de tekst aan 

3. Kleur aanpassen kan naar wens in het linkermenu  

Kleur aanpassen van de USP bar 

1. Klik op het verplaats-icoontje in de USP bar 

2. Klik in het linkermenu op Style 

3. Klik op de gewenst kleur 

Mobiele weergave 

Klik op de tekst (USP 1) + klik vervolgens op het tandwieltje van dit venster. Klik in het linkermenu op ‘Show all slides’ om alle USP’s te tonen en aan te passen. 

• Slides per view: hoeveel USP’s in beeld komen per slide  

• Space between slides: de hoeveelheid ruimte tussen de USP’s 

• Show navigation: er worden pijltjes toegevoegd aan beide zijdes van de USP, zodat de klant dit handmatig kan swipen 

• Show bullets: er komen bullets onder de USP’s te staan. De hoeveelheid USP’s die je toegevoegd komt overeen met de hoeveelheid bullets. 

• Loop: hiermee zorg je dat na de laatste slide de eerste slide weer wordt getoond 

• Autoplay: de swiper start automatisch 

• Delay: de tijd dat de USP in beeld blijft voor de volgende USP wordt getoond. Het dient in milliseconden te worden ingevuld. 2 seconden = 2.000 milliseconden.  

Icoontje aanpassen 

1. Klik op het icoontje  

2. In het linkermenu verschijnt de icoon-bibliotheek 

3. Klik op het gewenste icoontje  

Om een custom icoontje toe te voegen, klik je op Icon name: 

1. Ga naar https://fontawesome.com/icons 

2. Zoek op het gewenste icoontje (in het Engels) 
3. Kopieer en plak de titel van het icoontje  

Om je eigen icoontje toe te voegen , klik je op ’tandwieltje’:

1. Klik op ’tandwieltje’
2. Verwijder ….. USP
3. Kies een andere USP layout
4. Vervang de standaard afbeelding door de icoon-afbeelding

Tekst aanpassen 

1. Klik op de tekst die je wilt aanpassen 

2. Pas de tekst aan 

3. Kleur aanpassen kan naar wens in het linkermenu  

Kleur aanpassen van de USP bar 

1. Klik op het verplaats-icoontje in de USP bar 

2. Klik in het linkermenu op Style 
3. Klik op de gewenste kleur

5.3 Standaard Navigatiebalk 

Dit is de standaard menubalk bovenaan de pagina. Het bevat een logo, standaard dropdown-menu en de icoontjes voor je account en winkelmandje. 

• Sleep het blok in het linkermenu genaamd Standaard Navigatiebalk naar de rechterzijde. Plaats deze onder de USP bar. 

Dropdowns toevoegen

1. Klik op Dropdown Menu item in de Standaard Navigatiebalk in het rechterscherm
2. Klik op het tandwiel-icoon
3. Kies het gewenste menu-item:

1. Add menu item: los menu-item (linkje naar een pagina)
2. Add item with dropdown: menu-item met een uitklapmenu 
3. Add item with search dropdown: menu-item waarmee je kunt zoeken in je website 
4. Add item with mega search: niet relevant voor deze navigatiebalk 

4. Je voegt het item toe door op het groene plusje te klikken. Het item toont dan vanzelf in het rechterscherm.  

Menu items bewerken 

Menu item 

1. Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan.  

2. Voeg in het linkermenu onder Href de link toe waar het menu naartoe moet linken.  

Item with dropdown 

1. Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan. 
2. Klik op het tandwieltje 
3. Klik in het linkermenu op Show dropdown menu  
4. Klik in het rechterscherm op het dropdownitem en pas de tekst aan 
5. Voeg in het linkermenu onder Href de link toe waar het menu naartoe moet linken. 
6. Doe dit voor ieder dropdown item.  
7. Om nog een extra item in de dropdown toe te voegen, klik op het tandwieltje en vervolgens in het linkermenu op Add menuitem.  

Add item with search dropdown 

1. Deze staat standaard in het de Standaard Navigatiebalk (vergrootglas) 

Weergave per apparaat 

Hier stel je in op welk apparaat de Navigatiebalk zichtbaar is. Dit pas je aan door op het gewenste item in het rechterscherm te klikken. In het linkermenu klik je onder Weergave per apparaat om het menu aan of uit te schakelen met de schakelaar. 

5.4 Mega Menu 

Dit is het paginabrede-menu wat uitklapt onder je menu. Geschikt voor grotere of visuele menu’s. 

Mega menu toevoegen 

Sleep het blok in het linkermenu één van de Navigatiebalk met Mega menu naar de rechterzijde. Plaats deze onder de USP bar. 

5.5 Mega Menu weergave bewerken 

Open het menu via 1. het tandwiel in het Mega menu  en klik op 2. Mega menu tonen

Klik op Edit panel en pas het menu aan waar nodig.

1. Klik op het tandwiel-icoon in het Mega menu item in de Navigatiebalk in het rechterscherm.  
2. Klik op Toon Mega menu in het linkerscherm. De dropdown opties worden nu getoond in het rechterscherm. 
3. Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan.  
4. Voeg in het linkermenu onder Link de link toe waar het menu naartoe moet linken. 

Afbeelding toevoegen 

1. Verleng de kolom layout van 3 naar 4
2. Sleep uit het linkermenu een element met Afbeelding Link 
3. Klik op de afbeelding wat verschijnt 
   • Vul in het linkermenu het volgende in:
     • op Afbeelding URL: vul link in
     • op beschrijving afbeelding: vul Alt tekst in
     • op Link: vul de link in
     • Op Bestemming: kies het target – Blank/Self

5.6 Elementen (algemene elementen) 

Kolommen 

Kolommen zijn de basis. Hier kun je elementen aan toevoegen.  

1. Klik op ‘Selecteer kolomlayout’ in het rechterscherm.  

2. In het linkerscherm kun je het aantal kolommen kiezen onder ‘Kolom layout’  

3. Onder ‘Kolom witruimte’ stel je de witruimte tussen de kolommen in. 1 = weinig witruimte, 5 = veel witruimte.  

Elementen

Nu is het tijd om de andere elementen toe te voegen aan de kolommen. Klik op het plusje 

Tekst: Sleep Tekst is een kolom om tekst toe te voegen.  

Afbeelding: Hiermee voeg je een afbeelding toe aan de kolom. Wanneer je op de website over de afbeelding gaat met je muis zoomt de afbeelding iets in. Je kunt onder de afbeelding nog tekst, buttons en icoontjes toevoegen. Dit kun je toevoegen vanuit het linkermenu.  

Button: Hiermee voeg je een losse knop toe.  

Dropdown: Hiermee voeg je een button toe met een dropdown menu er onder. Klik op de button in het rechterscherm en vervolgens op het tandwieltje. In het linkermenu klik je op ‘Show dropdown menu’ om de menu-items te tonen en te kunnen wijzigen.  

Menu (lijst): Hier kun je een stuk tekst toevoegen met een link eronder. Je bouwt hier dus een menu op. 

<>Offcanvas: Hiermee voeg je een button toe. Wanneer je op de button klikt vouwt een zijmenu open. Door op het tandwieltje te klikken, kun je in het linkermenu op ‘Offcanvas panel bewerken’ klikken om de items te wijzigen.  

Box: Hiermee voeg je een blok toe. Binnen dit blok kun je meerdere elementen toevoegen, maar blijven wel binnen hetzelfde blok.  

Icoon: Voeg een icoontje toe in de kolom.  

Afbeeldingslink: Hiermee voeg je een afbeelding met een link toe aan de kolom. Door op de afbeelding te klikken kun je in het linkermenu onder:

• Afbeelding URL een link toevoegen naar de afbeelding in het CMS – Bestandsbeheer.
• Beschrijving van de afbeelding een Alt tekst invullen die getoond wordt als je met de muis over de afbeelding gaat.
• Link een link toevoegen waarnaar verwezen moet worden als je op de afbeelding klikt.
• Bestemming kies je of na het klikken een nieuw scherm (blank) wordt geopend of dat je in hetzelfde scherm (self) blijft.
• Weergave per apparaat kun je bepalen op wek device je de afbeelding wilt tonen.

Link: Hiermee voeg je een klikbare link toe aan een kolom/element. 

Slider: Voeg meerdere afbeeldingen toe die in de slider passen. In de blokken kun je ook reviews, kaarten of USP’s toevoegen. Voeg je een review of USP toe? Dan kun je in het blokje in de kolom kiezen welke layout je wilt voor je review. 

Accordeon: Hiermee voeg je uitklapbare elementen toe. Dit is bijvoorbeeld handig voor je FAQ.  

6. OPTIONEEL Tips voor winkel-eigenaren (basis)  

• Maak een ontwerp eerst op één device (bijvoorbeeld desktop) en werk daarna pas per device bij. Vul daarna alle links in de menu’s

• Houd kleuren en fonts consistent met je merkidentiteit via ShopThema. 

• Gebruik de preview-knop om wijzigingen eerst te controleren, waarna je de versie op kunt slaan.

• Sla pas op met Publiceer wanneer je zeker weet dat alles klaar is, deze wordt daarna nl direct live gezet in de shop.

• Gebruik het mega menu vooral voor grotere assortimenten/submenu’s of veel productcategorieën. 

7. Advanced functionaliteiten

Kijk naar Html en de PageBuilder

8. De filmpjes

ELS Introductie

Footer

Header USP

Header Navigatie balk (navbar)