Den här artikeln går igenom vilka komponenter en webbshop behöver, vilka tillstånd som brukar glömmas, och hur ett designsystem passar ihop med hur ett Shopify-tema är byggt.
Varför en butik behöver ett designsystem
Utan ett designsystem ser produktkortet snart olika ut på startsidan, på kategorisidan och i kampanjen. Priset står på olika ställen, rabatten visas på tre sätt och knappen för att lägga i varukorgen har två olika namn. Var för sig är det små saker, men tillsammans gör de butiken svårare att lita på och att handla i.
Ett designsystem löser det genom att varje del finns en gång, med regler för hur den ser ut och beter sig. Det gör också nästa kampanj snabbare att göra, eftersom den byggs av delar som redan finns, och det gör att tillgänglighet bara behöver lösas en gång per komponent i stället för på varje sida.
Komponenterna en webbshop inte klarar sig utan
- Produktkortet: bild, namn, pris och ofta lagerstatus och varianter. Det är butikens mest upprepade komponent och den som syns på kategorisidor, i sök, kampanjer och rekommendationer.
- Priset: ordinarie pris, rabatterat pris, pris per styck eller per kilo, och pris med eller utan moms i en butik som säljer till företag.
- Lagerstatus och leveranstid: i lager, få kvar, slut, och när varan kan levereras.
- Variantväljaren: storlek, färg och material, och vad som händer när en kombination är slut.
- Filter och sortering: på en stor skärm och på en telefon, där de oftast behöver fungera annorlunda.
- Varukorgen: den lilla som visas när en vara läggs till, och sidan där köpet fortsätter.
- Meddelanden: fri frakt från ett visst belopp, en kampanj som gäller, och fel som behöver rättas.
- Knappar och formulär: med samma utseende och samma ord överallt.
Tillstånden som brukar glömmas
Det är sällan komponenten i sitt vanliga läge som ställer till det, utan alla andra lägen. Ett produktkort ska också fungera när varan är slut, när bara en storlek finns kvar, när den går att förbeställa och när den är rabatterad. Varukorgen ska fungera när den är tom. Sökningen ska säga något vettigt när den inte hittar något, och kassan när en betalning inte går igenom.
Skriv ned tillstånden för varje komponent i designsystemet och designa dem från början. Det är där designsystemet sparar mest tid, eftersom tillstånden annars uppfinns på nytt, och olika, av den som stöter på dem först.
Designsystem i ett Shopify-tema
Ett Shopify-tema är redan byggt av delar. Sidorna sätts ihop av sektioner, och sektionerna av block. Block kan återanvändas mellan sektioner och läggas i varandra, och mindre bitar kod som används på många ställen ligger i så kallade snippets. Det passar ett designsystem väl: komponenterna i designen kan bli block och snippets i temat, och sektionerna blir de mönster som butiken bygger sina sidor av.
När designen och temat har samma delar och samma namn kan den som sköter butiken bygga en ny kampanjsida i Shopify utan att den ser annorlunda ut än resten. Det går också fortare att ändra något, eftersom en ändring i en komponent slår igenom överallt där den används.
Det som ligger utanför designsystemet är apparna. En app kan lägga in egna block, och egna element som en chattbubbla eller ett märke, med sin egen stil. Gå igenom vad apparna lägger till, både för utseendet och för tillgängligheten, innan de installeras.
Komponenter för butiker som säljer till företag
En butik som säljer till företag behöver fler delar: prislistor per kund, regler för hur många av en vara som får köpas och i vilka steg, en lista där inköparen snabbt kan fylla i flera artiklar, och orderhistorik med möjlighet att lägga samma order igen. Shopify har stöd för flera av dem, och vi skriver mer om det i B2B-e-handel: så skiljer den sig från e-handel för konsumenter.
Tillgänglighet i komponenterna
Ett designsystem är det effektivaste stället att lösa tillgänglighet på. Kontrast, fokusmarkering, storleken på det som går att klicka på och hur en variantväljare fungerar med tangentbordet bestäms en gång och gäller sedan i hela butiken. Sedan 2025 omfattas de flesta webbshoppar som säljer till konsumenter av tillgänglighetslagen, så det är också ett krav. Läs mer i Tillgänglighetslagen och din Shopify-butik.
Från Figma till kod
Designsystemet brukar börja i Figma med färger, typografi och avstånd som variabler, och komponenterna byggda av dem. Samma variabler och samma komponentnamn bör finnas i koden, så att designen och temat går att jämföra rad för rad. Hur komponenterna ordnas säger vi mer om i Atomic Design är ingen navigation, och ett exempel på ett designsystem vi gjort finns i körkortsappen Waygo.