Checklista för produktsidan: det som hindrar kunder från att köpa

Checklista för produktsidan, baserad på Baymard och WebAIM: pris, frakt och returer, bilder, recensioner, köpknapp i mobilen, popup-fönster, sök och tangentbord.

FixReports redaktion11 min läsning

Kunder lämnar oftast en produktsida utan att köpa när de inte kan räkna ut den totala kostnaden, inte hittar villkoren för frakt och returer, inte kan bedöma produkten utifrån bilderna och recensionerna eller inte enkelt når och kan använda köpknappen, särskilt i mobilen. Popup-fönster som täcker sidan, villkorssidor som är svåra att hitta, en sökfunktion som inte klarar enkla frågor och kontroller som inte fungerar med tangentbord stoppar också köp. Siffrorna nedan är branschforskning från Baymard Institute och WebAIM, baserad på stora urval av webbplatser och kunder; de beskriver vanliga mönster, inte förutsägelser för en enskild butik.

Det viktigaste i korthet

  • I Baymards undersökning 2026 av 1 083 vuxna i USA som hade handlat online de senaste tre månaderna uppgav 40 % att de hade avbrutit ett köp i kassan eftersom extrakostnader som frakt, skatt och avgifter var för höga (Baymard Institute (öppnas i en ny flik)).
  • Baymards jämförelse av produktsidor visade att 67 % av de ledande e-handelssajterna inte ger någon uppskattning av totalkostnaden nära köpsektionen, och att 44 % inte visar eller länkar till returvillkoren från produktsidans huvudinnehåll (Baymard Institute (öppnas i en ny flik), uppdaterad 18 mars 2026).
  • I samma jämförelse hade 62 % av mobilsajterna en användarupplevelse på produktsidan som var ”medelmåttig” eller sämre.
  • WebAIM hittade WCAG-fel på 95,9 % av startsidorna för den översta miljonen webbplatser i februari 2026 (WebAIM (öppnas i en ny flik)).
  • I en granskning som Baymard gjorde 2021 av 33 e-handelssajter med högst omsättning hade 45 % funktioner som inte gick att använda med tangentbord (Baymard Institute (öppnas i en ny flik)).

Varför avbryter kunder ett köp?

Det vanligaste svaret är att kunderna bara tittade runt; därefter kommer extrakostnader, långsam leverans, lågt förtroende för hur kortuppgifter hanteras och krav på att skapa konto.

Baymards sida om övergivna varukorgar anger den genomsnittliga dokumenterade andelen övergivna köp till 70,22 %, beräknat utifrån 50 studier (sidan senast uppdaterad 22 september 2025). Diagrammet över orsaker, märkt som data från 2026, bygger på en undersökning av 1 083 vuxna i USA som hade handlat online under de föregående tre månaderna. De svarande kunde välja fler än en orsak (Baymard Institute (öppnas i en ny flik), per oktober 2026):

Orsak till att ett onlineköp avbröts i kassanAndel av de svarande
Jag tittade bara runt / var inte redo att köpa42 %
Extrakostnaderna var för höga (frakt, skatt, avgifter)40 %
Leveransen var för långsam20 %
Jag litade inte på att sajten hanterade mina kortuppgifter säkert19 %
Sajten ville att jag skulle skapa ett konto18 %
För lång eller krånglig kassaprocess17 %
Webbplatsen hade fel eller kraschade17 %
Returvillkoren var inte tillfredsställande13 %
Jag kunde inte se eller räkna ut beställningens totalkostnad i förväg12 %
Kortet nekades10 %
Det fanns inte tillräckligt många betalningssätt9 %

Det här är resultat från en undersökning i USA om kassan, inte mätningar av din butik. Flera av orsakerna uppstår tidigare, på produktsidan, där kunderna först ser priset, leveransvillkoren och returvillkoren. Bara din egen analysdata kan visa vilka som spelar roll för dig.

Framgår hela priset tydligt på produktsidan?

Det aktuella priset, ett eventuellt ordinarie pris, vad som ingår och inte ingår samt en uppskattning av frakten ska alla finnas bredvid köpknappen.

Baymards jämförelse av produktsidor 2026 visade att 67 % av sajterna inte ger någon uppskattning av ”beställningens totalkostnad” nära köpsektionen, och att 81 % inte visar jämförpris per enhet för produkter som säljs i olika mängder eller storlekar (Baymard Institute (öppnas i en ny flik)). Kontrollera att sidan visar:

  • Det aktuella priset och, för reavaror, det ordinarie priset.
  • Ett jämförpris per enhet för produkter som säljs i flera storlekar.
  • Om moms eller tullavgifter ingår.
  • Fraktkostnaden, eller det ordervärde som ger fri frakt.

Shopify: I temat Dawn lägger prisblocket till texten ”Taxes included.” (skatt ingår) och en länk med texten ”Shipping calculated at checkout.” (frakten beräknas i kassan) när de inställningarna och en fraktpolicy finns (Dawns källkod (öppnas i en ny flik)). Det stämmer, men det är ingen uppskattning, så lägg till dina faktiska fraktpriser eller gränsen för fri frakt i ett textblock.

WooCommerce: Alternativen ”Enable the shipping calculator on the cart page” (aktivera fraktkalkylatorn på varukorgssidan) och ”Hide shipping costs until an address is entered” (dölj fraktkostnader tills en adress har angetts) under WooCommerce > Inställningar > Frakt (WooCommerce > Settings > Shipping) påverkar varukorgen och kassan, inte produktsidan (WooCommerces källkod (öppnas i en ny flik)). Lägg in fraktpriserna i produktmallen eller i den korta beskrivningen.

Hittar kunderna information om frakt och returer innan de lägger varan i varukorgen?

Placera en kort sammanfattning av leveranstid, fraktkostnad och returrätt nära köpknappen, med en länk till de fullständiga villkoren.

I Baymards undersökning Consideration & Purchase Behavior med 1 032 svarande uppgav 60 % att de letar efter information om returvillkor på produktsidan, men ändå visar eller länkar 44 % av de granskade sajterna inte till den från produktsidans huvudinnehåll (Baymard Institute (öppnas i en ny flik)). I undersökningen om avbrutna köp från 2026 ovan angav 20 % långsam leverans och 13 % otillfredsställande returvillkor.

<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 dina villkor under Inställningar > Policyer (Settings > Policies) (Shopify Help Center (öppnas i en ny flik)). I Dawn kan blocket Hopfällbar rad (Collapsible row) på produktsidan visa text eller innehållet från en sida (Dawns källkod (öppnas i en ny flik)), så att en enda sida om frakt och returer kan visas på varje produkt.

WooCommerce: WooCommerce skapar en sida med returvillkor, ”Refund and Returns Policy”, som utkast (WooCommerces källkod (öppnas i en ny flik)). Den förblir opublicerad tills du redigerar och publicerar den.

Svarar produktbilderna på kundernas frågor?

Bilderna ska visa produkten från flera vinklar, i skala och när den används, eftersom många kunder bedömer storlek och passform utifrån bilderna snarare än utifrån specifikationerna.

Baymards tester visade att 42 % av användarna försöker räkna ut en produkts storlek utifrån bilderna, medan 37 % av de granskade sajterna inte har någon bild ”i skala” som visar produkten bredvid en person eller ett välbekant föremål. Dessutom saknar 23 % bilder med en modell, vilket betyder mest för kläder, accessoarer och kosmetika (Baymard Institute (öppnas i en ny flik)).

Kontrollera också att galleriet byter till rätt bild när en färg väljs, att zoom fungerar i mobilen och att varje bild har en alternativtext som beskriver vad just den vyn visar, till exempel ”Linneskjorta, bakifrån”.

Är recensionerna lätta att hitta och lita på?

Visa genomsnittligt betyg och antal recensioner nära produktnamnet, länka det till alla recensioner och svara på negativa recensioner.

Baymard fann att 89 % av de granskade sajterna inte svarar på negativa recensioner, och att 63 % inte låter kunderna gå vidare från en recensents bilder till nästa recensents (Baymard Institute (öppnas i en ny flik)). Recensionswidgetar som läses in sent kan också trycka ner sidan, så reservera plats för dem.

Shopify: Blocket Produktbetyg (Product rating) i Dawn visar stjärnor från en recensionsapp, och temat anger att en app krävs (Dawns källkod (öppnas i en ny flik)).

WooCommerce: Under WooCommerce > Inställningar > Produkter (WooCommerce > Settings > Products) finns bland annat alternativen ”Enable product reviews” (aktivera produktrecensioner), ”Show 'verified owner' label on customer reviews” (visa etiketten ”verifierad ägare” på kundrecensioner), ”Reviews can only be left by 'verified owners'” (bara ”verifierade ägare” kan lämna recensioner) och ”Enable star rating on reviews” (aktivera stjärnbetyg i recensioner) (WooCommerces källkod (öppnas i en ny flik)).

Är knappen Lägg i varukorgen lätt att nå och trycka på i mobilen?

I mobilen ska kunderna kunna se priset, välja en variant och trycka på Lägg i varukorgen utan att leta, med kontroller som är tillräckligt stora att träffa.

I Baymards jämförelse 2026 hade 52 % av datorsajterna och 62 % av mobilsajterna en användarupplevelse på produktsidan som var ”medelmåttig” eller sämre, och 57 % av sajterna använde inte knappar för val av storlek utan gömde storlekarna i rullgardinsmenyer (Baymard Institute (öppnas i en ny flik)).

Öppna en produktsida på en riktig telefon och kontrollera:

  • Första skärmbilden. I en staplad mobillayout kommer galleriet ofta först, så en hög bild kan trycka ner produktnamnet, priset och knappen under den första skärmbilden.
  • Fasta köpfält. Om du använder ett sådant får det inte täcka element som har fokus. W3C:s sammanfattning av WCAG 2.2-kriteriet 2.4.11 (nivå AA) använder en fast sidfot som döljer fokuserade element som exempel (W3C (öppnas i en ny flik)).
  • Klickytor. WCAG 2.5.8 (nivå AA) anger ett minimum på 24 × 24 CSS-pixlar, med undantag (W3C (öppnas i en ny flik)); Shopifys riktlinjer för teman rekommenderar minst 48 × 48 pixlar i mobilen (Shopify (öppnas i en ny flik)).
  • Sidledes scrollning. WCAG 1.4.10 Reflow kräver att innehållet fungerar vid en bredd på 320 CSS-pixlar utan scrollning i två riktningar (W3C (öppnas i en ny flik)). Breda storleksguider och jämförelsetabeller är vanliga orsaker.

Står popup-fönster i vägen för köpet?

Popup-fönster som täcker produktsidan när kunden kommer dit döljer den information kunden kom för, så välj hellre små banners och begränsa uppmaningarna att registrera sig.

Googles vägledning i Search Central beskriver påträngande interstitialer och dialogrutor som element som skymmer innehållet och rekommenderar små banners i stället för överlägg som täcker hela sidan (Google Search Central (öppnas i en ny flik)). Shopify påpekar att innehåll i popup-fönster också kan orsaka layoutförskjutningar (Shopify Help Center (öppnas i en ny flik)). Alla dialogrutor du behåller måste gå att stänga med tangentbordet; WCAG 2.1.2 No Keyboard Trap (nivå A) kräver att fokus kan lämna en komponent med enbart tangentbordet (W3C (öppnas i en ny flik)).

Hittar kunderna dina sidor om villkor och förtroende?

Länka sidorna om återbetalning, frakt, integritet, villkor och kontakt från sidfoten på varje sida.

I Baymards undersökning 2026 uppgav 19 % av de svarande att de hade avbrutit ett köp eftersom de inte litade på att sajten hanterade deras kortuppgifter säkert. Tydliga villkor och kontaktuppgifter är grundläggande tecken på att en butik är seriös.

Shopify: När du har lagt till villkor under Inställningar > Policyer (Settings > Policies) länkar Shopify dem automatiskt i kassans sidfot; för att visa dem i butiken lägger du till dem i en meny under Innehåll > Menyer (Content > Menus) (Shopify Help Center (öppnas i en ny flik)) eller aktiverar sidfotsinställningen Policylänkar (Policy links) i Dawn.

WooCommerce: Publicera utkastet till sidan om returvillkor och lägg sedan till dina villkors- och kontaktsidor i sidfoten.

Hittar sökfunktionen produkter och svar?

Sökningen ska ge rätt produkter för produktnamn, felstavningar och synonymer, och den ska också svara på frågor som ”returer” eller ”frakt”.

Baymards jämförelse av sökfunktioner 2026, med fler än 170 sajter och appar, bedömde 46 % av upplevelserna på dator, 58 % i mobilen och 64 % i appar som ”medelmåttiga” eller sämre, och hittade problem med sökningar som inte gäller produkter, till exempel att en sökning efter returvillkoren ger produkter som träffar, på 66 % av sajterna (Baymard Institute (öppnas i en ny flik), uppdaterad 29 april 2026).

Testa din butik med namnet på en storsäljare, en felstavning av det, ett kategoriord och ”returer”. I Shopify ger butikens sökfunktion träffar bland produkter, blogginlägg och sidor, med prediktiv sökning och tolerans för stavfel påslagna som standard, och appen Search & Discovery lägger till filter och möjlighet att lyfta fram produkter (Shopify Help Center (öppnas i en ny flik)). En vanlig sida som sammanfattar frakt och returer kan därför dyka upp vid sådana sökningar.

Kan någon handla med enbart tangentbord?

Varje steg från att välja en variant till att nå kassan ska fungera med enbart tangentbord, med en synlig fokusindikator.

WCAG 2.2 kräver att all funktionalitet fungerar via tangentbord (2.1.1, nivå A), att det inte finns några tangentbordsfällor (2.1.2, nivå A), att fokusindikatorn är synlig (2.4.7, nivå AA) och att fokuserade element inte döljs helt av annat innehåll (2.4.11, nivå AA) (W3C (öppnas i en ny flik)). Sådana grunder saknas ofta. Baymards granskning 2021 av 33 sajter med högst omsättning visade att 45 % hade funktioner som inte gick att använda med tangentbord och att 48 % inte höll fokusindikatorn synlig hela tiden (Baymard Institute (öppnas i en ny flik)). WebAIM:s skanning i februari 2026 hittade i genomsnitt 56,1 fel per startsida, och 71,0 för webbplatser i kategorin Shopping (WebAIM (öppnas i en ny flik)).

Ett test på fem minuter:

  1. Öppna en produktsida och tryck på Tab utan att röra musen.
  2. Kontrollera att du hela tiden ser var fokus är.
  3. Välj storlek och färg och ändra antalet.
  4. Tryck på Lägg i varukorgen och kontrollera att fokus flyttas in i den utfällbara varukorgen och att den går att stänga med tangentbordet.
  5. Nå kassaknappen.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

En gratis skanning kontrollerar många av de här punkterna på ungefär en minut. Vår Konverteringsrapport gör om kontroller av sidorna, till exempel prisets synlighet, Lägg i varukorgen i mobilen, information om frakt och returer, popup-fönster, länkar till villkor i sidfoten, sökning, köpflödet med tangentbord och sidledes scrollning, till prioriterade rekommendationer. Den bygger på kontroller av sidorna, inte på dina försäljningsdata, och lovar ingen ökad försäljning.

Vanliga frågor

Vilken är den vanligaste orsaken till att kunder avbryter ett köp?

I Baymards undersökning 2026 av 1 083 vuxna i USA var det vanligaste svaret ”tittade bara runt” (42 %). Bland de övriga orsakerna låg extrakostnader som frakt, skatt och avgifter först med 40 %, före långsam leverans med 20 %.

Ökar min konverteringsgrad om jag åtgärdar de här problemen?

Det kan ingen lova. Forskningen beskriver hinder som är vanliga i stora urval av webbplatser och kunder; om det ändrar dina resultat att ta bort dem beror på dina produkter, priser och din trafik, så mät före och efter varje ändring.

Var på produktsidan ska information om frakt och returer stå?

Nära priset och köpknappen, som en kort sammanfattning med en länk till de fullständiga villkoren. I Baymards forskning uppgav 60 % av de svarande att de letar efter information om returvillkor på produktsidan.

Måste knappen Lägg i varukorgen synas utan scrollning i mobilen?

Ingen regel kräver det, men kunderna ska snabbt kunna se priset och nå knappen. Ett fast köpfält är ett alternativ, så länge det inte döljer fokuserade element eller annat innehåll.

Är tillgänglighet en del av konverteringen?

Ja, i en helt konkret mening: en kund som inte kan använda variantväljaren eller knappen Lägg i varukorgen med tangentbord eller skärmläsare kan inte handla. WCAG 2.2 nivå AA täcker de här grunderna.

Källor

Alla guider