Het design van de webshop kan in deze stap worden ingesteld. Vanuit deze stap in het configuratieproces kan de designmanager geopend worden. De designmanager maakt het voor niet-technische gebruikers mogelijk om kleuren, ruimtes, lettertypes en achtergronden in te stellen.
Algemeen
Desktop / Mobiel
Door bovenin op het Desktop of Mobiel icoon te klikken kun je het ontwerp voor het geselecteerde device selecteren.
Sommige design instellingen kun je per device instellen. Hier staat het icoon achter het label ingesteld. Wissel je van device, dan zul je hier ook de waarde zien wisselen die voor dit device geldt.
Aanpassen instellingen
Als je een waarde wijzigt dan zul je een blauw puntje voor het label zien staan. Hierdoor zie je direct dat dit element gewijzigd is.
Wil je de wijziging terugzetten naar de standaard waarde, dan kun je op het "Waarde herstellen" icoon klikken.
Design publiceren
Ben je klaar met de wijzigingen doorvoeren dan kun je door op het oogje te klikken het ontwerp in een preview bekijken.
Zijn de wijzigingen naar tevredenheid doorgevoerd, dan kun je op de groene knop [Design publiceren] klikken.
Thema
Kleuren
De kleuren van praktisch alle elementen kunnen ingesteld worden vanuit de designmanager. Er zijn kleurenswatches voor grijswaarden, primaire kleuren, succes/waarschuwing/gevaar kleuren.
Deze kleuren kunnen door de gehele designmanager en voor het design per blok gebruikt worden.
Je kunt eenvoudig op een kleurswatch klikken om via een kleurenkiezer de gewenste kleur te selecteren. Het is ook mogelijk de kleurwaarde in het formulier in te vullen.
Spacing
De ruimtes van de webshop kunnen op verschillende niveaus ingesteld worden.
- Grid niveau
Dit zijn de marges tussen de verschillende kolommen. - Block niveau
Dit zijn de marges tussen de blokken - Column niveau
Dit zijn de marges binnen een kolom. Met "Padding x" stel je de horizontale ruimtes in. Met "Padding Y" stel je de verticale ruimtes in. - Element niveau
Dit zijn de marges die worden gebruikt tussen de elementen, denk hierbij aan paragrafen e.d.
Borders
Je kunt middels de "Border radius" de afgeronden hoeken voor de beschikbare elementen instellen.
Layout
Page
Hier kun je de containerbreedte van de pagina voor zowel desktop als mobiel instellen.
Main
Hier kun je de standaard marges van de containers instellen.
Elementen
Headings
Hier kun je alle type koppen instellen (kleur, font, grootte, afstanden).
Body tekst
Pas hier alle standaard teksten en koppen (binnen een standaard tekst) aan.
Legends
De legends worden vooral gebruikt als aanduiding bij bijvoorbeeld de filters.
Alerts
Hier kun je de verschillende type waarschuwingen instellen.
Badges
Hier kun je de verschillende type badges aanpassen. Deze worden onder andere gebruikt voor de voorraad.
Boxes
De boxes worden onder andere gebruikt op de checkout pagina om de keuze voor een verzendmethode te kiezen.
Buttons
Hier kun je de verschillende type buttons designen.
Cards
Pas hier de cards aan die onder andere worden gebruikt in de product overzichten en voor diverse blokken.
Forms
Hier kun je de standaard formulier elementen stijlen.
Dropdown
Pas hier de talenkiezer aan.
Modals
Bij meldingen in de webshop wordt een modal toegepast. Pas hier de stijling van de modal aan.
Selections
De selections worden onder andere gebruikt op de checkout pagina om de keuze voor een verzendmethode / betaalmethode te kiezen.
Tables
Pas hier de standaard stijling van de verschillende tabel vormen aan. Deze wordt onder andere toegepast op de winkelwagen pagina.
Features
Hier kun je de standaard stijling van de feauture blokken instellen. Dit zijn vaak blokken met een achtergrond afbeelding met hier een tekst overheen geplaatst.
Images
Elke afbeelding in een blok kan een overlay bevatten. Hierdoor kun je een bepaalde tint over de afbeelding plaatsen.
CSS
Wil je tot op detail bepalen hoe jouw webshop eruit ziet, dan kun je aan de slag met CSS. Uiteraard kunnen wij je hier ook mee helpen.
Klink linksboven op het code icoon en je kunt vervolgens je eigen CSS toepassen.