Hattemanden: skræddersyet Shopify-butik på 13 dage, nr. 1 på Google

En hattebutik der har eksisteret siden 1988 og ingen kunne finde online

Kim driver Hattemanden i Kolding. Butikken har været der siden 1988. Gå ned ad gaden og du finder den. Søg på Google og du fandt ingenting. Ingen hjemmeside. Ingen online tilstedeværelse. Bare en fysisk butik der levede af gadetrafik og mund-til-mund.

Det virkede i 35 år. Så holdt det op med at virke. Gadetrafikken faldt. Konkurrenter med webshops begyndte at tage markedsandele. Kim vidste han havde brug for en hjemmeside, men anede ikke hvor han skulle starte, og de tilbud han havde fået fra bureauer var enten for dyre eller skuffende.

Vi byggede ham en fuldt tilpasset Shopify-butik på 13 dage. Ikke en skabelon med et logo-swap. Et grundbygget tema med 28 håndkodede sektioner, nul betalte apps og SEO indarbejdet i hver eneste side. Inden for få uger lå den nummer 1 på Google for hans målsøgninger i Danmark.

Her er præcis hvordan vi gjorde det.

Hvorfor skræddersyet og hvorfor Shopify

Kim havde brug for to ting der trak i modsatte retninger. Han havde brug for en butik der så ud og fungerede præcis som han ønskede, hvilket normalt betyder tilpasset udvikling. Og han havde brug for at kunne styre produkter, lager og ordrer selv uden at ringe til en udvikler hver gang han tilføjede en ny hat, hvilket normalt betyder en platform som Shopify.

Vi gav ham begge dele.

Shopify håndterer backenden: produktstyring, lagersporing, ordrebehandling, betalingshåndtering. Kim kan tilføje et nyt produkt på fem minutter. Han kan tjekke ordrer på telefonen mellem kunder. Han rører aldrig kode.

Alt hvad kunden ser er skræddersyet. Designet, layoutet, navigationen, produktsiderne, checkout-flowet. Otteogtyve tilpassede sektioner bygget fra bunden, ikke modificerede skabeloner. Det er vigtigt fordi skabeloner tvinger dig ind i deres struktur. Når din forretning ikke passer til skabelonen, går du enten på kompromis med oplevelsen eller hakker skabelonen til den går i stykker.

Vi bruger ikke betalte Shopify-apps. Alle funktioner er bygget ind i selve temaet. Det betyder ingen månedlige app-afgifter der æder ind i avancen, ingen tredjeparts-scripts der gør siden langsommere, og ingen afhængigheder af apps der kan lukke ned eller ændre priser.

Hvad vi byggede

Hover-til-video på produkter

Når en kunde holder musen over et produktbillede, afspilles en kort video der viser hatten fra flere vinkler. Det er ikke standard Shopify-funktionalitet. Vi byggede det som en tilpasset sektion Kim kan slå til og fra per produkt. Det virker på desktop og falder elegant tilbage til et statisk billedgalleri på mobil.

Dynamisk farveskift

Mange hatte fås i flere farver. I stedet for at liste hver farve som et separat produkt (hvilket roder kataloget til) byggede vi et farvepalet-system der opdaterer produktbilledet, prisen og tilgængeligheden i realtid når man klikker en anden farve. Sømløst, hurtigt, ingen sidegenindlæsning.

Automatiserede lagerbeskeder fra to leverandører

Kim henter hatte fra to forskellige leverandører med forskellige lagersystemer. Vi byggede en automatisering der tjekker lagerniveauer fra begge leverandører og advarer Kim når varer er ved at løbekort. Ingen manuelle lageroptællinger. Ingen salg af produkter der faktisk er udsolgt.

SEO fra dag et

Hver produktside har strukturerede data (Product-schema med pris, tilgængelighed og anmeldelser). Hver kategoriside har optimerede metatitler og -beskrivelser. Siden har en ren URL-struktur, korrekte canonical-tags, et XML-sitemap og hurtige indlæsningstider. Vi boltrede ikke SEO på efter lancering. Det var en del af byggeriet fra første kodelinje.

13 dage fra kontrakt til live site

Tidslinjen:

Dag 1-2: Discovery og design. Vi kortlagde Kims produktkatalog, forstod hans workflow og designede de vigtigste sider. Ingen wireframes der tager uger. Direkte design i browseren.

Dag 3-7: Kernebygning. Tema-arkitektur, produktskabeloner, kollektionssider, kurv- og checkout-flow, mobiloptimering. Det tunge arbejde.

Dag 8-10: Tilpassede funktioner. Hover-til-video, farveskift, leverandørintegration, lagerbeskeder. De ting der får denne butik til at føles helt anderledes end en skabelon.

Dag 11-12: Indhold og SEO. Produktbeskrivelser, metadata, schema-markup, billedoptimering, hastighedstest. Det usynlige arbejde der får Google til at lægge mærke til dig.

Dag 13: Lancering. DNS-skift, SSL-certifikat, endelig test på rigtige enheder, analytics-opsætning, og vi var live.

Tretten dage er hurtigt, men det er ikke forhastet. Det er hvad der sker når man ved præcis hvad der skal bygges og ikke spilder tid på unøvendig proces. Ingen tre runder wireframe-revisioner. Ingen komitegodkendelser. Direkte kommunikation, hurtige beslutninger, ren eksekvering.

Resultaterne

Førstepladsen var det mest synlige resultat, men 8x trafikvæksten fortæller den fulde historie. Kim gik fra nul online tilstedeværelse til en butik der bringer kunder ind fra hele Danmark. Mennesker der aldrig ville have gået ind i en hattebutik i Kolding bestiller nu hatte online og får dem leveret til døren.

93/100 SEO-score betyder at det tekniske fundament er solidt. Hurtige indlæsningstider, korrekt markup, ren kode, mobil-først design. Det er ikke en score der forringes over tid hvis man bliver ved med at tilføje produkter på den rigtige måde. Arkitekturen understøtter vækst.

Nul betalte apps betyder at Kims eneste løbenede omkostning er selve Shopify-abonnementet. Ingen anmeldelses-app til 200 kr./måned. Ingen SEO-plugin til 150 kr./måned. Ingen sidebygger til 350 kr./måned. Alt er bygget ind i temaet. Over et år sparer det tusindvis af kroner sammenlignet med en typisk Shopify-butik fyldt med apps.

Hvad der fik det til at virke

Tre ting adskilte dette projekt fra et typisk Shopify-build.

Ingen skabeloner. Skabeloner er fine til at teste en ide. De er ikke fine til at bygge et brand. Kims butik skulle føles som Hattemanden, ikke som "Shopify-butik nummer 47.000 der bruger Dawn-temaet." Tilpasset kode fra første linje betød at hver pixel havde et formål.

Hastighed som feature. Vi behandlede performance som et kernekrav, ikke en eftertanke. Ingen oppustede JavaScript-biblioteker. Ingen tredjeparts app-scripts der indlæses på hver side. Ingen overdimensionerede billeder. Resultatet er en butik der indlæser hurtigt nok til at Google beløner den med højere placeringer og kunder ikke forsvinder før siden er færdig med at rendere.

SEO som arkitektur, ikke dekoration. De fleste Shopify-butikker tilføjer SEO efter lancering. Installer et plugin, udfyld nogle metabeskrivelser, indsend til Google, håb på det bedste. Vi byggede SEO ind i site-strukturen fra starten. URL-mønstre, overskriftshierarki, intern linkstruktur, schema-markup, billed-alt-tekst, sidehastighed. Alt designet før det første produkt blev uploadet.

Læren for alle der bygger en webshop

Man behøver ikke seks måneder og et enormt budget for at lancere en butik der virker. Man behøver klarhed om hvad butikken skal gøre, disciplinen til kun at bygge det, og den tekniske evne til at bygge det ordentligt.

Kim havde en 35 år gammel forretning med nul online tilstedeværelse. Tretten dage senere havde han en tilpasset butik der lå nummer 1 på Google. Afstanden mellem "ingen hjemmeside" og "den bedste hjemmeside i din niche" er mindre end de fleste tror. Det handler ikke om penge. Det handler om at vide hvad man skal bygge og hvad man skal springe over.

Hvis du driver en forretning der burde sælge online men ikke gør det, eller hvis du har en Shopify-butik der ligner alle andre Shopify-butikker og performer derefter, kan vi fikse det. Se vores e-handelstjenester for at se hvordan vi bygger butikker der rent faktisk sælger.

Vil du vide hvor din nuværende tilstedeværelse står? En SEO-auditrapport viser dig præcis hvad der koster dig trafik og placeringer lige nu.

Og hvis du stadig er i planlægningsfasen, dækker vores guide om hvordan man lancerer en webshop de beslutninger der betyder mest før du skriver en eneste linje kode.