Design dat het contact met het CMS overleeft
De meeste storefronts stranden niet op esthetiek maar op de naden: een template dat een lange productnaam niet aankan, een badge zonder plek, een sectie die niemand kan herschikken. We ontwerpen componenten samen met hun uitzonderingen, leggen de regels vast en bouwen ze zo dat het marketingteam pagina's kan samenstellen zonder om hulp te vragen.
De pagina's die we ontwerpen, en welke beslissing elke pagina ondersteunt
Een webshop is een reeks kleine beslissingen. We ontwerpen elke pagina rond de ene beslissing die hij moet ondersteunen, en we toetsen het ontwerp aan die beslissing.
Collectiepagina's: welke producten zijn een tweede blik waard? Filters die volgen hoe mensen kiezen (maat, materiaal, gebruik), sortering die de voorraad niet wegstopt, en productkaarten met prijs, varianten en beschikbaarheid zonder klik.
Productpagina's: is dit de juiste, en kan ik erop vertrouwen? Variantkeuze die voorraad toont, levering en retour naast de koopknop, en specificaties uit gestructureerde data in plaats van een lap tekst.
Zoeken: vind ik het snel? Voorspellende resultaten, bruikbare pagina's bij nul resultaten en synoniemen voor de woorden die je klanten typen, niet de woorden uit je catalogus.
Winkelwagen: klopt het totaal met wat ik verwachtte? Drempels voor gratis verzending, kortingen en levertijden zichtbaar vóór de checkout, zodat de verrassing niet bij de betaalstap komt.
Checkout: kan ik zonder twijfel afrekenen? De checkout van Shopify is geen thema-template. We ontwerpen hem binnen Checkout Extensibility, en op Shopify Plus horen daar extra content en velden bij op de stappen voor gegevens, verzending en betaling.
B2B-inkopers beslissen anders: snelbestellijsten, prijzen per klant, nabestellen. Zie Shopify B2B.
Ontworpen voor de thema-architectuur van Shopify
Sinds Online Store 2.0 kan elke pagina in een Shopify-thema een JSON-template zijn, opgebouwd uit sections, en sections bestaan uit blocks. Je team voegt ze toe, verschuift ze en haalt ze weg in de theme editor, zonder developer. Wij ontwerpen binnen dat systeem, niet eroverheen.
Dat systeem heeft grenzen, en een goed ontwerp houdt er rekening mee. Volgens de documentatie van Shopify toont een JSON-template maximaal 25 sections, bevat elke section maximaal 50 blocks en heeft een thema maximaal 300 theme blocks. Theme blocks zijn herbruikbaar over sections heen en kunnen in elkaar genest worden. Shopify’s eigen Horizon-thema’s, gelanceerd met de Summer ‘25 Edition, werken zo.
Sections die elk één taak hebben, met instellingen in de woorden van je team.
Content die per product verschilt, zoals maatvoering, onderhoud of specificaties, in metafields: één keer aan de template gekoppeld, per product gevuld.
Terugkerende content zoals maattabellen, ontwerpers of winkellocaties als metaobjects. Met de online store-capability krijgt elk item een eigen pagina en URL.
Header en footer als section groups, zodat een campagne ze kan aanpassen zonder code.
Het resultaat: een nieuwe campagnepagina stel je samen uit bestaande sections, je bouwt hem niet opnieuw. Kan een thema niet dragen wat je nodig hebt, dan zeggen we dat en kijken we naar Shopify development of headless Shopify.
Snelheid, mobiel en toegankelijkheid
Snelheid wordt in het ontwerp beslist. Hero-video’s, carrousels en extra lettertypebestanden kosten laadtijd voordat er code bestaat. Daarom leggen we tijdens het ontwerp budgetten vast, op basis van de Core Web Vitals-drempels van Google:
Largest Contentful Paint (LCP): 2,5 seconden of minder.
Interaction to Next Paint (INP): 200 milliseconden of minder.
Cumulative Layout Shift (CLS): 0,1 of minder.
Google beoordeelt die op het 75e percentiel van echte paginaweergaven, apart voor mobiel en desktop. Sinds juli 2024 crawlt en indexeert Google alle sites met de smartphone-crawler, dus de mobiele versie is de versie die rankt. We ontwerpen mobile first: knoppen binnen bereik van je duim, filters in een lade, geen desktoplayout die klein is geperst.
Toegankelijkheid is nu ook een wettelijke kwestie. De European Accessibility Act geldt sinds 28 juni 2025 en omvat e-commercediensten voor consumenten in de EU. Micro-ondernemingen die diensten leveren (minder dan 10 mensen en een jaaromzet of balanstotaal van maximaal € 2 miljoen) zijn uitgezonderd. Voor alle anderen is EN 301 549 de praktische maatstaf, gebaseerd op WCAG 2.1 niveau AA. We ontwerpen met een contrast van minimaal 4,5:1 voor lopende tekst, zichtbare focus, volledige bediening met het toetsenbord en aanraakvlakken van minimaal 24 bij 24 pixels: de lat die Shopify legt voor de eigen Theme Store.
Aanpak en wat je krijgt
Vijf fasen. Elke fase eindigt met iets wat je kunt beoordelen en goedkeuren.
Onderzoek: analytics, zoektermen in je webshop, sessie-opnames waar die er zijn en een review van de huidige winkel. We zoeken waar klanten afhaken, en waarom.
Wireframes: structuur per paginatype, mobile first. Content en hiërarchie staan vast voordat iets er af uitziet.
UI en design system in Figma: componenten, typografie, kleur, witruimte en elke toestand, ook leeg, fout, uitverkocht en laden. Elk component hoort bij een Shopify-section of -block.
Bouw: onze developers bouwen het thema vanuit het Figma-bestand, met sections, blocks en metafields zoals ontworpen.
Test: op echte toestellen, tegen de Core Web Vitals-budgetten en met een toegankelijkheidscheck, vóór de livegang.
Je krijgt het Figma-bestand met het design system, een thema dat je team zelf kan uitbreiden, documentatie van elke section en de instellingen, en een overdrachtssessie voor de mensen die de winkel draaien. Stap je tegelijk over naar Shopify? Dan lopen design en Shopify-migratie als één project. Op Shopify Plus hoort het checkoutontwerp erbij.
F.A.Q.
We beantwoorden graag al je vragen
Kunnen jullie onze webshop herontwerpen zonder van thema te wisselen?
Vaak wel. Werkt je thema met JSON-templates van Online Store 2.0, dan herontwerpen we templates en sections binnen dat thema. Is het een ouder thema met vaste templates, dan is een nieuw thema meestal minder werk dan het oude ombouwen. Dat bepalen we in de onderzoeksfase, niet vooraf.
Hoeveel van de Shopify-checkout kunnen we aanpassen?
Minder dan een thema, en dat is bewust. checkout.liquid werkt sinds 13 augustus 2024 niet meer op de pagina's voor gegevens, verzending en betaling; aanpassen gaat nu via Checkout Extensibility. Checkout UI extensions op die drie stappen zijn alleen beschikbaar op Shopify Plus. Op andere abonnementen richt het ontwerp zich op branding en de bedank- en orderstatuspagina.
Geldt de European Accessibility Act voor onze webshop?
Verkoop je aan consumenten in de EU en ben je geen micro-onderneming, dan vrijwel zeker wel. De wet geldt sinds 28 juni 2025; micro-ondernemingen die diensten leveren, met minder dan 10 mensen en een omzet of balanstotaal van maximaal € 2 miljoen, zijn uitgezonderd. Laat je precieze verplichtingen juridisch bevestigen. Wij zorgen dat het ontwerp voldoet aan WCAG 2.1 niveau AA.
Kost een redesign ons posities in Google?
Niet als het goed gepland is. Bij een redesign op dezelfde Shopify-winkel blijven de URL's van producten en collecties staan, dus het risico zit ergens anders: verwijderde content, gewijzigde koppen en tragere pagina's. We brengen de content die rankt in kaart vóór het ontwerp en controleren de snelheid vóór de livegang.
Zijn de ontwerpbestanden van ons?
Ja. Je krijgt het Figma-bestand met alle componenten en toestanden, plus documentatie van de sections en hun instellingen. Je eigen team of een andere partij kan daarmee verder zonder opnieuw te beginnen.