En butik fungerer korrekt på mobilen, når den besøgende kan opdage et produkt, vælge en variant, lægge i indkøbskurv og nå betaling uden at zoome, tøve eller støde på et blokerende element. Så en simpel forhåndsvisning af hjemmesiden er ikke nok.
Guide skrevet af SiteQuiVend, specialist i oprettelse og redesign af hjemmesider og Shopify-butikker. Information opdateret i august 2026.
Hvad er en virkelig funktionel butik på mobilen?
Et responsivt websted kan tilpasse sig skærmens bredde, mens det forbliver vanskeligt at bruge. Kontrollen skal dække fire komplementære dimensioner.
Display
Intet tekstsnit, overlappende, forvrænget billede eller indhold, der er større end skærmen.
Interaktion
Menuer, filtre, variationer, harmonikaer, knapper og formularer reagerer på berøring.
Kommerciel rejse
Pris, tilgængelighed, levering og følgende handling forbliver forståelig.
Performance
Hovedindhold vises uden overdreven ventetid eller uforudsigelig bevægelse.
Google bruger mobilversionen af indhold til crawling og indeksering. Så nøgleoplysninger, titler, vigtige billeder og strukturerede data bør ikke forsvinde på den lille skærm.
1. Kombiner tre niveauer af verifikation
Simulering ved 375 px
Spotoverløb, faste borde og dårligt placerede knapper. Denne reproducerbare base er ikke en rigtig enhed.
Rigtige enheder
En iPhone og Android afslører tastaturadfærd, bevægelser og native vinduer.
Brugsdata
Shopify-rapporten skelner mellem mobil og desktop for indlæsning, interaktivitet og stabilitet.
Konkret feedback
Kundespørgsmål og opgivelser kan signalere friktion til at reproducere.
2. Følg en testrute, der er identisk med hver test
Brug et privat vindue til at begrænse indflydelsen af cache og tidligere sessioner. Bemærk enheden, browseren, forbindelsen, URL og tidspunktet for fejlen.
- Åbn startsiden og luk eventuelt cookiebanneret.
- Åbn og luk derefter menuen, søgningen og sproget eller landevælgeren.
- Få adgang til en samling, skift sortering og anvend et filter.
- Åbn et produkt, gennemse billederne og vælg hver variation.
- Udløs frivilligt en fejl: variant utilgængelig eller obligatorisk felt tomt.
- Læg i kurv, skift antal, slet og tilføj derefter igen.
- Nå betaling uden at afslutte en ordre og kontrollere de synlige felter.
- Gå tilbage: kurven og valgene skal forblive konsekvente.
3. Brug en mobil kontrol matrix
Klassificere defekter efter deres indvirkning. Et sekundært æstetisk element har ikke samme prioritet som en utilgængelig kurv.
| Area | Test | Hyppig defekt | Prioritet |
|---|---|---|---|
| Header | Menu, søg, luk | Vindue umuligt at lukke | Blokering |
| Collection | Sortering, filtre, kort | Off-screen filter | High |
| Product | Galleri, variationer, tilføjelse | Skjult knap eller inkonsekvent tilstand | Blokering |
| Kurv | Mængde, sletning, i alt | Total eller handling utilgængelig | Blokering |
| Content | Tekst, billeder, tabel | Vandret rulning | Mellem til høj |
4. Kontroller læsbarhed og taktile interaktioner
- Tekst: den bør læses uden zoom, herunder priser og fejl.
- Berøringszoner: mellemrumsknapper for at undgå utilsigtet tryk.
- Kontrast: styr links, knapper og tekst på billeder.
- Faste elementer: pandebånd, chat og samtykke bør ikke invadere skærmen.
- Tastatur: det aktive felt og følgende handling forbliver tilgængelige.
- Orientering: detekter blokke, der opretholder en fast bredde.
"Tommelfinger" testen er enkel: hold telefonen med én hånd og udfør hovedhandlingen. Hvis du har brug for at sigte præcist, flytte et vindue eller zoome, fortjener grænsefladen en rettelse.
5. Test produktarket, kurven og betalingen
Begræns dig ikke til et simpelt produkt. Vælg også en vare med flere variationer, et utilgængeligt produkt og, hvis butikken tillader det, en rabat eller en bestemt levering.
Produktblad
Pris, varianter, lager, mængde, medie, beskrivelse og knap skal forblive synkroniseret. Hver variantændring skal opdatere den forventede tilstand.
Kurv
Tjek skuffe- og indkøbskurvsiden, mængder, sletning, annoncerede tærskler, rabatkode, hvis forventet og total.
Formularer
Gode tastaturer skal åbne for e-mail, telefon og numre. Fejl skal tydeligt forklare, hvordan du retter feltet.
Payment
Kontroller adgang, tilbudte midler, leveringsoplysninger og flashbacks. Afgiv kun en faktisk ordre, hvis din testprocedure kræver det.
For derefter at forbedre de opdagede punkter, se vores vejledning om shopify Store Mobile Experience og den, der er dedikeret til forenkling af indkøbsrejsen.
6. Kontroller hastigheden uden at forvirre måling og følelse
Test et første besøg med en tom cache og en mindre gunstig forbindelse end dit professionelle Wi-Fi. Overhold adfærd, før du ser på noten.
- Indlæser: vises hovedindholdet og produktbilledet hurtigt?
- Interaktivitet: reagerer menuen eller knappen ved berøring?
- Stabilitet: flytter siden sig, når billeder, skrifttyper eller apps ankommer?
- Kontinuitet: forbliver overgange mellem kollektion og produktkurve forståelige på et langsomt netværk?
Shopifys Web Performance-tabel sporer Core Web Vitals ved faktiske besøg og hjælper med at skelne mobil og desktop. En laboratoriemåling hjælper med diagnosticering, mens feltdata afspejler enheder og netværk, der faktisk er i brug.
Hvis problemet venter, så tjek det også ud årsagerne til, at en Shopify-butik er langsom.
7. Test flere sammenhænge, ikke kun flere bredder
iPhone og Android
Test Safari på iPhone og Chrome på Android.
Wi-Fi og mobilnetværk
En ustabil forbindelse kan afsløre usynlig friktion på kontoret.
Ny og kendt besøgende
Sammenlign privat vindue, tilsluttet kunde og allerede fyldt kurv.
Efter hver ændring
Gentag kontrollen efter et program, et tema eller en ny kode.
Shopify råder også til at kontrollere enheden eller browseren for et lokalt problem, før du automatisk tildeler standarden til temaet. Gengiv det på en anden enhed, og bemærk, hvad der ændrer sig.
Hvilken SiteQuiVend-tjeneste skal du vælge?
Tre konkrete anbefalinger til at identificere prioriteter. Det erstatter ikke en udtømmende funktionsopskrift eller en komplet revision.
3 enkle anmodninger inden for en times grænse, med første svar meddelt inden for 48 til 72 arbejdstimer. Komplekse rettelser falder uden for dette anvendelsesområde.
5 sider eller modeller, op til 10 produkter og 3 kollektioner, med en vejledende frist på 5 til 7 arbejdsdage efter modtagelse af de nødvendige elementer.
Omfattende test med flere enheder, særlige udviklinger og betydelig teknisk gendannelse kræver et passende omfang.
Shopify tjekliste til mobilbekræftelse
De 16 væsentlige kontroller
- Hjemmetestet ved 375 px.
- Ingen vandret rulning.
- Menu og søg tæt.
- Ikke-blokerende cookiebanner.
- Funktionelle filtre og sortering.
- Billeder og berøringsgallerier.
- Varianter korrekt opdateret.
- Tilføj knap altid tilgængelig.
- Forståelige fejlmeddelelser.
- Mængder og sletning testet.
- Konsekvent kurvetotal.
- Start af betaling tilgængelig.
- Tastatur maskerer ikke handling.
- Safari og Chrome test udført.
- Test på mobilnetværk udført.
- Opfangninger og stadier af tilbageholdte defekter.
FAQ: Tjek en Shopify butik på mobil
Er en Shopify mobil forhåndsvisning nok?
Nej. Det hjælper med at styre layoutet, men en faktisk enhed er nødvendig for at teste berøring, tastatur, browser, oprindelige vinduer og netværksforhold.
Hvorfor teste præcist ved 375 px?
Denne bredde giver et praktisk og fælles grundlag for spotting responsive defekter. Det erstatter ikke andre bredder eller enheder, der faktisk anvendes af dine besøgende.
Hvilke sider skal testes som en prioritet?
Test velkomsten, en samling, et produktark med variationer, kurven og starten af betalingen. Tilføj derefter søgning, kundekonto og sider, der er specifikke for din aktivitet.
Behøver jeg at afgive en rigtig ordre?
Ikke systematisk. Du kan styre rejsen til betaling uden at validere. En komplet testordre skal følge en planlagt procedure for at undgå en forkert transaktion eller lagerbeholdning.
Hvordan spotter man et vandret overløb?
Rul lodret og prøv derefter en lille sidelæns gestus. Tabeller, billeder, lange URL'er, kort og blokke med fast bredde er almindelige årsager.
Hvilke mobilbrowsere skal du tjekke?
Start med Safari på iPhone og Chrome på Android. Tilføj derefter de fleste enheder og browsere, der er angivet af dine statistikker.
Hvornår skal man gentage mobile tests?
Efter et temaskift, appinstallation eller fjernelse, vognskift, større kampagne og før hver væsentlig lancering.
Sikrer en god hastighedsscore, at butikken fungerer?
Nej. En teknisk note validerer ikke varianterne, formularerne eller kurven. Den skal suppleres med en manuel rute og reelle data.
Officielle referencer: shopify mobiloversigt og webydeevne, fejlfinding af et Shopify-tema og bedste praksis for Google Mobile.
