E-commerce app
Je shop indelen
Drie instrumenten geven je catalogus structuur, en ze werken op verschillende niveaus. Collecties zijn de gangpaden van je shop. Collectielijsten ruimen die gangpaden op zodat je menu niet overloopt. Tags werken op de achtergrond, als onzichtbare secundaire collecties.
Hoofdstuk 1De collecties
Wat ze zijn
Collecties geven je Shopping App structuur en ordenen je producten. Was je app een fysieke winkel, dan waren de collecties de gangpaden.
Ze bepalen ook wat je klant kan bereiken. Een product dat aan geen enkele collectie hangt, bestaat wel degelijk in je shop en verkoopt ook, maar het is alleen via zijn eigen adres te bereiken: via een link die je stuurt, via een zoekopdracht, via een widget op het startscherm. Elk product aan minstens één collectie koppelen is dus de eerste reflex, nog vóór je over je indeling nadenkt.
Ze zijn op twee vlakken flexibel. Eerst in de tijd: een collectie voeg je toe, verwijder je, toon of verberg je in één klik, wat tijdelijke collecties mogelijk maakt. Daarna in de indeling: ze doorkruisen elkaar, en hetzelfde product hoort tegelijk bij meerdere collecties.
Dat doorkruisende karakter verdient je aandacht wanneer je ze aanmaakt. Neem onze decoratiewinkel. Een klant die een decoratiestuk zoekt, kan langs drie verschillende lijnen denken: de kamer in kwestie, het type object, de trend van het moment. We maakten dus negen collecties over die drie lijnen:
Per kamer: Bedroom, Bathroom, Kitchen
Per type object: Frames, Vases, Pillows
Per trend: Big in Japan, Keep it Slow, Words matter
Elk product hoort dus bij meerdere collecties. Het heeft meer kans om gezien te worden, en de klant heeft meer kans om het te vinden langs de weg die hem vanzelf komt.
Daar komt nog een soldencollectie bij, die de afgeprijsde producten verzamelt. Ze verandert in de tijd, en staat verborgen buiten het soldenseizoen.
Hoe je ze aanmaakt
Ga naar Products › Collections. Klik op Create a collection.
Daarna voer je de titel in, een illustratiebeeld, en de weergavevolgorde van de producten. De titel is beperkt tot 32 tekens, en dat is een nuttige beperking: de naam van een gangpad lees je in een menu, op een telefoonscherm, en korte namen winnen daar altijd.
Voor de weergavevolgorde is de regel altijd dezelfde: vraag je af wat je klant zoekt.
Er zijn zes automatische volgordes, in paren: aanmaakdatum, van recent naar oud of omgekeerd, prijs, van laag naar hoog of omgekeerd, en titel, van A tot Z of van Z tot A. De zevende modus is handmatig.
- De datum zet nieuwe artikelen vooraan. Dat is de juiste keuze voor een kledingzaak die regelmatig wordt aangevuld, of voor een boekhandel waarvan de klanten terugkomen voor nieuw leesvoer.
- Oplopende prijs past bij een buurtwinkel, waar de klant zijn budget wil bewaken. Aflopende prijs dient eerder een hoogwaardige collectie, waar het eerste artikel het niveau zet.
- Alfabetische volgorde is voor catalogi die mensen doorlopen terwijl ze de naam van wat ze zoeken al kennen: onderdelen, technische referenties, wijnen.
- De handmatige modus laat je naar boven duwen wat je eerst wilt verkopen, en geeft je volledige controle over hoe je lijst eruitziet.
Die volgorde hoort bij de collectie, niet bij de shop. Je nieuwe artikelen kunnen dus op datum staan terwijl je maandselectie met de hand geordend blijft. Dat maakt de handmatige modus houdbaar: automatische volgordes passen zichzelf toe op producten die je later toevoegt, de handmatige modus vraagt dat je erop terugkomt, dus houd hem voor de collecties die het waard zijn.
Vergeet SEO niet. Je collecties zijn net als je productpagina's indexeerbaar. Vul de tags Title en Meta description in, en pas de URL's aan met je zoekwoorden.


Hoofdstuk 2De collectielijsten
Waarvoor ze dienen
Een collectie bereikt het menu van je app op twee manieren, en daar wordt het uitzicht van je navigatie beslist.
Alleen. Elke collectie heeft een blok voor zichtbaarheid in het menu, waar je de optie aanvinkt die de collectie in het menu opneemt en haar plaats kiest. Ze wordt een volwaardig item, op gelijke voet met een sectie. Een shop met drie gangpaden toont ze zo, en de klant overziet de hele catalogus in één oogopslag.
Gegroepeerd. De sectie Collection list verzamelt er meerdere onder één item. Het nuttige richtpunt: boven vijf gangpaden wint het menu bij groeperen.
In het vocabulaire van e-commerce is die tweede manier het onderscheid tussen categorie en subcategorie, waarbij de lijst de categorie draagt en de collecties de subcategorieën. Kom je van een ander platform, dan is dit de handeling die je onder een andere naam kent.
Terug naar de decoratiewinkel en zijn tien collecties. Zonder groepering zou het menu van de app verzadigd zijn.
We maakten dus drie lijsten, volgens dezelfde drie zoeklijnen, met elk drie collecties:
- Rooms: Bedroom, Bathroom, Kitchen
- Objects: Frames, Vases, Pillows
- Trends: Big in Japan, Keep it Slow, Words matter
De soldencollectie blijft buiten elke lijst: we willen dat ze zo rechtstreeks mogelijk bereikbaar is. Dat is een beslissing om te onthouden, opruimen mag nooit begraven wat aan de oppervlakte moet blijven.


Hoe je ze aanmaakt
Een collectielijst is een sectie van je Shopping App. Je voegt ze toe zoals elke sectie, vanuit My App › Structure. Klik op Add a section, en kies daarna Collection list.
Geef je sectie een titel, koppel er een beeld aan, en bevestig.
Om je collecties erin te zetten, twee methodes:
- klik op het "+"-icoon om de collecties te selecteren die je wilt opnemen
- of sleep de collecties rechtstreeks onder de sectie met de collectielijst


Welke layout je kiest
Drie layouts, waarvan er één van je navigatiemodus afhangt.
Swipe Submenu zet je collecties in een submenu, onder de hoofdnavigatie van de app. Die layout is alleen beschikbaar in de navigatiemodus "Swipe", waarbij je van sectie naar sectie gaat door horizontaal over het scherm te vegen. Het is de standaardlayout van de catalogus, maar hij is aan de navigatie gebonden: kies hem alleen als je app zich aan die modus houdt, nooit als eenvoudige terugvaloptie.
Classic toont je gangpaden in rijen, met een kleine miniatuur en de naam in vet, meerdere per scherm. Dat is de gids-houding: hij past bij je wanneer je veel gangpaden hebt, wanneer de naam meer telt dan het beeld, en wanneer het ook zonder sterke beelden moet werken. Het is ook de natuurlijke terugvaloptie voor de twee andere.
Visual is een etalage: grote kaarten over de volle breedte, het beeld van het gangpad als achtergrond en de naam eroverheen. Kies hem wanneer gangpaden met het oog worden gekozen, in mode, decoratie of voeding.
Eén kanttekening bij die laatste: hij vraagt goede beelden bij al je collecties. Hebben sommige er geen, of slechte, val dan terug op Classic.
De keuze maak je in My App › Structure, via het menu van je sectie, Edit the design. Classic en Visual gelden voor elke navigatiemodus. Staat je app niet in Swipe-modus, dan zet het back office Swipe Submenu in het grijs en biedt het je een link om je menu te wijzigen.




Gebruik je overal dezelfde layout
Nee, en dat detail kan tellen. We raden aan de consistentie van het design in je hele app te bewaren, maar layouts variëren laat je een hiërarchie aangeven.
Neem een buurtwinkel met een catalogus die zo is ingedeeld:
- Food
- Fresh: Fruit, Vegetables
- Bulk: Cereals, Rice & Pasta
- Health & Beauty: Cosmetics, Essential oils
Hier bevatten sommige collectielijsten geen collecties, maar andere collectielijsten. Er zijn dus twee niveaus te onderscheiden. Een andere layout toepassen op niveau 1 en niveau 2 voorkomt dat de klant verdwaalt in de boomstructuur.

Hoofdstuk 3De tags
Wat ze zijn
Een tag is een trefwoord dat aan een product hangt, als een markering. Je kunt er meerdere aan hetzelfde product hangen.
Ze dienen eerst om je producten in je back office terug te vinden. Maar hun voornaamste waarde ligt elders: ze sturen wat er aan de kant van de klant wordt getoond.
- ze filteren de widgets met productlijsten op je startscherm
- ze voeden, samen met de collecties, het blok met vergelijkbare producten op je productpagina's
- ze voeden de resultaten van de zoeksectie van je shop
Hoe je ze kiest
Zie tags als secundaire collecties, onzichtbaar in de navigatie maar actief in de weergave. Ze worden meestal gebouwd op de kenmerken van je producten: kleur, materiaal, vorm.
Een voorbeeld. In een kledingzaak gaat een bruine wollen coltrui naar de collectielijst "Clothing", collectie "Sweaters". Hij krijgt de tags "coltrui", "bruin", "wol".
Daar volgen meteen twee toepassingen uit. Om al je wollen artikelen op het startscherm te tonen, filter je gewoon op de tag "wol". En de trui kan als aanvullend product verschijnen onder een bruine broek.
Dat is het fundamentele verschil met collecties: de collectie ordent wat de klant doorloopt, de tag ordent wat je hem voorlegt.
Hoe je ze aanmaakt
Je voegt ze toe bij het aanmaken of bewerken van een product. In het menu rechts van de bewerkpagina van het product voer je je tags in het veld Tags in. Publiceer om te bevestigen.
Twee schrijfregels bepalen de gezondheid van je woordenschat op termijn. Een tag schrijf je als één woord, zonder spatie, en daarom staat er in het voorbeeld hierboven "coltrui". En hoofdletters worden genegeerd, wol en Wol zijn dezelfde tag, dus je hoeft niet op je hoofdletters te letten.
De rest is discipline, en het back office geeft je het gereedschap: boven het veld opent View all tags de lijst van de tags die al in je shop staan, met een zoekfunctie en een sortering op alfabet of op gebruiksfrequentie. Maak er een gewoonte van eruit te kiezen in plaats van opnieuw te typen. Een woordenschat die afdrijft naar wol, wollen en zuiverwol filtert drie keer minder producten dan er bestaan, en die afdrijving ontdek je pas na tweehonderd productpagina's.
Ontwerp