20 000 produkter i demon: så bygger vi katalogen

Demobutiken på demo.ekommers.se har 20 000 produkter. Det är antalet vi valde att lägga in i demon, inte en gräns för plattformen. Ingen av produkterna finns på riktigt, men katalogen är byggd för att bete sig som en riktig. Här beskriver vi hur.

Varför en stor katalog

En demobutik med tjugo produkter säger lite om hur en plattform fungerar i vardagen. Kategorisidor, filter, sökning och varianter ser annorlunda ut när sortimentet är stort. Därför har demon ett litet urval handskrivna produkter och därtill volym, så att du kan bläddra, filtrera och söka i ett sortiment av samma slag som en etablerad butik har.

Temat är inredning och hem. Allt är påhittat, även varumärkena.

Katalogen beskrivs i en fil

Katalogen utgår från en beskrivning: kategorier, produkttyper, material, färger, påhittade varumärken, serienamn och de handskrivna produkterna. Ur den räknar ett skript fram en produktplan.

Planen är deterministisk. Slumpen startar alltid från samma frö, så samma beskrivning ger exakt samma produkter varje gång. Det gör planen testbar utan databas, och katalogen går att bygga om när som helst med samma resultat. Skriptet känner igen produkter som redan finns på artikelnumret och hoppar över dem.

Varje produkt får ett namn av typ och serie, ett material, en eller flera färger, storlekar där typen har storlekar och en beskrivning som sätts ihop av texter för typen. Priserna slutar på 9 eller 90, som i en riktig butik. En liten andel varianter är slutsålda, så att det går att se hur butiken visar det.

Riktiga foton per modell och färg

Varje produkt har fotografier, inte piktogram eller platshållare. Varje produkttyp finns i flera modeller, textilier finns fotograferade i alla färger och de handskrivna produkterna har egna foton. Fotona är genererade med en bildmodell, och beskrivningarna av dem ligger i samma fil som katalogen, så att de går att göra om.

Reglerna är enkla. Serien bestämmer modellen, så en stol i serien Alm är alltid samma stol, i alla färger och storlekar. Material och färger väljs bland de foton som finns för modellen. Produktens namn, filter och färgvarianter stämmer därför med det som syns på bilden. Filtrerar du på grön sammet ser du grön sammet.

Varje färg ger en egen bild. Varje produkt får dessutom en egen, lätt ändrad kopia av fotot: speglad eller inte, lite beskuren, lite ljusare eller varmare. Ingen bildadress delas mellan två produkter, så webbläsaren och bildservern arbetar med lika många unika bilder som i en riktig butik.

Bilder i rätt storlek

Bilderna serveras som AVIF i den storlek sidan behöver: mindre på produktkorten och större på produktsidan. Eftersom det är fotografier och inte grafik väger de ungefär som bilderna i en riktig butik. Det du ser när sidorna laddas är alltså inte en effekt av lätta bilder.

Ett ärligt sätt att visa plattformen

Det finns två vanliga sätt att få en demo att se bättre ut än den är. Det ena är att ha för få produkter, så att allt är överskådligt och snabbt. Det andra är att använda lätta bilder eller samma bild överallt, så att sidorna laddar fortare än de skulle göra med ett riktigt sortiment. Vi gör ingetdera.

Katalogen i demon har fotografier, varianter, filter och lagerstatus som hänger ihop. När du klickar runt ser du plattformen i ett läge som liknar det en butik har i drift, inte ett skyltfönster byggt för att se bra ut.

Att katalogen byggs ur en fil gör också att den är lätt att underhålla. Vill vi ändra sortimentet, lägga till en kategori eller en ny marknad ändrar vi beskrivningen och bygger om. Samma arbetssätt använder vi när vi importerar en kunds sortiment: en källa, en plan och en import som går att köra om.

Vad det betyder för dig

Har du ett stort sortiment kan du se hur det skulle kännas i demon. Bläddra i kategorierna, filtrera på material och färg, öppna en produkt och byt variant. Det du ser är samma plattform som vi bygger kundernas butiker på.

Källor

• Demobutikens sortiment