Alle artikler

Sådan forbedrer du produktkort i Shopify

Forbedr produktkort i Shopify med skarp UX, stærke købssignaler og hurtig performance, så flere besøg bliver til salg hver eneste dag for dit brand.

Sådan forbedrer du produktkort i Shopify

Et produktkort på en kollektionsside får sjældent mange sekunder til at gøre sit arbejde. Kunden scanner kategori, pris, billeder og pasform, ofte på mobilen og ofte med fem andre brands åbne i browseren. Derfor handler Sådan forbedrer du produktkort i Shopify ikke om at presse mere information ind på mindre plads. Det handler om at gøre det let at vælge, klikke og købe uden at svække den premium oplevelse, jeres brand lever af.

For fashion- og lifestyle-brands er produktkortet en kommerciel flade, ikke blot en visning af produkter. Hvis kunden ikke hurtigt kan se, hvad produktet er, hvorfor det er relevant, og om det er tilgængeligt i den rigtige variant, mister I et klik, før produktsiden overhovedet får chancen for at konvertere.

Produktkortet er jeres første købssamtale

På produktsiden har I plads til fortælling, materialedetaljer, størrelsesguide og social proof. På produktkortet skal I skabe retning. Kortet skal hjælpe kunden med at sortere i sortimentet og få øje på det rigtige produkt med mindst mulig friktion.

Det betyder, at et godt produktkort ikke nødvendigvis er et produktkort med flest badges, farveprøver og knapper. For mange lag skaber visuelt støj og gør det sværere at afkode produktet. Et fashion-brand med stærke kampagnebilleder kan have mere gavn af et rent, redaktionelt udtryk. Et brand med mange farver, størrelser og gentagne køb kan have mere gavn af tydelige varianter og hurtig tilføjelse til kurv.

Målet er det samme: højere klikrate fra kollektion til produkt og færre afbrydelser på vejen til køb.

Sådan forbedrer du produktkort i Shopify

Start med kundens beslutning frem for temaets standardindstillinger. Shopify-temaer er bygget til at fungere for mange butikker. Ambitiøse brands har typisk brug for en produktkortlogik, der passer til deres eget sortiment, marginer, kampagner og kunderejse.

Giv informationen en tydelig prioritet

Produktbilledet skal bære størstedelen af opmærksomheden. Derefter kommer produktnavn, pris og den information, der reelt kan flytte beslutningen - eksempelvis en udsalgspris, en nyhedsmærkning eller et diskret signal om bestseller-status.

Produktnavne skal være nemme at skimme. Hvis alle titler består af poetiske produktnavne uden produkttype, tvinger I kunden til at gætte. Omvendt kan meget lange, interne produktnavne få kortet til at se rodet ud. En god balance er et tydeligt modelnavn kombineret med produktkategori, hvis kategorien ikke allerede er åbenlys i billedet.

Prisen skal stå stabilt og læsbart. Ved udsalg bør førprisen understøtte besparelsen uden at tage fokus fra den aktuelle pris. Undgå konstant skiftende placeringer fra kort til kort. Visuel konsekvens gør hele kollektionssiden hurtigere at afkode.

Brug billeder, der svarer på det næste spørgsmål

Det første billede skal sælge silhuetten. Det andet billede skal reducere tvivl. For tøj kan det være produktet på model, en bagfra-visning eller en materialedetalje. For interiør kan det være produktet i brug eller et billede, der tydeliggør skalaen.

Hover-billeder på desktop kan være effektive, men de må ikke være den eneste måde at forstå produktet på. En stor del af trafikken kommer fra touch-enheder, hvor hover ikke findes. Sørg derfor for, at det første billede kan stå alene.

Billedformatet er også en brandbeslutning. Ensartede formater skaber ro og gør sortimentet sammenligneligt. Bevidste brud kan fungere i en kampagnekollektion, men hvis hvert kort beskæres forskelligt uden en klar idé, opleves siden hurtigt som mindre gennemarbejdet.

Gør varianter nyttige, ikke dekorative

Farveprøver kan løfte både engagement og klikrate, når de faktisk viser noget relevant. De skal være præcise, have tydelig valgt tilstand og opdatere billedet, hvis det hjælper kunden med at forstå farven. En lille brun cirkel uden sammenhæng med produktets nuance er ikke et købssignal.

Vis kun det antal farver, der kan aflæses uden at gøre kortet kompakt og uroligt. Har et produkt 14 farver, kan en tæller som “+10” være bedre end at mase samtlige swatches ind. Ved klik bør kunden føres til den korrekte variant på produktsiden, så valget ikke går tabt.

Størrelser er mere situationsbestemte. På en kollektionsside med høj købsintention kan hurtig valg af størrelse og tilføjelse til kurv være stærkt. På en side, hvor kunden stadig orienterer sig, kan samme funktion skabe unødigt pres. Test den mod jeres trafik og produktkompleksitet i stedet for at kopiere en konkurrent.

Brug badges med kommerciel disciplin

“Nyhed”, “Bestseller”, “Få tilbage” og “Udsalg” kan skabe retning, men kun når de er troværdige og konsekvente. Hvis halvdelen af kollektionen er markeret som bestseller, bliver mærket værdiløst. Hvis “få tilbage” ikke tager højde for lager på variantniveau, risikerer I at kommunikere forkert.

Vælg få badges med klare regler. Et godt setup er typisk datadrevet: nyhed inden for en fast periode, bestseller baseret på salg og lagerstatus baseret på faktisk tilgængelighed. Så kan merchandising-teamet arbejde hurtigere, uden at produktkortet mister troværdighed.

Design produktkort til mobil før desktop

På mobil har kunden mindre plads, større risiko for fejltryk og højere krav til hastighed. Det stiller krav til både layout og funktionalitet. To kort i bredden kan være effektivt for et visuelt drevet sortiment, men hvis produktnavne, priser og farver bliver klemt, kan ét bredere kort være den bedre forretning.

Giv touch-elementer plads. Farveprøver, favoritfunktion og quick add må ikke ligge så tæt, at kunden rammer forkert. Hold desuden højden så ensartet som muligt mellem kortene. Når priser, titler og badges hopper op og ned, bliver scrolloplevelsen trættende og mindre premium.

Quick add er et godt eksempel på, at mere funktionalitet ikke altid er bedre. Det kan forkorte vejen til kurv for simple produkter med få varianter. For kjoler, jeans eller produkter med kompleks pasform kan en hurtig tilføjelse skabe forkerte størrelsesvalg og flere returneringer. Her kan en tydelig knap til produktsiden være den mere profitable løsning.

Performance er en del af konverteringen

Et veldesignet produktkort taber værdi, hvis billeder, scripts og app-funktioner forsinker kollektionssiden. Mange Shopify-butikker ender med produktkort, hvor hver ekstra funktion henter sit eget script: wishlist, reviews, badges, swatches, tracking og quick add. Resultatet er ofte langsom indlæsning og ujævn interaktion - særligt på mobilnetværk.

Prioritér billeder i de rette dimensioner, moderne billedformater og fornuftig lazy loading. Det første synlige indhold må dog ikke vente unødigt. Hvis produktbillederne over folden først hentes sent, opleves siden langsom, uanset hvad målingen siger på papiret.

Vurder også, om app-funktioner kan samles eller bygges direkte ind i temaet. En skræddersyet produktkortkomponent kan ofte give bedre kontrol over design, data og hastighed end flere lag af apps. Det er ikke altid nødvendigt at specialudvikle. Men når produktkortet er centralt for jeres salg, er det sjældent klogt at lade det blive defineret af tilfældige app-begrænsninger.

Mål på adfærd, ikke kun på konverteringsrate

En ændring i produktkortet bør vurderes på hele kunderejsen. En højere klikrate til produktsiden er positiv, men ikke hvis den samtidig giver lavere add-to-cart-rate, flere fejlvalg eller færre køb. Se derfor på klik fra kollektion til produkt, brug af varianter, tilføjelser til kurv, konvertering og eventuelt returdata.

Segmentér resultaterne. Kunder fra Meta Ads kan reagere anderledes end loyale kunder fra e-mail, fordi de har forskellig produktkendskab og intention. Det samme gælder mobil og desktop. Hvis I ændrer alt på én gang - billede, badge, farveprøver og quick add - bliver det svært at se, hvad der faktisk flyttede resultatet.

Arbejd hellere med en klar hypotese. Eksempelvis: “Når kunden kan skifte farve direkte på kortet, vil flere klikke videre til den rette variant.” Så får I en test, der kan bekræfte eller afkræfte en konkret antagelse og danne grundlag for næste forbedring.

Når standardtemaet ikke længere er nok

Hvis jeres sortiment vokser, kampagner skifter ofte, eller produktdata skal styre oplevelsen mere intelligent, bliver produktkortet hurtigt en udviklingsopgave frem for en temaindstilling. Det gælder blandt andet dynamiske badges, variantlogik, bundter, medlemspriser, B2B-visning og kampagnespecifik merchandising.

Her bør løsningen bygges på samme måde, som I ville bygge jeres egen webshop: med et klart designprincip, ren teknisk struktur og plads til at ændre retning uden at skabe ny gæld hver gang. OkayScale arbejder netop med at koble konverteringsfokuseret design og Shopify-udvikling, så de flader, der møder kunden først, også kan skaleres bagefter.

Det bedste produktkort føles ikke som en funktion, kunden skal lære at bruge. Det gør det lettere at finde det rigtige produkt, trygt at vælge variant og naturligt at gå videre. Når hver detalje har en kommerciel begrundelse, bliver kollektionssiden ikke bare pænere - den bliver bygget til at sælge mere over tid.

Læs også

06.10.2026 Shopify eksperter, der skaber salg og skala 04.10.2026 Shopify versus Magento til ambitiøse webshops 02.10.2026 Sådan designer du mobil checkout, der konverterer