Mobile first: je webshop op de telefoon

Je kunt dit voor je eigen webshop nakijken in je Shopify-statistieken, waar je je sessies per apparaat ziet. Pak daarna je telefoon en probeer eens iets te kopen in je eigen webshop. Een snellere test is er niet.

Ik ben Karina, oprichter van Design by Karina, een boutique Shopify-bureau in Rotterdam voor premium mode- en beautymerken, en we beginnen altijd met de strategie. We ontwerpen en bouwen Shopify-webshops voor merken in Nederland en België, waarin wat jouw merk onderscheidt de reden wordt om voor je te kiezen. Voordat ik de studio begon, werkte ik bij Uber mee aan het ontwerp van betaalervaringen voor chauffeurs, en dat waren schermen op de telefoon. Daarom ontwerpen we eerst voor mobiel. Een mooi ontwerp op desktop is leuk, maar als het in iemands hand uit elkaar valt, wat heb je er dan aan?

Deze gids hoort bij onze UX-checklist voor mode- en beautywebshops.

Wat betekent mobile first voor een webshop?

Het betekent dat de beslissing om te kopen in één hand past. Zonder veel te scrollen ziet iemand de belangrijkste foto, de prijs, de maat of variant, één geruststellende regel en de knop "In winkelwagen". De rest van je verhaal, zoals een lookbook of een langere merktekst, kan lager op de pagina.

Moet iemand inzoomen, naar de maat zoeken of de knop kwijtraken achter een balk die aan het scherm plakt, dan is de pagina nog niet mobile first.

Je duim en de koopzone

Houd je telefoon in één hand en let erop waar je duim naartoe gaat. Zet de maatkeuze, de informatie over de pasvorm en de koopknop in het deel van het scherm dat je duim makkelijk haalt, zodat mensen hun telefoon niet anders hoeven vast te pakken op het moment dat ze willen kiezen.

Bij VYOLA, een Belgisch atelier dat body chains, tops en riemen op maat maakt, staan de maattabel, een veld voor je eigen maten en de pasgarantie op de telefoon vlak bij de knop "In winkelwagen". Zo is de vraag over de maat meteen daar opgelost. Je ziet het in de case van VYOLA, en in maattabellen die retouren verminderen leg ik het precies uit.

Beelden die laden en toch verkopen

Niemand zit op de telefoon te wachten op een foto. Houd je bestanden dus licht, zorg dat telefoons een foto op telefoonformaat krijgen en laat de eerste foto eerlijk zijn over kleur en verhouding, want op die foto beoordelen mensen je.

Een carrousel die vanzelf draait, zou ik ook weglaten. Op de telefoon kost die vooral geduld. Een rustige galerij waar mensen zelf doorheen vegen, voelt veel prettiger. Close-ups van beautyproducten en modefoto's op een model moeten allebei scherp zijn op telefoonformaat, en daar heb je geen enorme bestanden voor nodig.

Collecties en filters op een klein scherm

Filters op maat en kleur horen te openen in een duidelijk paneel dat je makkelijk met je duim bedient. De resultaten moeten zich aanpassen zonder dat mensen weer bovenaan de pagina belanden, en het is fijn als je ziet hoeveel producten er overblijven. Het helpt ook als de gekozen filters zichtbaar blijven, zodat mensen zien wat er aanstaat.

Levert een filter niets op, stel dan een maat voor die er dichtbij ligt, zodat niemand naar een lege pagina kijkt.

Vertrouwen naast de knop

Retouren, levertijd en betaallogo's horen op de telefoon bij de knop "In winkelwagen", niet alleen in de footer, want die is op de telefoon ver weg.

Wat mensen daar willen lezen, hangt af van wat je verkoopt. Wie beautyproducten koopt, wil zeker zijn van de ingrediënten of van hoe de routine werkt. Wie kleding koopt, wil weten hoe het valt en hoe retourneren gaat. Wil je hier dieper op ingaan, lees dan Vertrouwen bouwen in je webshop en Beauty-productpagina's.

Afrekenen op de telefoon

Zit je op Shopify, dan heb je al een afrekenpagina die voor de telefoon gemaakt is, dus dat deel hoef je niet zelf te ontwerpen. Shop Pay helpt ook, want wie dat al gebruikt, hoeft niet alles opnieuw in te typen.

Wat je wel zelf bepaalt, is hoeveel je vraagt. Maak alleen verplicht wat je echt nodig hebt, laat duidelijk zien dat mensen ook als gast kunnen afrekenen en bied de betaalmethoden aan die je klanten verwachten, zoals iDEAL in Nederland, Bancontact in België, en Apple Pay en Google Pay.

Voeg je eerder in de webshop eigen velden toe, zoals een maatveld op een productpagina, zorg dan dat een foutmelding direct bij dat veld verschijnt en niet bovenaan een lang formulier.

Goed om te weten in Nederland

In 2025 werd 41% van de online aankopen in Nederland gedaan op een smartphone, vijf procentpunten meer dan het jaar ervoor, en 45% op een laptop of desktop. Dat blijkt uit de Thuiswinkel Markt Monitor. Dat gaat over aankopen en niet over bezoeken, dus je eigen sessies per apparaat zeggen meer over jouw webshop. Bij het afrekenen zoeken Nederlanders naar iDEAL, en dat gaat over naar Wero. Je ziet nu al het logo iDEAL | Wero bij het afrekenen, en ABN AMRO verwacht dat iDEAL beschikbaar blijft tot en met december 2027. Meer daarover lees je in Shopify en iDEAL. En de knop om een aankoop ongedaan te maken, die webshops voor consumenten sinds juni 2026 nodig hebben, moet ook op de telefoon makkelijk te vinden zijn.

Een mobiele checklist voor deze week

Hier heb je geen ontwerper voor nodig. Open je mobiele webshop op je eigen telefoon, loop deze tabel langs en wees eerlijk. Doe het voordat je meer aan advertenties uitgeeft, want meer mensen naar een webshop sturen die nog niet verkoopt, maakt dat probleem alleen maar duurder.