Sjekkliste for produktsider: dette stopper kundene fra å kjøpe
Sjekkliste for produktsiden basert på Baymard og WebAIM: pris, frakt og retur, bilder, anmeldelser, kjøpsknapp på mobil, popup-vinduer, søk og tastaturbruk.
FixReports-redaksjonen11 min lesing
Kunder stopper oftest opp på en produktside når de ikke kan finne ut hva totalprisen blir, ikke finner vilkårene for frakt og retur, ikke kan vurdere produktet ut fra bildene og anmeldelsene, eller ikke enkelt kommer frem til og kan bruke kjøpsknappen, særlig på mobil. Popup-vinduer som dekker siden, sider med vilkår som er vanskelige å finne, et søk på nettstedet som ikke kan svare på enkle spørsmål, og kontroller som ikke fungerer med tastatur, hindrer også kjøp. Tallene nedenfor er bransjetall fra Baymard Institute og WebAIM, basert på store utvalg av nettsteder og kunder; de beskriver vanlige mønstre, ikke prognoser for en enkelt butikk.
Kort oppsummert
- I Baymards undersøkelse fra 2026 blant 1 083 voksne i USA som hadde handlet på nett de siste tre månedene, sa 40 % at de hadde avbrutt et kjøp i kassen fordi ekstrakostnader som frakt, skatt og gebyrer var for høye (Baymard Institute (åpnes i en ny fane)).
- Baymards referansetest for produktsider fant at 67 % av de ledende netthandelsnettstedene ikke gir noe anslag over totalkostnaden i nærheten av kjøpsdelen, og at 44 % ikke viser eller lenker til returvilkårene fra hovedinnholdet om produktet (Baymard Institute (åpnes i en ny fane), oppdatert 18. mars 2026).
- I den samme referansetesten hadde 62 % av mobilnettstedene en brukeropplevelse på produktsidene som var «middelmådig» eller dårligere.
- WebAIM fant WCAG-feil på 95,9 % av forsidene til de én million største nettstedene i februar 2026 (WebAIM (åpnes i en ny fane)).
- I en gjennomgang Baymard gjorde i 2021 av 33 netthandelsnettsteder med høyest omsetning, hadde 45 % funksjoner som ikke kunne betjenes med tastatur (Baymard Institute (åpnes i en ny fane)).
Hvorfor avbryter kunder et kjøp?
Det vanligste svaret er at kundene bare så seg rundt; deretter kommer ekstrakostnader, treg levering, lav tillit til hvordan kortopplysninger håndteres, og krav om å opprette konto.
Baymards side om forlatte handlekurver anslår den gjennomsnittlige dokumenterte andelen forlatte handlekurver til 70,22 %, beregnet ut fra 50 studier (siden ble sist oppdatert 22. september 2025). Diagrammet over årsaker, merket som data fra 2026, bygger på en undersøkelse blant 1 083 voksne i USA som hadde handlet på nett de tre foregående månedene. Respondentene kunne velge mer enn én årsak (Baymard Institute (åpnes i en ny fane), per oktober 2026):
| Årsak til å avbryte et kjøp på nett i kassen | Andel av respondentene |
|---|---|
| Jeg så meg bare rundt / var ikke klar til å kjøpe | 42 % |
| For høye ekstrakostnader (frakt, skatt, gebyrer) | 40 % |
| Leveringen tok for lang tid | 20 % |
| Jeg stolte ikke på nettstedet med kredittkortopplysningene mine | 19 % |
| Nettstedet ville at jeg skulle opprette en konto | 18 % |
| For lang eller komplisert kasseprosess | 17 % |
| Nettstedet hadde feil eller krasjet | 17 % |
| Returvilkårene var ikke tilfredsstillende | 13 % |
| Jeg kunne ikke se eller beregne den totale ordrekostnaden på forhånd | 12 % |
| Kredittkortet ble avvist | 10 % |
| Det var ikke nok betalingsmåter | 9 % |
Dette er resultater fra en amerikansk undersøkelse om kassen, ikke målinger av din butikk. Flere av årsakene oppstår tidligere, på produktsiden, der kundene først ser prisen, leveringsvilkårene og returvilkårene. Bare din egen analyse kan vise hvilke av dem som betyr noe for deg.
Er totalprisen tydelig på produktsiden?
Gjeldende pris, en eventuell førpris, hva som er inkludert eller ikke, og et anslag over frakten bør alle stå ved siden av kjøpsknappen.
Baymards referansetest for produktsider fra 2026 fant at 67 % av nettstedene ikke gir et anslag over «total ordrekostnad» i nærheten av kjøpsdelen, og at 81 % ikke viser enhetspris for produkter som selges i ulike mengder eller størrelser (Baymard Institute (åpnes i en ny fane)). Sjekk at siden viser:
- Gjeldende pris og, for varer på salg, den opprinnelige prisen.
- En enhetspris for produkter som selges i flere størrelser.
- Om avgifter eller toll er inkludert.
- Fraktkostnaden, eller ordreverdien som gir gratis frakt.
Shopify: I Dawn-temaet legger prisblokken til «Taxes included.» (avgifter inkludert) og en lenke med «Shipping calculated at checkout.» (frakt beregnes i kassen) når disse innstillingene og en fraktpolicy finnes (Dawns kildekode (åpnes i en ny fane)). Det er korrekt, men det er ikke et anslag, så legg inn de faktiske fraktprisene eller grensen for gratis frakt i en tekstblokk.
WooCommerce: Alternativene «Enable the shipping calculator on the cart page» (aktiver fraktkalkulatoren på handlekurvsiden) og «Hide shipping costs until an address is entered» (skjul fraktkostnader til en adresse er oppgitt) under WooCommerce > Innstillinger > Frakt (WooCommerce > Settings > Shipping) påvirker handlekurven og kassen, ikke produktsiden (WooCommerces kildekode (åpnes i en ny fane)). Legg inn fraktprisene i produktmalen eller i den korte beskrivelsen.
Finner kundene informasjon om frakt og retur før de legger varen i handlekurven?
Legg en kort oppsummering av leveringstid, fraktkostnad og returfrist nær kjøpsknappen, med en lenke til de fullstendige vilkårene.
I Baymards undersøkelse Consideration & Purchase Behavior med 1 032 respondenter sa 60 % at de ser etter informasjon om returvilkår på produktsiden, men 44 % av nettstedene i referansetesten viser ikke vilkårene og lenker heller ikke til dem fra hovedinnholdet om produktet (Baymard Institute (åpnes i en ny fane)). I undersøkelsen om forlatte handlekurver fra 2026 som er omtalt over, oppga 20 % treg levering og 13 % utilfredsstillende returvilkår som årsak.
<details class="product-policy">
<summary>Shipping and returns</summary>
<p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
<p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>
Shopify: Skriv retningslinjene dine under Innstillinger > Retningslinjer (Settings > Policies) (Shopify Help Center (åpnes i en ny fane)). I Dawn kan blokken Sammenleggbar rad (Collapsible row) på produktsiden vise tekst eller innholdet fra en side (Dawns kildekode (åpnes i en ny fane)), slik at én side om frakt og retur kan vises på alle produktene.
WooCommerce: WooCommerce oppretter en side med «Refund and Returns Policy» (retningslinjer for refusjon og retur) som et utkast (WooCommerces kildekode (åpnes i en ny fane)). Den forblir upublisert til du redigerer og publiserer den.
Svarer produktbildene på spørsmålene kundene har?
Bildene bør vise produktet fra flere vinkler, i riktig størrelsesforhold og i bruk, fordi mange kunder vurderer størrelse og passform ut fra bildene i stedet for ut fra spesifikasjonene.
Baymards tester fant at 42 % av brukerne prøver å finne ut hvor stort et produkt er ut fra bildene, mens 37 % av nettstedene i referansetesten ikke har et bilde «i skala» som viser produktet ved siden av en person eller en kjent gjenstand. Og 23 % har ikke bilder med en modell, noe som betyr mest for klær, tilbehør og kosmetikk (Baymard Institute (åpnes i en ny fane)).
Sjekk også at galleriet bytter til riktig bilde når en farge velges, at zoom fungerer på mobil, og at hvert bilde har en alternativ tekst som beskriver hva akkurat det bildet viser, for eksempel «Linskjorte, sett bakfra».
Er anmeldelsene lette å finne og å stole på?
Vis gjennomsnittlig vurdering og antall anmeldelser nær produkttittelen, lenk til de fullstendige anmeldelsene og svar på negative anmeldelser.
Baymard fant at 89 % av nettstedene i referansetesten ikke svarer på negative anmeldelser, og at 63 % ikke lar kundene bla fra én anmelders bilder til den neste anmelderens på tvers av anmeldelsene (Baymard Institute (åpnes i en ny fane)). Anmeldelseswidgeter som lastes sent, kan også skyve siden nedover, så reserver plass til dem.
Shopify: Dawns blokk Produktvurdering (Product rating) viser stjerner fra en app for anmeldelser, og temaet opplyser at det krever en app (Dawns kildekode (åpnes i en ny fane)).
WooCommerce: Under WooCommerce > Innstillinger > Produkter (WooCommerce > Settings > Products) finnes blant annet alternativene «Enable product reviews» (aktiver produktanmeldelser), «Show 'verified owner' label on customer reviews» (vis etiketten «bekreftet eier» på kundeanmeldelser), «Reviews can only be left by 'verified owners'» (bare «bekreftede eiere» kan skrive anmeldelser) og «Enable star rating on reviews» (aktiver stjernevurdering i anmeldelser) (WooCommerces kildekode (åpnes i en ny fane)).
Er knappen for å legge i handlekurven lett å nå og trykke på mobil?
På mobil bør kundene kunne se prisen, velge en variant og trykke på «Legg i handlekurven» uten å lete, med kontroller som er store nok til å treffe.
I Baymards referansetest fra 2026 hadde 52 % av nettstedene på datamaskin og 62 % av mobilnettstedene en brukeropplevelse på produktsidene som var «middelmådig» eller dårligere, og 57 % av nettstedene brukte ikke knapper for valg av størrelse, slik at størrelsene lå gjemt i nedtrekkslister (Baymard Institute (åpnes i en ny fane)).
Åpne en produktside på en ekte telefon og sjekk:
- Første skjermbilde. I en stablet mobillayout kommer galleriet ofte først, så et høyt bilde kan skyve tittelen, prisen og knappen ned under første skjermbilde.
- Faste kjøpslinjer. Hvis du bruker en slik linje, må den ikke dekke elementer som har fokus. W3Cs oppsummering av WCAG 2.2-kriteriet 2.4.11 (nivå AA) bruker som eksempel en fast bunnlinje som skjuler elementer med fokus (W3C (åpnes i en ny fane)).
- Trykkflater. WCAG 2.5.8 (nivå AA) setter et minimum på 24 × 24 CSS-piksler, med unntak (W3C (åpnes i en ny fane)); Shopifys temaveiledning anbefaler minst 48 × 48 piksler på mobil (Shopify (åpnes i en ny fane)).
- Sideveis rulling. WCAG 1.4.10 Reflow krever at innholdet fungerer i en bredde på 320 CSS-piksler uten rulling i to retninger (W3C (åpnes i en ny fane)). Brede størrelsestabeller og sammenligningstabeller er vanlige årsaker.
Kommer popup-vinduer i veien for kjøpet?
Popup-vinduer som dekker produktsiden idet kunden kommer inn, skjuler informasjonen kunden kom for, så velg heller små bannere og begrens oppfordringene til å melde seg på.
Googles veiledning i Search Central beskriver påtrengende mellomsider og dialogbokser som elementer som sperrer for innholdet, og anbefaler små bannere i stedet for lag som dekker hele siden (Google Search Central (åpnes i en ny fane)). Shopify påpeker at innhold i popup-vinduer også kan føre til layoutforskyvninger (Shopify Help Center (åpnes i en ny fane)). Alle dialogbokser du beholder, må kunne lukkes med tastaturet; WCAG 2.1.2 No Keyboard Trap (nivå A) krever at fokus kan flyttes bort fra en komponent med bare tastaturet (W3C (åpnes i en ny fane)).
Finner kundene sidene som bygger tillit, og vilkårene dine?
Lenk til sidene om refusjon, frakt, personvern, vilkår og kontakt fra bunnteksten på hver side.
I Baymards undersøkelse fra 2026 sa 19 % av respondentene at de hadde avbrutt et kjøp fordi de ikke stolte på nettstedet med kortopplysningene sine. Tydelige vilkår og kontaktopplysninger er grunnleggende signaler om at en butikk er seriøs.
Shopify: Når du har lagt til retningslinjer under Innstillinger > Retningslinjer (Settings > Policies), lenker Shopify automatisk til dem i bunnteksten i kassen; for å vise dem i butikken legger du dem til i en meny under Innhold > Menyer (Content > Menus) (Shopify Help Center (åpnes i en ny fane)) eller slår på bunntekstinnstillingen Lenker til retningslinjer (Policy links) i Dawn.
WooCommerce: Publiser utkastet til refusjonssiden, og legg deretter til sidene med vilkår og kontaktinformasjon i bunnteksten.
Finner søket på nettstedet både produkter og svar?
Søket bør gi de riktige produktene for navn, feilstavinger og synonymer, og bør også svare på søk som «retur» eller «frakt».
Baymards referansetest for søk fra 2026, med mer enn 170 nettsteder og apper, vurderte 46 % av opplevelsene på datamaskin, 58 % på mobil og 64 % i apper som «middelmådige» eller dårligere, og fant problemer med søk som ikke gjelder produkter, for eksempel at et søk etter returvilkårene gir produkter som treff, på 66 % av nettstedene (Baymard Institute (åpnes i en ny fane), oppdatert 29. april 2026).
Test butikken din med navnet på en bestselger, en feilstaving av det, et kategoriord og «retur». I Shopify gir søket i nettbutikken treff på produkter, blogginnlegg og sider, med prediktivt søk og toleranse for skrivefeil slått på som standard, og appen Search & Discovery legger til filtre og fremheving av produkter (Shopify Help Center (åpnes i en ny fane)). En vanlig side som oppsummerer frakt og retur, kan derfor dukke opp ved slike søk.
Kan noen handle med bare tastaturet?
Hvert trinn fra valg av variant til kassen bør fungere med bare tastaturet, med en synlig fokusmarkering.
WCAG 2.2 krever at all funksjonalitet kan brukes med tastatur (2.1.1, nivå A), at det ikke finnes tastaturfeller (2.1.2, nivå A), at fokusmarkeringen er synlig (2.4.7, nivå AA), og at elementer med fokus ikke skjules helt av annet innhold (2.4.11, nivå AA) (W3C (åpnes i en ny fane)). Disse grunnleggende tingene mangler ofte. Baymards gjennomgang fra 2021 av 33 nettsteder med høyest omsetning fant at 45 % hadde funksjoner som ikke kunne betjenes med tastatur, og at 48 % ikke holdt fokusmarkeringen synlig hele tiden (Baymard Institute (åpnes i en ny fane)). WebAIMs skanning i februar 2026 fant i gjennomsnitt 56,1 oppdagede feil per forside, og 71,0 for nettsteder i kategorien Shopping (WebAIM (åpnes i en ny fane)).
En test på fem minutter:
- Last inn en produktside og trykk på Tab uten å røre musen.
- Sjekk at du hele tiden ser hvor fokus er.
- Velg en størrelse og en farge, og endre antallet.
- Trykk på «Legg i handlekurven», og sjekk at fokus flyttes inn i handlekurvpanelet, og at panelet kan lukkes med tastaturet.
- Gå videre til kasseknappen.
/* A visible focus style for keyboard users */
:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
}
En gratis skanning sjekker mange av disse punktene på omtrent ett minutt. Vår Konverteringsrapport gjør sidekontroller som synlig pris, «Legg i handlekurven» på mobil, informasjon om frakt og retur, popup-vinduer, lenker til vilkår i bunnteksten, søk, kjøpsveien med tastatur og sideveis rulling om til prioriterte anbefalinger. Rapporten bygger på kontroller av sidene, ikke på salgsdataene dine, og gir ingen garanti for økt salg.
Ofte stilte spørsmål
Hva er den vanligste grunnen til at kunder avbryter et kjøp?
I Baymards undersøkelse fra 2026 blant 1 083 voksne i USA var det vanligste svaret «så meg bare rundt» (42 %). Blant de andre årsakene kom ekstrakostnader som frakt, skatt og gebyrer først med 40 %, foran treg levering med 20 %.
Vil det øke konverteringsraten min å rette disse problemene?
Det kan ingen love. Forskningen beskriver barrierer som er vanlige i store utvalg av nettsteder og kunder; om det endrer resultatene dine å fjerne dem, avhenger av produktene, prisene og trafikken din, så mål før og etter hver endring.
Hvor bør informasjon om frakt og retur stå på en produktside?
Nær prisen og kjøpsknappen, som en kort oppsummering med en lenke til de fullstendige vilkårene. I Baymards forskning sa 60 % av respondentene at de ser etter informasjon om returvilkår på produktsiden.
Må knappen for å legge i handlekurven være synlig uten rulling på mobil?
Ingen regel krever det, men kundene bør se prisen og nå knappen raskt. En fast kjøpslinje er ett alternativ, så lenge den ikke skjuler elementer med fokus eller annet innhold.
Er universell utforming en del av konvertering?
Ja, helt enkelt: en kunde som ikke kan betjene variantvelgeren eller knappen for å legge i handlekurven med tastatur eller skjermleser, kan ikke handle. WCAG 2.2 nivå AA dekker disse grunnleggende tingene.
Kilder
- Cart abandonment rate statistics (åpnes i en ny fane), Baymard Institute, siden oppdatert 22. september 2025; diagrammet over årsaker er merket som data fra 2026 (undersøkelse blant 1 083 voksne i USA), lest 22. oktober 2026
- Product Page UX 2026: 10 Pitfalls and Best Practices (åpnes i en ny fane), Baymard Institute (Edward Scott), oppdatert 18. mars 2026
- Ecommerce Search UX 2026: 8 Search "Query Types" UX Best Practices (åpnes i en ny fane), Baymard Institute (Edward Scott), oppdatert 29. april 2026
- 94% of the Largest E-Commerce Sites Are Not Accessibility Compliant (åpnes i en ny fane), Baymard Institute (Alex Krzyminski), 29. juni 2021
- The WebAIM Million: 2026 report (åpnes i en ny fane), WebAIM, oppdatert 30. mars 2026 (data fra februar 2026)
- Web Content Accessibility Guidelines (WCAG) 2.2 (åpnes i en ny fane), W3C, anbefaling datert 12. desember 2024
- What's new in WCAG 2.2 (åpnes i en ny fane), W3C Web Accessibility Initiative, lest 22. oktober 2026
- Understanding SC 2.5.8 Target Size (Minimum) (åpnes i en ny fane), W3C Web Accessibility Initiative, lest 22. oktober 2026
- Avoid intrusive interstitials and dialogs (åpnes i en ny fane), Google Search Central, oppdatert 10. desember 2025
- Adding store policies (åpnes i en ny fane), Shopify Help Center, lest 22. oktober 2026
- Storefront search (åpnes i en ny fane), Shopify Help Center, lest 22. oktober 2026
- Web performance (åpnes i en ny fane), Shopify Help Center, lest 22. oktober 2026
- Performance best practices for Shopify themes (åpnes i en ny fane), Shopify, lest 22. oktober 2026
- Dawn theme: sections/main-product.liquid (åpnes i en ny fane) og locales/en.default.schema.json (åpnes i en ny fane), Shopify på GitHub, lest 22. oktober 2026
- Kildekode for innstillinger for frakt, produkter og installasjon i WooCommerce (åpnes i en ny fane), WooCommerce på GitHub, kontrollert mot versjon 11.2.1, oktober 2026
Alle veiledninger
- Core Web Vitals for nettbutikker: LCP, INP og CLS forklartHva LCP, INP og CLS måler, grensene for god og dårlig ved 75-persentilen, labdata mot feltdata og de vanlige rettelsene i Shopify- og WooCommerce-butikker.
- Fått et ADA-kravbrev om nettstedet? Dette bør du sjekke førstHva et ADA-kravbrev om nettstedet ofte hevder, WCAGs rolle, hva du bør samle inn, hvorfor overlegg ikke retter koden og når du bør ringe advokat. Ikke juridisk råd.
- Sikkerhetssjekker du kan kjøre på nettstedet uten å hacke noePassive sikkerhetssjekker for nettbutikker: utløp av TLS-sertifikat, HSTS, CSP, nosniff, cookie-flagg, blandet innhold, gammel jQuery, security.txt og DMARC.