E-commerce app

Uw shop indelen

Drie instrumenten geven uw catalogus structuur, en ze werken op verschillende niveaus. Collecties zijn de gangpaden van uw shop. Collectielijsten ruimen die gangpaden op zodat uw menu niet overloopt. Tags werken op de achtergrond, als onzichtbare secundaire collecties.

Hoofdstuk 1De collecties

Wat ze zijn

Collecties geven uw Shopping App structuur en ordenen uw producten. Was uw app een fysieke winkel, dan waren de collecties de gangpaden.

Ze bepalen ook wat uw klant kan bereiken. Een product dat aan geen enkele collectie hangt, bestaat wel degelijk in uw shop en verkoopt ook, maar het is alleen via zijn eigen adres te bereiken: via een link die u 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 u over uw indeling nadenkt.

Ze zijn op twee vlakken flexibel. Eerst in de tijd: een collectie voegt u toe, verwijdert u, toont of verbergt u 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 uw aandacht wanneer u 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 u ze aanmaakt

Ga naar Products Collections. Klik op Create a collection.

Daarna voert u 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 leest u in een menu, op een telefoonscherm, en korte namen winnen daar altijd.

Voor de weergavevolgorde is de regel altijd dezelfde: vraag u af wat uw 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 u naar boven duwen wat u eerst wilt verkopen, en geeft u volledige controle over hoe uw lijst eruitziet.

Die volgorde hoort bij de collectie, niet bij de shop. Uw nieuwe artikelen kunnen dus op datum staan terwijl uw maandselectie met de hand geordend blijft. Dat maakt de handmatige modus houdbaar: automatische volgordes passen zichzelf toe op producten die u later toevoegt, de handmatige modus vraagt dat u erop terugkomt, dus houd hem voor de collecties die het waard zijn.

Vergeet SEO niet. Uw collecties zijn net als uw productpagina's indexeerbaar. Vul de tags Title en Meta description in, en pas de URL's aan met uw zoekwoorden.

De collectielijst van de shop. Bovenaan een zoekveld en, omcirkeld, de groene knop die er een aanmaakt. Daaronder neemt elke collectie een rij in: haar miniatuur met de titel erin, haar aantal producten, en een label dat zegt of ze in het menu van de app verschijnt.
Het detail van een collectie. Links haar producten in weergavevolgorde, elk met hun miniatuur, hun prijs, hun voorraadstatus, een greep om ze te verplaatsen en een kruisje om ze te verwijderen. Rechts, omcirkeld, het zoekblok: titel en beschrijving voor zoekmachines, adres van de pagina, en een preview van het resultaat zoals het zal verschijnen. Rechtsonder de knop die de instellingen weer opent.

Hoofdstuk 2De collectielijsten

Waarvoor ze dienen

Een collectie bereikt het menu van uw app op twee manieren, en daar wordt het uitzicht van uw navigatie beslist.

Alleen. Elke collectie heeft een blok voor zichtbaarheid in het menu, waar u 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. Komt u van een ander platform, dan is dit de handeling die u 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.

Het menu van een shop waar elke collectie op zichzelf staat: twaalf items volgen elkaar op, van de startpagina tot de solden, één per productfamilie. Onderaan het paneel twee sociale netwerken en de instellingen.
Hetzelfde menu met de collecties gegroepeerd: vijf items volstaan, en elk item opent de lijst van zijn collecties.

Hoe u ze aanmaakt

Een collectielijst is een sectie van uw Shopping App. U voegt ze toe zoals elke sectie, vanuit My App Structure. Klik op Add a section, en kies daarna Collection list.

Geef uw sectie een titel, koppel er een beeld aan, en bevestig.

Om uw collecties erin te zetten, twee methodes:

  • klik op het "+"-icoon om de collecties te selecteren die u wilt opnemen
  • of sleep de collecties rechtstreeks onder de sectie met de collectielijst
Het paneel om een sectie toe te voegen, geopend op de groep van de collecties. Een eerste tegel, omcirkeld, voegt een lijst met collecties toe; de volgende voegen een specifieke collectie toe, waarbij de collectie die al in de app staat een groen vinkje draagt; de laatste maakt een collectie aan. Links volgt de preview van de app de wijzigingen.
De pas aangemaakte sectie, nog leeg. In het paneel rechts voegt de omcirkelde link een collectie aan de lijst toe, en de kiezer die daarmee opengaat toont alle beschikbare collecties. Links nodigt de preview u uit de eerste toe te voegen.

Welke layout u kiest

Drie layouts, waarvan er één van uw navigatiemodus afhangt.

Swipe Submenu zet uw collecties in een submenu, onder de hoofdnavigatie van de app. Die layout is alleen beschikbaar in de navigatiemodus "Swipe", waarbij u 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 uw app zich aan die modus houdt, nooit als eenvoudige terugvaloptie.

Classic toont uw gangpaden in rijen, met een kleine miniatuur en de naam in vet, meerdere per scherm. Dat is de gids-houding: hij past u wanneer u 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 uw collecties. Hebben sommige er geen, of slechte, val dan terug op Classic.

De keuze maakt u in My App Structure, via het menu van uw sectie, Edit the design. Classic en Visual gelden voor elke navigatiemodus. Staat uw app niet in Swipe-modus, dan zet het back office Swipe Submenu in het grijs en biedt het u een link om uw menu te wijzigen.

Drie mockups naast elkaar, één per layout: Swipe Submenu zet de collecties in een submenu van een zijnavigatie; Classic zet ze in rijen, elk met hun ronde miniatuur en hun titel; Visual stapelt grote beelden over de volle breedte.
Het menu van een kledingzaak: onder het item voor kleding sommen vijf subitems de collecties op, terwijl de andere items op het eerste niveau blijven.
Een collectielijst in rijen: drie collecties, elk met hun ronde miniatuur en hun titel.
Dezelfde lijst als beelden: elke collectie neemt de volle breedte in, met haar titel midden in de foto, en u scrolt om de volgende te zien.

Gebruikt u overal dezelfde layout

Nee, en dat detail kan tellen. We raden aan de consistentie van het design in uw hele app te bewaren, maar layouts variëren laat u 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.

Twee schermen van dezelfde buurtwinkel: links een collectielijst in rijen; rechts de geopende collectie, met haar subcollecties als grote beelden. Twee layouts voor twee navigatieniveaus.

Hoofdstuk 3De tags

Wat ze zijn

Een tag is een trefwoord dat aan een product hangt, als een markering. U kunt er meerdere aan hetzelfde product hangen.

Ze dienen eerst om uw producten in uw 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 uw startscherm
  • ze voeden, samen met de collecties, het blok met vergelijkbare producten op uw productpagina's
  • ze voeden de resultaten van de zoeksectie van uw shop

Hoe u ze kiest

Zie tags als secundaire collecties, onzichtbaar in de navigatie maar actief in de weergave. Ze worden meestal gebouwd op de kenmerken van uw 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 uw wollen artikelen op het startscherm te tonen, filtert u 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 u hem voorlegt.

Hoe u ze aanmaakt

U voegt ze toe bij het aanmaken of bewerken van een product. In het menu rechts van de bewerkpagina van het product voert u uw tags in het veld Tags in. Publiceer om te bevestigen.

Twee schrijfregels bepalen de gezondheid van uw woordenschat op termijn. Een tag schrijft u 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 u hoeft niet op uw hoofdletters te letten.

De rest is discipline, en het back office geeft u het gereedschap: boven het veld opent View all tags de lijst van de tags die al in uw 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 ontdekt u pas na tweehonderd productpagina's.