Mobielvriendelijke webshop in Shopify: pagina voor pagina
Voor een mobielvriendelijke webshop in Shopify zoek je eerst uit hoeveel bezoekers met een telefoon komen en hoe die kopen. Daarna verbeter je pagina voor pagina de homepage, de collecties, de productpagina’s en de winkelwagen. Shopify geeft in het Helpcentrum concrete minimumwaarden voor leesbare tekst.
Eerst meten
Open onder Analytics > Rapporten het rapport Sessies per apparaat. Daar zie je hoeveel bezoeken van telefoons, tablets en computers komen. Vergelijk daarna de conversie per apparaat, bijvoorbeeld door Sidekick naar je conversiepercentage per apparaattype te vragen. Ligt die op mobiel veel lager dan op een computer, begin dan bij de mobiele pagina’s. In Sessies per landingspagina zie je welke pagina’s bezoekers het eerst zien.
Per pagina
| Pagina | Wat je op mobiel controleert | Hoe |
|---|---|---|
| Homepage | Niet te veel zware secties boven elkaar | Haal carrousels, feeds en animaties weg waar je de reden niet van kunt uitleggen |
| Collectie | Niet alles tegelijk laden, en filters die met een duim werken | Paginering aanzetten en filters instellen met Search & Discovery |
| Product | Foto’s die snel laden en dezelfde verhouding hebben | Eén beeldverhouding voor alle hoofdfoto’s, korte video’s |
| Product | Afrekenen zonder omweg | Knoppen voor versnelde checkout, zoals Shop Pay, Apple Pay of Google Pay, waar je betaalprovider ze aanbiedt |
| Winkelwagen | De knop naar de checkout in beeld | Secties en app-blokken weghalen die de knop naar beneden duwen |
Hoe je secties toevoegt of verwijdert, staat in Shopify-thema aanpassen, en de ontwerpfouten waardoor bezoekers afhaken, zijn verzameld in UX-fouten in Shopify-winkels. De pagina winkel runnen bundelt de artikelen over thema’s, snelheid en het dagelijkse beheer.
Leesbaarheid volgens Shopify
In zijn richtlijnen voor toegankelijke thema’s noemt Shopify deze minimumwaarden (Toegankelijkheid voor thema’s, gelezen op 23 oktober 2026):
- lopende tekst minimaal het equivalent van 16 px;
- een contrast van minstens 4,5:1 tussen tekst of knoptekst en de achtergrond;
- voor grote tekst vanaf 24 px, en voor elementen zoals invulvelden en pictogrammen, minstens 3:1;
- links openen in hetzelfde tabblad; een nieuw tabblad is op mobiel verwarrend, omdat het oude venster niet zichtbaar is.
Tekst over een foto of banner moet ook dat contrast halen. Een lettertype dat bij dezelfde grootte kleiner oogt, zet je een stap groter.
Snelheid op een telefoon
Shopify noemt bij trage webshops eerst het controleren op te veel apps, grote afbeeldingen en trage scripts. Bekijk de webprestatierapporten onder Analytics > Rapporten na elke nieuwe app of sectie; meer daarover in technische SEO voor Shopify. Een thema kiezen dat licht blijft, staat in beste Shopify-thema’s.
Testen op een echte telefoon
Gebruik de mobiele weergave in de themabewerker als eerste controle, en doe daarna op je eigen telefoon een volledige aankoop:
- Zoek een product via de zoekfunctie en via het menu.
- Kies een variant en voeg het product toe.
- Vul een kortingscode in.
- Ga naar de checkout en kies een betaalknop.
- Controleer of de bevestigingsmail op je telefoon goed leesbaar is.
Herhaal dat na elke grote wijziging in je thema.