In deze handleiding leggen we uit hoe je werkt met de nieuwe Shop Thema en ProducBuilder.

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 

2.1 Styles 

Button-hoeken 

Pas de afronding van knoppen aan door de Radius te kiezen.  

Je kunt kiezen uit vooringestelde waarden. 

• 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 

• Bepaal de afronding van randen van elementen door de Radius te kiezen. 

Je kunt kiezen uit vooringestelde waarden. 

• Dit zorgt voor een consistent design van de knoppen en borders. 

• Klik op Opslaan als je klaar bent 

2.2 Kleurnamen 

• Minimaal 2 en maximaal 9 kleuren instelbaar 

• 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.3 Lettertypen (fonts) 

• Stel het primary en secondary lettertype in 

• Er kan gekozen worden uit de lettertypen die ook beschikbaar zijn in de Editor 

• Klik achter ieder font op Opslaan (diskette) 

De lettertypen worden gebruikt voor titels, body-tekst en in de (navigatie) menu’s  

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.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) 

3.2 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 Show all slides om alle Usp’s te tonen 

3.3 Footer Shipping methods 

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

3.4 Footer Menu 

Er worden 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.5 Footer Mobile Menu 

Mobiele variant van het menu. Kies mobiel weergave 

Dit werkt met accordeons voor compacte presentatie 

3.6 Footer Disclaimer 

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

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 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  

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) 

Kopieer en plak de titel van het icoontje  

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 Common Navbar 

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

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

Dropdowns toevoegen

1. Klik op 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 Common Nav Bar (vergrootglas) 

Visibility per device 

Hier stel je in op welk apparaat het mega menu zichtbaar is. Dit pas je aan door op het gewenste item in het rechterscherm te klikken. In het linkermenu klik je onder Visability per device 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. 

Sleep het blok in het linkermenu genaamd Mega menu navbar naar de rechterzijde. Plaats deze onder de USP bar. 

Mega menu toevoegen 

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

Afbeelding toevoegen 

1. Kopieer een blok met Menu Title 
2. Verwijder het extra toegevoegde blok wat verschijnt 
3. Klik op Add blocks 
4. Klik in het linkermenu op Add Image 
5. Klik in het rechterscherm op het image-component 
6. Voeg in het linkermenu de URL toe van de afbeelding onder het kopje Image URL. 

5.5 Mobiele weergave bewerken 

Open het mobiele menu via het tandwiel in het Mega menu 

Klik op Edit panel en pas opties aan waar nodig 

5.6 Elements (algemene elementen) 

Colums 
Columns zijn de basis. Hier kun je elementen aan toevoegen.  

1. Klik op ‘Select column layout’ in het rechterscherm.  

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

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

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

Text 
Sleep Text is een kolom om tekst toe te voegen.  

Icon 
Voeg een icoontje toe in de kolom.  

Interactive image 
Hieermee 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 voegt een link toe aan de afbeelding door op de afbeelding te klikken en op het pijltje omhoog te klikken. In het linkermenu kun je onder Href een link toevoegen. 

Je kunt onder de afbeelding nog tekst, buttons en icoontjes toevoegen. Dit kun je toevoegen vanuit het linkermenu.  

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

Swiper: Voeg meerdere afbeeldingen toe die swipebaar zijn. 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. 

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

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

Paragraph: Hiermee voeg je een afgebakend stuk tekst toe. 

Image: Hiermee voeg je een afbeelding toe. 

Button: Hiermee voeg je een losse knop toe.  

Dropdown: Hiermee voeg je een button toe met een dropdown. 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.  

List/Menu: 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 ‘Open panel’ klikken om de items te wijzigen.  

6. OPTIONEEL Tips voor winkel-eigenaren (basis)  

• Maak een ontwerp eerst op één device (bijvoorbeeld desktop) en werk daarna pas per device bij. 

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

• Gebruik de preview-knop om wijzigingen eerst te controleren. 

• Sla pas op met Export Changes wanneer je zeker weet dat alles klaar is. 

• Gebruik het mega menu vooral voor grotere assortimenten of veel productcategorieën.