Mobilanpassad Shopify-butik: designa för mobilen först
En mobilanpassad Shopify-butik börjar med att du tar reda på hur stor del av dina besökare som kommer via mobilen, i rapporten Sessioner per enhet. Sedan går du igenom butiken sida för sida på en riktig telefon: startsidan, kollektionerna, produktsidan och kassan. Tre saker att börja med är laddningstiden, läsbarheten och hur få steg det tar att köpa.
Hur stor är din mobiltrafik?
Gå till Analysverktyg > Rapporter, välj kategorin Beteende och öppna Sessioner per enhet. Rapporten visar vilka typer av enheter besökarna använder, och siffrorna är aktuella när du öppnar den. Du kan också fråga Sidekick om sessioner och konverteringsgrad per enhet.
Jämför också konverteringsgraden per enhet. Är den mycket lägre på mobilen än på datorn, kan det bero på något i mobilvyn. Fler guider om den dagliga driften finns under Driva en butik.
Mobilen först, sida för sida
| Sida | Vad kunden vill på mobilen | Det viktigaste att kontrollera |
|---|---|---|
| Startsida | Förstå vad du säljer och hitta vidare | Första skärmen: en tydlig rubrik, en bild som laddar snabbt och en väg till kollektionerna |
| Kollektion | Jämföra och filtrera | Filter som går att öppna med tummen, bilder i samma format, pris synligt utan att trycka |
| Produktsida | Bestämma sig | Pris, varianter och köpknappen på första skärmen, storleksguide och leveranstid nära knappen |
| Varukorg och kassa | Betala snabbt | Snabbkassa-knappar, inga överraskningar i fraktkostnaden |
Använd ett tema som Shopify har gjort eller ett från Shopify Theme Store och testa förhandsvisningen i temaredigeraren på mobil. Avsluta alltid med att öppna butiken på din egen telefon, där du märker hur det känns att trycka och scrolla.
Länkar ska enligt Shopifys riktlinjer för tillgänglighet öppnas i samma flik, eftersom nya fönster förvirrar, särskilt på mobilen där det gamla fönstret inte syns.
Snabbhet på mobilen
Shopify sköter servrar, CDN, cachelagring och komprimering själv. Bilder, appar, skript och tema styr du själv. Shopifys egen felsökning för långsamma sidor tar upp fyra saker:
- Granska stora bilder: sidor med många högupplösta bilder laddar långsamt. Optimera bilderna eller visa färre av dem.
- Ta bort onödiga appar: appar som laddar filer i butiken gör den långsammare, och koden försvinner inte alltid när du avinstallerar appen.
- Identifiera långsamma skript: står sidan tom och dyker upp på en gång, leta efter långsamma skript med webbläsarens utvecklarverktyg och kontakta app- eller temautvecklaren.
- Utvärdera temaprestanda: Shopifys egna teman i Horizon-familjen och Online Store 2.0 är gratis och optimerade för prestanda.
Mät med Googles PageSpeed Insights och testa mobilvyn särskilt. Hur du hittar och rättar UX-fel går vi igenom i vanliga UX-misstag i Shopify.
Läsbarhet och tillgänglighet
Shopifys riktlinjer för tillgänglighet i teman bygger på WCAG och ger konkreta gränser:
- Brödtext och knapptext ska ha en kontrast på minst 4,5:1 mot bakgrunden; stora rubriker från 24 px minst 3:1. Shopify visar ett exempel där 2,4:1 är svårläst och 4,8:1 lättare.
- Text ovanpå bilder och banners behöver samma kontrast; i vissa teman kan du lägga en färgöverlagring mellan bild och text.
- Brödtext ska vara minst motsvarande 16 px, och texten ska inte vara marginaljusterad.
- Länkar ska synas på mer än färgen, till exempel genom understrykning.
- Rubriker ska komma i ordning, utan att hoppa över nivåer.
Snabbare köp på mobilen
Snabbkassor sparar kundens betal- och leveransuppgifter, så att återkommande kunder får dem ifyllda. Vissa snabbkassor kan visas som knappar direkt på produktsidan, och då kan kunden hoppa över varukorgen och gå direkt till betalningen. I kassan visas knapparna i avsnittet Snabbkassa högst upp, i en ordning som anpassas efter vad som går snabbast för kunden. Hur du sedan mäter och förbättrar själva kassan går vi igenom i konverteringsoptimering i Shopify-kassan.
Testa på riktiga telefoner
Testa med minst en iPhone och en Android-telefon, gärna en äldre modell, och både på wifi och på mobilnät. Gör ett helt köp: sök en produkt, välj variant, lägg i varukorgen, gå till kassan. Skriv ner varje gång du måste zooma, scrolla i sidled eller trycka två gånger.
Vanliga frågor
Hur ser jag hur många som handlar på mobilen? Öppna rapporten Sessioner per enhet under Analysverktyg > Rapporter i kategorin Beteende. Jämför sedan konverteringsgraden per enhet, till exempel genom att fråga Sidekick.
Hur stor ska texten vara på mobilen? Shopifys riktlinjer för tillgänglighet anger minst motsvarande 16 px för brödtext. Visar ditt typsnitt mindre än andra vid 16 px, välj en större storlek.