Shopify redesign en migratie: waarom frontend en backend samen moeten worden ontworpen<

Een Shopify-redesign is geen losstaand designproject

Een goede Shopify-webshop moet er onderscheidend uitzien, maar design is binnen e-commerce nooit alleen decoratie.

Navigatie, categorieën, filters, productpagina’s, voorraadmeldingen, klantaccounts en checkoutlogica worden allemaal beïnvloed door de data en systemen achter de webshop.

Stel dat een fashionretailer producten in het oude systeem als één product met meerdere kleuren beheert, terwijl iedere kleur in de nieuwe Shopify-webshop als zelfstandig product moet worden gepresenteerd. Dan verandert niet alleen de migratiestructuur. Het heeft ook gevolgen voor productkaarten, kleurstalen, afbeeldingen, collectiepagina’s, filters en crosslinks tussen producten.

Hetzelfde geldt voor een B2B-webshop. Wanneer klanten verschillende assortimenten, prijzen of bestelmogelijkheden krijgen, moet dat niet pas bij de technische implementatie worden ontdekt. De volledige gebruikerservaring moet rondom die verschillen worden ontworpen.

Een migratie naar Shopify is daarom geen estafette waarbij het designteam na oplevering het stokje overdraagt aan de technische partij. Beide disciplines moeten vanaf de inventarisatie met elkaar optrekken.

“De beste Shopify-webshops ontstaan wanneer de klantreis en de data-architectuur niet na elkaar, maar naast elkaar worden ontworpen.” — Opklopper

De rol van Opklopper: merkvertaling, UX/UI en conversie

Opklopper is een design-led e-commercebureau en officieel Shopify Plus Partner uit Amsterdam. We ontwerpen, bouwen en optimaliseren custom Shopify-webshops voor groeiende D2C-, B2B- en hybride commerce-merken in Nederland en België.

Binnen gezamenlijke trajecten met Duxly is Opklopper verantwoordelijk voor de volledige commerciële voorkant.

We beginnen daarbij niet met een standaard Shopify-template, maar met het merk, de doelgroep, het assortiment en de commerciële doelstellingen. Vanuit de brandmanual ontwikkelen we een digitaal designsysteem dat specifiek is ingericht voor e-commerce.

Dat betekent dat we onder andere werken aan:

• e-commercestrategie en positionering;
• informatiearchitectuur en navigatie;
• vertaling van de brandmanual naar digitaal design;
• custom UX/UI voor desktop en mobiel;
• collectie- en categoriepagina’s;
• filters, zoekfuncties en product discovery;
• productpagina’s en commerciële productinformatie;
• B2B- en D2C-klantreizen;
• cross-sell, upsell en merchandising;
• winkelwagen- en checkoutoptimalisatie;
• Shopify-development;
• technische SEO en behoud van organische vindbaarheid;
• conversieoptimalisatie en structurele doorontwikkeling.

Het doel is een webshop die herkenbaar bij het merk past, prettig werkt en klanten helpt om zelfstandig het juiste product te vinden en te bestellen.

Dat klinkt vanzelfsprekend, maar wordt lastiger zodra een webshop duizenden varianten, meerdere klantgroepen, fysieke locaties of complexe backofficeprocessen heeft. Juist dan moet een ontwerp niet alleen visueel sterk zijn, maar ook ruimte bieden aan de werkelijke structuur van de organisatie.

De rol van Duxly: data, integraties en technische continuïteit

Duxly richt zich op wat er achter de Shopify-storefront gebeurt.

Het bureau realiseert technische oplossingen voor e-commerceorganisaties die werken met verschillende databronnen, magazijnen, fysieke winkels, ERP-systemen, productdatabases en operationele processen.

Duxly kan binnen een gezamenlijk project onder andere verantwoordelijk zijn voor:

• migratie van producten, varianten en collecties;
• migratie van klantaccounts en orderhistorie;
• live synchronisatie tussen het oude en nieuwe platform;
• ERP-, WMS-, PIM- en POS-integraties;
• product- en voorraadsynchronisatie;
• orderstromen richting fulfilment en backoffice;
• koppelingen tussen verschillende Shopify-stores;
• datamanipulatie en dataverrijking;
• maatwerkapps voor picking, transfers of checkoutlogica;
• automatisering van handmatige processen;
• monitoring, foutafhandeling en technische documentatie.

De klant ziet deze techniek meestal niet rechtstreeks. Voor de organisatie achter de webshop is zij echter cruciaal.

Een goede integratie voorkomt dat medewerkers productinformatie in meerdere systemen moeten bijwerken, orders handmatig moeten overtypen of voorraden dagelijks moeten corrigeren. Ook voorkomt zij dat verschillende systemen allebei denken dat zij de meest actuele versie van de data bevatten.

Duxly legt daarom vooraf vast welk systeem voor ieder datatype leidend is. Shopify kan bijvoorbeeld het primaire verkoopkanaal zijn, terwijl productinformatie uit een PIM, voorraad uit een ERP en afbeeldingen uit een apart mediaplatform komen.

Lees meer over de technische aanpak van Duxly op de pagina over Shopify-integraties en maatwerk.

Drie gezamenlijke Shopify-projecten uit de praktijk

De samenwerking tussen Opklopper en Duxly is toegepast binnen fashion, retail, omnichannel commerce en foodservice.

In ieder traject was de rolverdeling helder: Opklopper ontwierp en ontwikkelde de klantgerichte storefront, terwijl Duxly de migratie, data en achterliggende techniek realiseerde.

1. Style Woerden: custom Shopify Plus-design en migreren zonder stilstand

Style Woerden is een fashionretailer met een omzet van circa tien miljoen euro per jaar. Het assortiment bestaat uit ongeveer 4.000 producten en 14.500 varianten, verdeeld over tientallen categorieën en verschillende merken.

De bestaande Magento-webshop moest worden vervangen door Shopify Plus.

Voor Opklopper was dit geen simpele platformmigratie. Style Woerden wilde tegelijkertijd de digitale merkbeleving vernieuwen. De nieuwe webshop moest moderner, onderscheidender en gebruiksvriendelijker worden, zonder de herkenbaarheid van de bestaande winkel en het merk te verliezen.

Op basis van de brandmanual ontwikkelde Opklopper een volledig custom UX/UI-design. De nieuwe Shopify Plus-storefront werd onder andere ingericht rondom:

• een high-end fashionuitstraling;
• duidelijke mobiele navigatie;
• snellere product discovery;
• overzichtelijke filters;
• sterke collectiepresentatie;
• conversiegerichte productpagina’s;
• cross-sell en visuele merchandising;
• een soepelere route naar de checkout.

Achter die nieuwe frontend zat een complexe migratie.

Style Woerden is een actieve fashionretailer waar dagelijks nieuwe producten worden toegevoegd en bestellingen worden geplaatst. Een traditionele datafreeze, waarbij het oude systeem tijdelijk niet meer mag worden aangepast, was daarom geen realistische optie.

Duxly realiseerde een hot-swapmigratie. Magento en Shopify Plus bleven tijdens de ontwikkeling parallel draaien en werden tot aan de definitieve overstap met elkaar gesynchroniseerd.

Daardoor kon Style Woerden blijven verkopen terwijl de nieuwe webshop werd gebouwd.

Ook de productstructuur vroeg om maatwerk. Producten met dezelfde titel maar verschillende kleuren moesten worden opgesplitst naar afzonderlijke Shopify-producten. Foto’s, fotovolgorde, varianten en publicatiekanalen moesten daarbij automatisch aan het juiste product worden gekoppeld.

Duxly realiseerde daarnaast maatwerk voor operationele processen, waaronder een picking app en checkoutuitbreidingen voor verschillende betaalmethoden en markten.

Op SEO-gebied werden duizenden bestaande redirects gecontroleerd en gematcht om zoveel mogelijk linkwaarde en organische vindbaarheid te behouden.

Style Woerden laat zien waarom design en data niet los van elkaar kunnen worden ontwikkeld. De manier waarop producten uit Magento werden geherstructureerd, had rechtstreeks invloed op de kleurselectie, productkaarten, filters en productpagina’s in de nieuwe storefront.

2. Hart Beach: één merkwereld, twee Shopify-omgevingen

Hart Beach begon in 1971 als de eerste surfwinkel van Nederland en groeide uit tot een bredere surf- en beachorganisatie met fysieke winkels, een surfschool, een strandpaviljoen en een webshop.

De uitdaging bij Hart Beach was dat al deze onderdelen samen één herkenbaar merk vormen, maar operationeel niet allemaal binnen exact dezelfde omgeving werken.

Opklopper ontwierp een nieuwe Shopify-storefront die de verschillende werelden van Hart Beach samenbrengt. De webshop moest niet alleen producten verkopen, maar ook het gevoel van de surfcommunity, het strand, de fysieke locaties en de geschiedenis van het merk overbrengen.

Vanuit de brandmanual en bestaande identiteit ontwikkelden we een custom UX/UI met aandacht voor:

• de herkenbare surf- en beachcultuur;
• een sterke visuele merkbeleving;
• duidelijke navigatie binnen een breed assortiment;
• collectie- en productpagina’s;
• mobile-first product discovery;
• commerciële content en storytelling;
• een klantreis die retail en de bredere Hart Beach-wereld verbindt.

Aan de achterkant speelde een ander vraagstuk.

Hart Beach werkt met twee Shopify-omgevingen voor twee juridische entiteiten. De omgeving Haven functioneert als volledige webshop. De omgeving Strand wordt vooral gebruikt voor de kassa en verkoop vanuit het strandpaviljoen.

De twee omgevingen verkopen deels hetzelfde assortiment, maar hebben ook een eigen voorraadadministratie. Ze moeten zelfstandig kunnen blijven functioneren en tegelijkertijd een gedeelde voorraadrealiteit weerspiegelen.

Duxly onderzocht hiervoor verschillende bestaande synchronisatieapps. Geen van deze oplossingen sloot voldoende aan op de combinatie van twee entiteiten, gedeelde producten en gescheiden voorraadprocessen.

Daarom bouwde Duxly een eigen synchronisatielaag. Deze werkt primair met webhooks en verwerkt voorraadwijzigingen tussen de verschillende omgevingen.

Daarnaast werd een maatwerk Stock Transfer App ontwikkeld waarmee voorraad tussen locaties kan worden verplaatst. Medewerkers kunnen transfers daarbij met barcodes verwerken, zodat digitale mutaties aansluiten op de fysieke goederenstroom.

Dit project maakt duidelijk dat een omnichannel-webshop meer vraagt dan producten beschikbaar maken in twee stores.

De frontend moet voor de klant als één logisch merk voelen. Tegelijkertijd moet de techniek respecteren dat de organisatie achter de schermen met verschillende entiteiten, locaties en voorraadadministraties werkt.

3. Yama Food Professional: B2B UX boven op meerdere databronnen

Yama Food importeert en distribueert Japanse voedingsproducten. De organisatie verkoopt zowel aan consumenten als aan professionele klanten in horeca en foodservice.

Daarvoor gebruikt Yama Food twee Shopify-webshops: een B2C-omgeving en Yama Food Professional voor zakelijke afnemers.

Opklopper ontwierp de digitale ervaring van Yama Food Professional rondom het dagelijkse bestelgedrag van professionele inkopers.

Een chef, restaurant, cateraar of andere zakelijke afnemer bezoekt een foodservicewebshop meestal niet om uitgebreid inspiratie op te doen. Producten moeten snel vindbaar zijn, relevante informatie moet direct zichtbaar zijn en terugkerende bestellingen moeten efficiënt kunnen worden geplaatst.

Vanuit de brandmanual ontwikkelde Opklopper daarom een custom B2B UX/UI met aandacht voor:

• een heldere product- en categoriestructuur;
• snelle navigatie door een specialistisch assortiment;
• duidelijke productinformatie;
• allergenen, ingrediënten en voedingswaarden;
• gebruiksgemak voor terugkerende zakelijke klanten;
• efficiënte bestelflows;
• een professionele merkpresentatie;
• een schaalbare Shopify-omgeving voor toekomstige groei.

De technische complexiteit zat vooral in de productdata.

PS in Foodservice blijft bij Yama Food het leidende systeem voor onder andere producttitels, omschrijvingen, ingrediënten, allergenen en voedingswaarden. Deze informatie wordt automatisch naar de twee Shopify-webshops gesynchroniseerd.

Productafbeeldingen worden via Microsoft Business Central beheerd. Er bestaan daardoor meerdere databronnen naast elkaar.

Duxly gebruikte het EAN-nummer als vaste sleutel om de gegevens uit de verschillende systemen aan de juiste producten in beide Shopify-webshops te koppelen.

De belangrijkste architectuurkeuze was dat Shopify niet werd ingericht als concurrerend bronsysteem. Shopify presenteert en verkoopt de producten, maar PS in Foodservice blijft leidend voor de inhoudelijke productinformatie.

Die rolverdeling voorkomt dubbele producten, tegenstrijdige updates en onduidelijkheid over welk systeem de meest actuele informatie bevat.

De nieuwe B2B-webshop ging eind december 2025 volgens de afgesproken planning live.

Yama Food laat zien dat een goede Shopify-webshop niet altijd betekent dat alle data binnen Shopify moet worden beheerd. Het betekent vooral dat de klant aan de voorkant een snelle en consistente ervaring krijgt, ongeacht hoeveel systemen daar achter de schermen voor samenwerken.

Ook toegepast voor The Store en QME Food

Dezelfde samenwerking tussen Opklopper en Duxly is toegepast bij The Store en QME Food.

The Store: een eigen merkidentiteit op Shopify Plus

Voor The Store ontwikkelde Opklopper een custom Shopify Plus-storefront. Vanuit de brandmanual werd een eigen digitale merkwereld ontworpen met aandacht voor collectiepresentatie, navigatie, mobiele UX en conversie.

Duxly realiseerde de achterliggende technische onderdelen en zorgde dat data en operationele processen correct op de nieuwe Shopify Plus-omgeving aansloten.

Het project laat zien dat een storefront een herkenbare eigen identiteit kan behouden, terwijl technische infrastructuur en processen achter de schermen efficiënt worden georganiseerd.

Bekijk het volledige ontwerp en de Shopify Plus-uitwerking in de portfolio-case van The Store.

QME Food: zakelijke product discovery en een betrouwbare backend

Bij QME Food lag de focus aan de voorkant op een professionele B2B-ervaring.

Opklopper vertaalde de merkidentiteit naar een custom UX/UI waarmee zakelijke klanten producten snel kunnen vinden, beoordelen en bestellen. Duxly verzorgde de backendgerelateerde werkzaamheden en technische datastromen.

Ook hier gold hetzelfde uitgangspunt: een B2B-webshop moet niet alleen functioneel zijn voor de interne organisatie, maar juist ook prettig en efficiënt werken voor de inkoper die ermee bestelt.

Welke vragen moet je vóór een Shopify-migratie beantwoorden?

De gezamenlijke projecten verschillen sterk van elkaar. Toch komen bij vrijwel ieder complex Shopify-traject dezelfde fundamentele vragen terug.

1. Welk systeem is leidend voor welke data?

Leg per datatype vast waar de waarheid wordt beheerd.

Productomschrijvingen kunnen uit een PIM komen, voorraad uit het ERP, afbeeldingen uit Business Central en klantgegevens uit Shopify. Dat hoeft geen probleem te zijn, zolang de verantwoordelijkheden maar expliciet zijn vastgelegd.

Zonder duidelijke rolverdeling kunnen systemen elkaars updates overschrijven of tegenstrijdige informatie tonen.

2. Kan de organisatie tijdelijk stoppen met wijzigen?

Sommige migraties kunnen worden uitgevoerd met een tijdelijke datafreeze. Bij actieve retailers zoals Style Woerden is dat niet altijd mogelijk.

Wanneer dagelijks producten, orders en voorraadmutaties worden verwerkt, kan een live synchronisatie tot aan het cutovermoment nodig zijn.

3. Past de oude productstructuur binnen Shopify?

Een exportbestand dat technisch kan worden geïmporteerd, is nog niet automatisch geschikt voor een goede Shopify-webshop.

Producten, varianten, kleuren, tags, metafields en afbeeldingen moeten aansluiten op de gewenste filters, productkaarten en klantreis.

De beste datastructuur wordt daarom bepaald vanuit zowel techniek als UX.

4. Kunnen standaardapps het vraagstuk echt oplossen?

Shopify beschikt over een uitgebreid app-ecosysteem. Voor veel situaties is een standaardapp de snelste en meest verstandige oplossing.

Maar een app moet wel passen bij de werkelijke situatie.

Wanneer een organisatie met meerdere juridische entiteiten, gedeelde producten of afwijkende voorraadlogica werkt, kan een standaardoplossing structureel meer beperkingen dan voordelen opleveren.

In dat geval moet de investering in maatwerk worden afgewogen tegen de blijvende kosten van handmatige correcties en operationele fouten.

5. Hoe wordt de volledige keten getest?

Een webshop is niet klaar wanneer de homepage, productpagina en checkout er goed uitzien.

Voor livegang moet de volledige keten worden getest:

1. Een product wordt aangemaakt of gewijzigd in het leidende systeem.
2. De juiste data wordt naar Shopify gestuurd.
3. Het product verschijnt correct in de storefront.
4. Een klant plaatst een bestelling.
5. De order wordt naar de juiste backoffice of fulfilmentpartij gestuurd.
6. Voorraad, betaling en orderstatus worden correct bijgewerkt.
7. Fouten en uitzonderingen worden geregistreerd en afgehandeld.

Door deze end-to-endtest vóór de lancering uit te voeren, voorkom je dat een webshop visueel gereed lijkt terwijl de operatie erachter nog niet betrouwbaar functioneert.

Voor welke organisaties is deze samenwerking relevant?

De combinatie van Opklopper en Duxly is vooral geschikt voor organisaties die meer nodig hebben dan een standaardthema met enkele losse apps.

Denk aan:

• merken die een custom Shopify-webshop willen laten bouwen;
• retailers die van Magento, Lightspeed, WooCommerce of maatwerk naar Shopify migreren;
• bedrijven met fysieke winkels en omnichannelprocessen;
• organisaties met meerdere magazijnen of verkooplocaties;
• B2B-bedrijven met eigen klantgroepen, prijzen of assortimenten;
• bedrijven die Shopify met een ERP, WMS, PIM of POS moeten verbinden;
• foodbedrijven met complexe ingrediënten-, allergenen- of productdata;
• organisaties die meerdere Shopify-storefronts beheren;
• merken die Shopify Plus inzetten voor verdere schaalbaarheid;
• bedrijven die veel tijd verliezen aan handmatige invoer en correcties.

Voor een kleine webshop met een beperkt assortiment en eenvoudige processen is zo’n specialistische combinatie niet altijd nodig.

Maar zodra merkbeleving, productdata, verschillende systemen en operationele processen samenkomen, voorkomt een heldere taakverdeling dat het project tussen design en techniek in komt te hangen.

Waarom twee specialisten vaak sterker zijn dan één partij die alles belooft

Bij complexe e-commerceprojecten wordt vaak gezocht naar één bureau dat strategie, design, development, migratie, ERP-integraties, data-architectuur en maatwerkapps volledig intern uitvoert.

Dat lijkt overzichtelijk, maar betekent niet automatisch dat iedere discipline even sterk is vertegenwoordigd.

Opklopper en Duxly kiezen bewust voor een andere aanpak.

Opklopper is specialist in de commerciële laag: hoe het merk zich presenteert, hoe klanten navigeren, hoe producten worden gevonden en hoe de webshop converteert.

Duxly is specialist in de operationele en technische laag: hoe data wordt gemigreerd, welke systemen leidend zijn en hoe processen betrouwbaar worden geautomatiseerd.

De klant krijgt daardoor geen algemeen team dat van alles een beetje doet, maar twee bureaus met ieder een duidelijke verantwoordelijkheid.

Dat maakt de communicatie ook concreter. Vragen over merk, UX en conversie liggen bij Opklopper. Vragen over synchronisatie, migratie en backendarchitectuur liggen bij Duxly. Over beslissingen die beide kanten raken, wordt gezamenlijk afgestemd.

Veelgestelde vragen over Shopify-design, migraties en integraties

Waarom moeten het Shopify-design en de backend tegelijk worden ontworpen?

De beschikbare productdata, voorraadlogica, klantgroepen en technische systemen hebben rechtstreeks invloed op de gebruikerservaring. Door frontend en backend parallel te ontwerpen, voorkom je dat een goedgekeurd UX/UI-design later niet uitvoerbaar blijkt of niet aansluit op de operationele processen.

Wat doet Opklopper binnen een gezamenlijk project met Duxly?

Opklopper is verantwoordelijk voor e-commercestrategie, de vertaling van de brandmanual, informatiearchitectuur, custom UX/UI-design, Shopify-development en conversieoptimalisatie. Opklopper ontwerpt en bouwt de volledige klantgerichte storefront.

Wat doet Duxly binnen een gezamenlijk Shopify-project?

Duxly realiseert de technische achterkant. Daaronder vallen onder meer datamigraties, ERP- en WMS-integraties, product- en voorraadsynchronisatie, maatwerkapps, datamanipulatie en automatisering van operationele processen.

Kunnen Opklopper en Duxly een Magento-webshop naar Shopify migreren?

Ja. Bij Style Woerden werkten Opklopper en Duxly samen aan een migratie van Magento naar Shopify Plus. Opklopper realiseerde het volledige redesign en de custom Shopify Plus-storefront. Duxly verzorgde de datamigratie, live synchronisatie en achterliggende maatwerkoplossingen.

Is de samenwerking alleen bedoeld voor Shopify Plus?

Nee. De samenwerking is relevant voor zowel Shopify als Shopify Plus. De keuze voor Shopify Plus hangt af van onder andere omzetvolume, B2B-functionaliteit, checkoutmaatwerk, organisatiestructuur en technische schaal. Style Woerden en The Store zijn gebouwd op Shopify Plus; andere gezamenlijke projecten gebruiken een reguliere Shopify-omgeving.

Kunnen meerdere Shopify-webshops dezelfde data gebruiken?

Ja. Meerdere Shopify-webshops kunnen producten, voorraden of andere informatie delen. Daarvoor moet wel duidelijk worden vastgelegd welke data gedeeld wordt, welk systeem leidend is en hoe wijzigingen worden gesynchroniseerd. Bij Hart Beach en Yama Food zijn hiervoor verschillende technische architecturen toegepast.

Wanneer is maatwerk beter dan een standaard Shopify-app?

Een standaardapp heeft de voorkeur wanneer deze het volledige proces betrouwbaar ondersteunt. Maatwerk wordt relevant wanneer een app belangrijke uitzonderingen niet aankan, meerdere systemen verkeerd op elkaar laat reageren of blijvend handmatig werk veroorzaakt. De kosten van maatwerk moeten daarbij worden afgezet tegen de structurele kosten en risico’s van een oplossing die niet goed past.

Conclusie: een Shopify-webshop moet verkopen én operationeel werken

Een sterke Shopify-webshop is meer dan een mooi ontwerp en meer dan een verzameling technische koppelingen.

De storefront moet de merkidentiteit overtuigend vertalen, producten vindbaar maken en bezoekers helpen om klant te worden. Tegelijkertijd moeten productdata, voorraden, orders en achterliggende systemen betrouwbaar blijven functioneren.

De gezamenlijke projecten voor Style Woerden, Hart Beach, Yama Food Professional, The Store en QME Food laten zien hoe die twee disciplines samenkomen.

Opklopper zorgt voor de strategie, merkvertaling, custom UX/UI, Shopify-development en conversie.

Duxly zorgt voor de migratie, data, integraties en operationele techniek.

Zo ontstaat een Shopify-platform dat er niet alleen goed uitziet op de dag van de lancering, maar ook blijft functioneren wanneer het assortiment, het aantal orders en de organisatie verder groeien.