E-handelsapp

Organisera din butik

Tre verktyg strukturerar din katalog, och de arbetar på olika nivåer. Kollektionerna är din butiks gångar. Kollektionslistorna städar de gångarna så att din meny inte svämmar över. Taggarna arbetar i bakgrunden, som osynliga sekundära kollektioner.

Kapitel 1Kollektioner

Vad de är

Kollektionerna strukturerar din Shopping App och organiserar dina produkter. Om din app vore en fysisk butik skulle kollektionerna vara dess gångar.

De avgör också vad din kund kan nå. En produkt som inte hör till någon kollektion finns visserligen i din butik, och den säljs visserligen, men den nås via sin direkta adress: via en länk du skickar, via en sökning, via en widget på startskärmen. Att koppla varje produkt till minst en kollektion är alltså den första reflexen, redan innan du tänker på hur du ska organisera dig.

De är flexibla på två sätt. I tiden först: en kollektion läggs till, raderas, visas eller döljs med ett klick, vilket gör tillfälliga kollektioner möjliga. I organisationen sedan: de korsar varandra, och samma produkt hör hemma i flera kollektioner samtidigt.

Just det korsande draget förtjänar din uppmärksamhet när du skapar dem. Ta vår inredningsbutik. En kund som letar efter ett dekorationsföremål kan tänka längs tre olika linjer: rummet det gäller, typen av föremål, trenden för stunden. Vi skapade alltså nio kollektioner fördelade över de tre linjerna:

Per rum: Bedroom, Bathroom, Kitchen

Per typ av föremål: Frames, Vases, Pillows

Per trend: Big in Japan, Keep it Slow, Words matter

Varje produkt hör alltså hemma i flera kollektioner. Den har större chans att bli sedd, och kunden har större chans att hitta den längs den väg som faller sig naturlig för hen.

Ovanpå det kommer en reakollektion, som samlar de nedsatta produkterna. Den ändras över tid, och hålls dold utanför reasäsongen.

Skapa dem

Gå till Products Collections. Klicka på Create a collection.

Sedan fyller du i titeln, en illustrationsbild, och visningsordningen för produkterna. Titeln är begränsad till 32 tecken, vilket är en nyttig begränsning: ett gångnamn läses i en meny, på en telefonskärm, och där vinner korta namn alltid.

För visningsordningen är regeln alltid densamma: fråga dig vad din kund letar efter.

Sex automatiska ordningar erbjuds, parvis: skapandedatum, nyast till äldst eller tvärtom, pris, lägst till högst eller tvärtom, och titel, A till Ö eller Ö till A. Det sjunde läget är manuellt.

  • Datum sätter nyheterna först. Det är rätt val för en klädbutik som fylls på regelbundet, eller för en bokhandel vars kunder kommer tillbaka och letar efter något nytt att läsa.
  • Stigande pris passar en livsmedelsbutik, där kunden vill hålla koll på sin budget. Fallande pris tjänar snarare en exklusiv kollektion, där den första varan sätter nivån.
  • Bokstavsordning är till för kataloger som folk bläddrar i när de redan känner namnet på det de vill ha: reservdelar, tekniska referenser, viner.
  • Manuellt läge låter dig skjuta upp det du vill sälja först, och ger dig full kontroll över hur din lista ser ut.

Den ordningen tillhör kollektionen, inte butiken. Dina nyheter kan alltså sorteras efter datum medan ditt månadsurval förblir ordnat för hand. Det är det som gör det manuella läget hållbart: automatiska ordningar tillämpar sig själva på produkter du lägger till senare, det manuella läget kräver att du kommer tillbaka till det, så spara det till de kollektioner som förtjänar det.

Glöm inte SEO. Dina kollektioner går att indexera precis som dina produktsidor. Fyll i taggarna Title och Meta description, och anpassa adresserna med dina nyckelord.

Butikens kollektionslista. Högst upp ett sökfält och, inringad, den gröna knappen som skapar en. Nedanför tar varje kollektion en rad: dess miniatyrbild med titeln insatt i den, dess antal produkter, och en bricka som säger om den syns i appens meny.
En kollektion bär sitt eget omslag och sitt eget antal, och en bricka säger om menyn visar den.
Detaljerna för en kollektion. Till vänster dess produkter i visningsordning, var och en med sin miniatyrbild, sitt pris, sin lagerstatus, ett handtag att flytta den med och ett kryss att ta bort den med. Till höger, inringat, sökblocket: titel och beskrivning för sökmotorerna, sidans adress, och en förhandsvisning av resultatet så som det kommer att visas. Nere till höger knappen som öppnar inställningarna igen.
En kollektion har en egen adress och ett eget utdrag: det är en sida för sökmotorer, inte bara en mapp.

Kapitel 2Kollektionslistor

Vad de är till för

En kollektion når din apps meny på två sätt, och det är där utseendet på din navigering avgörs.

På egen hand. Varje kollektion bär sitt block för menysynlighet, där du kryssar för alternativet som listar kollektionen i menyn och väljer dess plats. Den blir en post i egen rätt, i nivå med ett avsnitt. En butik med tre gångar visar dem så, och dess kund tar in hela katalogen med en blick.

Grupperade. Avsnittet Collection list samlar flera av dem under en enda post. Det användbara riktmärket: bortom fem gångar vinner menyn på att grupperas.

I e-handelns vokabulär är det andra sättet skillnaden mellan kategori och underkategori, där listan är kategorin och kollektionerna underkategorierna. Om du kommer från en annan plattform är det här draget du känner under ett annat namn.

Låt oss återvända till inredningsbutiken och dess tio kollektioner. Utan gruppering skulle appens meny bli överfull.

Vi skapade alltså tre listor, som tar upp de tre söklinjerna, med tre kollektioner var:

  • Rooms: Bedroom, Bathroom, Kitchen
  • Objects: Frames, Vases, Pillows
  • Trends: Big in Japan, Keep it Slow, Words matter

Reakollektionen står utanför alla listor: vi vill att den ska vara så direkt nåbar som möjligt. Det är ett beslut värt att hålla i minnet, städningen får aldrig begrava det som måste ligga kvar i ytan.

Menyn i en butik där varje kollektion står för sig själv: tolv poster följer på varandra, från startsidan till rean, en per produktfamilj. Längst ner i panelen två sociala nätverk och inställningarna.
Tolv poster när varje kollektion står för sig själv, och menyn blir hela katalogen.
Samma meny med kollektionerna grupperade: fem poster räcker, och var och en öppnar listan över sina kollektioner.
Samma katalog bakom fem poster: grupperingen sker i menyn, inte i kollektionerna.

Skapa dem

En kollektionslista är ett avsnitt i din Shopping App. Den läggs till som vilket avsnitt som helst, från My App Structure. Klicka på Add a section, och välj sedan Collection list.

Ge ditt avsnitt en titel, koppla en bild till det, och bekräfta.

För att lägga in dina kollektioner i det, två metoder:

  • klicka på ikonen ”+” för att välja kollektionerna att ta med
  • eller dra kollektionerna direkt under avsnittet Collection list
Panelen för att lägga till ett avsnitt, öppen på kollektionsgruppen. En första ruta, inringad, lägger till en lista med kollektioner; de följande lägger till en specifik kollektion, där den som redan finns i appen bär en grön bock; den sista skapar en kollektion. Till vänster följer förhandsvisningen av appen med i ändringarna.
Två olika rutor: den första lägger till en lista, de följande lägger till en enda kollektion i menyn.
Avsnittet som just skapats, fortfarande tomt. I högerpanelen lägger den inringade länken till en kollektion i listan, och väljaren den öppnar visar alla tillgängliga kollektioner. Till vänster uppmanar förhandsvisningen dig att lägga till den första.
Listan kommer tom: sedan väljer du vilka kollektioner som ska in, och i vilken ordning.

Vilken layout du ska välja

Tre layouter, varav en beror på ditt navigeringsläge.

Swipe Submenu lägger dina kollektioner i en undermeny, under appens huvudnavigering. Den finns bara i navigeringsläget ”Swipe”, det där du går från avsnitt till avsnitt genom att svepa horisontellt över skärmen. Det är katalogens standardlayout, men den är bunden till navigeringen: välj den bara om din app satsar på det läget, aldrig som en enkel reservlösning.

Classic presenterar dina gångar i rader, med en liten miniatyrbild och namnet i fetstil, flera per skärm. Det är katalogens hållning: den passar dig när du har många gångar, när namnet betyder mer än bilden, och när det måste fungera även utan starka bilder. Den är också den naturliga reservlösningen från de två andra.

Visual är ett skyltfönster: stora kort i full bredd, gångens bild som bakgrund och namnet ovanpå. Välj den när gångarna väljs med ögat, inom mode, inredning eller mat.

En reservation kring den sista: den kräver bra bilder på samtliga dina kollektioner. Om vissa saknar bilder, eller har dåliga, ska du falla tillbaka på Classic.

Valet görs i My App Structure, på ditt avsnitts meny, Edit the design. Classic och Visual gäller i alla navigeringslägen. Om din app inte är i Swipe-läge gråmarkerar back office Swipe Submenu och erbjuder dig en länk för att byta meny.

Tre skisser sida vid sida, en per layout: Swipe Submenu lägger kollektionerna i en undermeny till en sidonavigering; Classic ställer upp dem i rader, var och en med sin runda miniatyrbild och sin titel; Visual staplar stora bilder i full bredd.
Tre layouter för samma lista: en undermeny vid sidan, rader med miniatyrbild, eller bilder i full bredd.
Menyn i en klädbutik: under klädposten listar fem underposter kollektionerna, medan de övriga posterna stannar på första nivån.
Swipe Submenu i skarpt läge: kollektionerna fälls ut under en post, resten av menyn förblir platt.
En kollektionslista i rader: tre kollektioner, var och en med sin runda miniatyrbild och sin titel.
Classic, där miniatyrbilden förblir liten och titeln bär kollektionen.
Samma lista som bilder: varje kollektion tar hela bredden, dess titel satt mitt i fotot, och du skrollar för att se nästa.
Visual, där bilden är argumentet och titeln ligger inuti den.

Ska du använda samma layout överallt

Nej, och den detaljen kan spela roll. Vi rekommenderar att du håller designen konsekvent genom hela din app, men att variera layouter låter dig markera en hierarki.

Ta en livsmedelsbutik vars katalog är upplagd så här:

  • Food
  • Fresh: Fruit, Vegetables
  • Bulk: Cereals, Rice & Pasta
  • Health & Beauty: Cosmetics, Essential oils

Här innehåller vissa kollektionslistor inte kollektioner utan andra kollektionslistor. Det finns alltså två nivåer att skilja åt. Att tillämpa en annan layout på nivå 1 och nivå 2 hindrar kunden från att gå vilse i trädet.

Två skärmar från samma livsmedelsbutik: till vänster en kollektionslista i rader; till höger kollektionen öppnad, dess underkollektioner visade som stora bilder. Två layouter för två navigeringsnivåer.
Två layouter i samma butik: rader för att välja hylla, bilder när du väl är inne.

Kapitel 3Taggar

Vad de är

En tagg är ett nyckelord kopplat till en produkt, som en markör. Du kan koppla flera till samma produkt.

De tjänar först och främst till att hitta tillbaka till dina produkter i ditt back office. Men deras främsta värde ligger någon annanstans: de styr det som visas på kundens sida.

  • de filtrerar produktlistewidgetarna på din startskärm
  • de matar, tillsammans med kollektionerna, blocket med liknande produkter på dina produktsidor
  • de matar resultaten i din butiks sökavsnitt

Hur du väljer dem

Se taggarna som sekundära kollektioner, osynliga i navigeringen men aktiva i visningen. De byggs i allmänhet på dina produkters egenskaper: färg, material, form.

Ett exempel. I en klädbutik hamnar en brun polotröja i ull i kollektionslistan ”Clothing”, kollektionen ”Sweaters”. Den får taggarna ”polokrage”, ”brun”, ”ull”.

Två användningar följer omedelbart. För att visa alla dina ullplagg på startskärmen filtrerar du helt enkelt på taggen ”ull”. Och tröjan kan dyka upp som kompletterande produkt under ett par bruna byxor.

Det är den grundläggande skillnaden mot kollektionerna: kollektionen organiserar det kunden bläddrar igenom, taggen organiserar det du lägger fram för hen.

Skapa dem

De läggs till när du skapar eller redigerar en produkt. I högermenyn på produktens redigeringssida fyller du i dina taggar i fältet Tags. Publicera för att bekräfta.

Två skrivregler avgör hur din vokabulär mår på sikt. En tagg skrivs som ett ord, utan mellanslag, och därför står det ”polokrage” i exemplet ovan. Och versaler ignoreras, ull och Ull är samma tagg, så du behöver inte hålla ordning på dina stora bokstäver.

Resten är disciplin, och back office ger dig verktyget: ovanför fältet öppnar View all tags listan över dem som redan finns i din butik, med en sökfunktion och en sortering efter bokstavsordning eller efter användningsfrekvens. Gör det till en vana att välja därifrån i stället för att skriva om. En vokabulär som driver iväg mot ull, ylle och rentull filtrerar tre gånger färre produkter än det finns, och det är en drift du upptäcker efter tvåhundra produktsidor.