Et godt Magento webshop design er ikke det flotteste design, men det design, hvor kunden hurtigt finder den rigtige vare og gennemfører købet. Det handler om navigation, kategorisider, produktsider, mobilvisning og hastighed – og først derefter om farver og billeder. Valget mellem et færdigt tema og eget design er samtidig det, der påvirker prisen mest.
Herunder gennemgår vi de principper, vi selv arbejder ud fra, når vi designer en webshop på Magento 2, og hvad du skal overveje, før du beder om et tilbud.
Magento webshop design starter med strukturen
Før der tegnes en eneste side, skal strukturen være på plads. Hvilke kategorier har du, hvordan søger dine kunder, og hvilke egenskaber skal de kunne filtrere på? Et design, der ser godt ud med ti produkter, kan falde fra hinanden med 3.000.
- Menuen bygges efter, hvordan kunderne tænker – ikke efter leverandørens varegrupper. To-tre niveauer er som regel nok.
- Filtre kræver, at produkterne har de rigtige egenskaber (fx størrelse, farve, mærke). I Magento skal kategorien desuden være sat til "Is Anchor", før filtreringen i siden vises.
- Søgningen skal kunne findes med det samme, især på mobil, hvor menuen er gemt bag et ikon.
Kategorisider: overblik frem for pynt
Kategorisiden er der, hvor kunden sammenligner. Hold den ren: tydeligt produktbillede, navn, pris og lagerstatus. Overvej, om kunden skal kunne se et ekstra billede, når musen holdes over produktet – det kan løses med vores modul til billedskift ved mouse over.
På store kategorier hjælper det at vise underkategorierne øverst på siden med billeder eller tekstbokse, så kunden ikke skal tilbage op i hovedmenuen. Det er netop formålet med vores modul til subkategori-billeder og tekstbokse. Placér en kort, nyttig kategoritekst, så siden også har noget at blive fundet på i Google – men lad den ikke skubbe produkterne langt ned.
Produktsider: svar på kundens spørgsmål
En produktside skal fjerne tvivl. Det betyder:
- Skarpe billeder fra flere vinkler – og gerne i brug.
- Egne produkttekster, ikke leverandørens. Det hjælper både kunden og din synlighed i Google.
- Pris, leveringstid og lagerstatus tæt ved købsknappen.
- Tydelige varianter (størrelse, farve), så kunden ikke vælger forkert.
- Relaterede produkter og tilbehør, som giver mersalg uden at forstyrre købet.
Lange tekniske beskrivelser, manualer eller videoer kan samles i faner, så siden ikke bliver uoverskuelig.
Mobil først – også i designprocessen
Mange besøgende kommer fra en telefon. Et responsivt design er derfor ikke en ekstra funktion, men udgangspunktet. Tjek især: Er knapperne store nok at ramme med en tommelfinger? Kan filtrene åbnes og lukkes nemt? Er kurven og checkout lige så enkle på mobil som på computer? Designskitser bør laves til mobil, ikke kun til en stor skærm.
Hastighed er en del af designet
Et tungt design med store billeder, mange skrifttyper og meget JavaScript koster på hastigheden – og en langsom shop koster salg. Valget af frontend har stor betydning. Magentos klassiske tema, Luma, er tungt, og derfor bygger vi nye shops på moderne frontends:
- Breeze er en letvægts-frontend udviklet af SwissUpLabs, som erstatter Luma og er hurtig at implementere.
- Hyvä er bygget fra bunden med Tailwind CSS og Alpine.js og giver en enklere og hurtigere frontend-kodebase.
Vi har bygget en Magento-webshop med Breeze, der scorer grønt i Google PageSpeed på både mobil og desktop. Vil du sammenligne de to, har vi skrevet en guide om Breeze eller Hyvä. De øvrige tekniske tiltag finder du i vores guide til Magento hastighedsoptimering.
Forsiden: vis vejen ind i sortimentet
Forsiden er sjældent der, hvor kunden køber, men det er der, mange starter. Brug den til at vise de vigtigste kategorier, aktuelle kampagner og det, der gør din shop værd at handle i – fx levering, returret og kundeservice. Et stort roterende slideshow med fem budskaber bliver sjældent set til ende. Ét klart budskab og tydelige indgange til kategorierne virker som regel bedre.
Test designet med rigtige brugere
Inden lancering bør du se nogle få personer bruge shoppen: Bed dem finde et bestemt produkt, lægge det i kurven og gå til checkout. Hvor de tøver, er der noget at rette. Efter lancering viser data fra fx Google Analytics 4, hvor kunderne falder fra. Design er ikke færdigt ved lanceringen – det justeres løbende ud fra, hvordan kunderne faktisk bruger shoppen.
Tema eller eget design?
| Færdigt tema | Eget design | |
|---|---|---|
| Pris | Lavere startpris | Højere, fordi der designes og udvikles fra bunden |
| Tid | Hurtigt i gang | Længere forløb med skitser og test |
| Udtryk | Ligner andre shops på samme tema | Bygget til dit brand og dine kunder |
| Hastighed | Afhænger af temaets kvalitet og antal funktioner | Kan holdes slankt fra start |
| Vedligehold | Afhænger af temaudviklerens opdateringer | Afhænger af kodens kvalitet og dokumentation |
Et købt tema kan være et fornuftigt udgangspunkt, men vær kritisk: Mange temaer har funktioner, du ikke bruger, men som stadig skal indlæses. Et tilpasset design på en moderne frontend som Breeze eller Hyvä giver ofte et bedre resultat på lang sigt.
Hvad påvirker prisen på webshop design?
Prisen afhænger især af:
- Antal unikke sideskabeloner – forside, kategoriside, produktside, kurv, checkout, CMS-sider.
- Frontend – Luma, Breeze eller Hyvä.
- Særlige funktioner – fx konfiguratorer, mega-menu, B2B-visninger eller flere sprog.
- Indhold – om du selv leverer billeder og tekster, eller om de skal produceres.
- Integrationer – betaling, fragt, ERP og kassesystem påvirker ikke designet direkte, men projektets samlede omfang.
Alle vores prispakker til Magento webshops indeholder custom design. Basic og Standard bygges på Luma eller Breeze, mens Professionel bygges på Breeze eller Hyvä. Vi laver altid et konkret tilbud ud fra dit projekt.
Ofte stillede spørgsmål
Kan jeg få et Magento design, der ligner min nuværende shop?
Ja, et eksisterende design kan genskabes på en ny frontend. Det er dog en god anledning til at se på, hvad der virker i dag, og hvad der kan forbedres – fx menu, filtre og produktsider.
Er Hyvä eller Breeze bedst til webshop design?
Begge giver en hurtigere frontend end Luma, og begge kan designes frit. Valget afhænger af projektets størrelse, budget og hvilke moduler shoppen skal bruge.
Kan jeg selv ændre designet bagefter?
Indhold som bannere, tekster og CMS-sider kan du som regel selv redigere i Magentos administration, fx med Page Builder. Ændringer i selve skabelonerne kræver en udvikler.
Hvor lang tid tager et nyt design?
Det afhænger af antal sideskabeloner, og hvor hurtigt beslutningerne træffes. Et færdigt tema går hurtigere end et design fra bunden.
Skal din webshop have et nyt design, der både ser godt ud og sælger? Kontakt os for en uforpligtende snak om dit projekt.
