Het broodje gaat omhoog. De augurken komen in beeld. Voeg een extra plak kaas toe en de burger verandert voor je ogen — net als het bonnetje.Op een andere plek sleept een klant een illustratie op een hoodie, schuift deze iets omhoog en draait het product om te voelen hoe het staat. Achter die eenvoudige handeling heeft de verkoper al bepaald waar de afbeelding mag komen en hoe groot die kan zijn.Het zijn twee heel verschillende winkelervaringen. Ze delen een nuttig idee: een winkel kan worden gevormd rond het product dat je verkoopt, tot aan de manier waarop iemand het kiest.We hebben beide uitgangspunten toegevoegd aan de Modern Shop-collectie op GitHub: , een 3D-fastfood-etalage, en , een productontwerper voor gepersonaliseerde merchandise. De broncode is beschikbaar onder de MIT-licentie, zodat je ermee kunt experimenteren, aanpassen en verder bouwen.Neem een idee mee, je eigen merk en een AI-coding tool zoals Codex of Claude Code. Er is al genoeg interessants om mee aan de slag te gaan.
An original editorial illustration of the two Modern Shop ideas. Interface shown is conceptual; actual demo screens follow.
Jelly Bites: laat klanten hun lunch samenstellen
Begin met de Jelly Bites live demo. Kies een burger, sleep om hem te draaien en probeer een ingrediënt te veranderen. Het voedsel reageert met een zachte wobbel. Markeer een laag en de stapel opent zodat je kunt zien wat erin zit.Het is speels, maar de interactie heeft een praktisch doel. Klanten zien de keuzes die ze maken. Augurken, saus, kaas en toppings worden zichtbare onderdelen van een bestelling in plaats van een rij opties die ze zich moeten voorstellen.De pizzabouwer neemt hetzelfde idee in een andere richting: kies de maat, korst, saus en toppings en kijk hoe de pizza ontstaat. Een live bon maakt de gevolgen van die keuzes zichtbaar. De demo verkent ook bezorging of afhalen, promotiecodes, afrekenen en een order-tracking scherm.
Actual Jelly Bites demo capture from the Modern Shop repository. Menu values and checkout behavior are sample data.
Er is een klein detail dat telt als mensen van gedachten veranderen. Het item op de bouwstage is een concept totdat de klant kiest . Een winkelwagenitem kan daarna weer terug in de 3D-bouwer en bewerkt worden. Dat is het soort interactie dat een snackbar of broodjeszaak een eigen draai kan geven.De 3D fast-food storefront bron is gebouwd met Vue, TypeScript en Three.js. Je hoeft die namen niet te kennen om de demo te proberen. Voor een ontwikkelaar of code-agent geven ze wel een bekend browserproject om te inspecteren en uit te breiden. De voedselvormen worden in code gegenereerd, wat je een concreet beginpunt geeft om hun uiterlijk en gedrag te veranderen.Een lokale broodjeszaak kan het menu aanpassen aan eigen recepten en verpakkingen. Een pizzeria kan zijn signatuursamenstellingen eerst zetten. Je kunt kleuren, taal, teksten, ingrediëntopties en bestelflow aanpassen aan het bedrijf. Engelse en Perzische layouts zijn al in het voorbeeld aanwezig.Een grens is belangrijk om te begrijpen voordat je het voor echte bestellingen gebruikt: de huidige demo gebruikt voorbeeldcatalogusdata, in de browser opgeslagen bestellingen en gesimuleerde afreken- en trackingschermen. De Selldone-koppeling moet nog worden geïmplementeerd. De visuele ervaring is er om te verkennen; definitieve catalogus- en prijscontroles op de server, betaling en fulfilment vereisen echte commerce-integratie. De 3D-ervaring heeft een WebGL 2-compatibele browser nodig, dus test een aanpassing op de telefoons en browsers die je klanten gebruiken.
Mockup Studio: één ervaring voor de verkoper, een andere voor de koper
Een winkel met gepersonaliseerde T-shirts heeft een ander probleem. De klant wil vrijheid om te experimenteren. De drukker heeft een ontwerp nodig dat in het daadwerkelijke drukgebied past.Mockup Studio pakt beide kanten van dat probleem aan. Open de live product-designer demo en je ziet twee duidelijk gemarkeerde modi: voor winkelbeheerders en voor kopers.
De verkoper stelt de regels één keer in
In de templatebouwer kiest een verkoper het product, voegt productweergaven toe en definieert het bedrukbare gebied. Die afmetingen worden opgeslagen in millimeters, met instellingen voor resolutie en afloop (bleed), de extra afbeelding rondom een snijrand.De verkoper bepaalt daarna wat de koper mag veranderen: verplaatsen, schalen of roteren van artwork, bijvoorbeeld. Een print op de borst kan zijn eigen grenzen hebben, terwijl een mouw een ander gebied gebruikt. De template kan vanuit het perspectief van de koper worden getest voordat deze wordt overgedragen aan de hostapplicatie.
Actual Mockup Studio seller editor. The merchant defines product views, physical print areas, and customer permissions in this local demo.
Die scheiding maakt het idee bruikbaar buiten een enkel T-shirt. De voorbeeldgalerij bevat een T-shirt, hoodie, sweater, pet, mok, kussen en hangtag. Voorbereide 3D-assets kunnen ook binnen het ondersteunde modelformaat worden gebruikt. Voor een ander productvorm moet je het model en de mapping van het printgebied voorbereiden.De studio kan ook initiële productfoto's maken van een geconfigureerd 3D-model. Dat geeft de verkoper een extra manier om views voor de editor voor te bereiden tijdens het ontwikkelen van een productervaring.
De klant krijgt ruimte om te spelen
De editor voor de koper is veel gerichter. Upload een afbeelding, positioneer deze, pas de grootte aan en bekijk een preview op het product. De regels van de handelaar blijven van kracht terwijl de klant experimenteert.Er zijn foto-gebaseerde 2D-views en een optionele 3D-weergave die kan worden gedraaid. Wijzigingen in het artwork verschijnen op het model. Bij ondersteunde zachte producten kun je met een pull-tool zelfs het stof optillen en zien hoe het terugvalt. Het is een preview-effect; het rekt het artwork dat naar de drukker gaat niet uit.
Actual Mockup Studio shopper editor, showing uploaded artwork on a rotatable 3D hoodie. Orders and fulfillment still require host integration.
Door het project loopt een duidelijke scheidslijn: Eén toont de klant hoe het item eruit kan zien. De andere is een transparante PNG voor een printoppervlak, met de geconfigureerde fysieke afmetingen en resolutie. Een indicator voor printkwaliteit helpt uitleggen hoe de pixels van de bronafbeelding zich verhouden tot de gekozen grootte.Voor een daadwerkelijke productieworkflow moet de drukker nog steeds de afmetingen, kleuren en bestandsvereisten goedkeuren. De huidige export is in de browser gerenderde RGB PNG, zonder printer-specifieke CMYK- of kleurprofielconversie. De gegenereerde productvormen zijn illustraties en geen exacte replica's van elk kledingstuk dat je zou kunnen verkopen.De demo bewaart templates en ontwerpen ook lokaal. Ze opslaan bij een bedrijf, het exacte ontwerp aan een bestelling koppelen, betaling verwerken en het werk naar productie sturen zijn integratiestappen voor de afgewerkte winkel. Tekst-/fonttools, productvarianten en direct artwork slepen op het 3D-oppervlak staan nog op de roadmap van het project.
Een beginpunt verandert het gesprek met AI
"Bouw me een winkel" laat veel over aan een AI-assistent om te raden. "Neem deze producteditor, gebruik ons merk en zorg dat de klantflow werkt voor onze drukkerij" geeft het iets concreets.Daarom delen we de bron. Je kunt de interactie zien, het uitproberen en aanwijzen welke delen je wilt veranderen. Een screenshot wordt een gesprek. Een demo wordt een werkende referentie. De code geeft je ontwikkelaar of AI-code-agent ergens om te beginnen.Gebruik ChatGPT om het bedrijfsidee door te lopen: wie koopt, welke opties zijn belangrijk, waar haken klanten af, welke informatie moet de keuken of drukkerij bereiken? Breng dat brief vervolgens in Codex, Claude Code of een andere AI-ontwikkelomgeving die het project kan inspecteren en bewerken.AI-tools kunnen helpen componenten aan te passen, het ontwerp te herzien, services te koppelen, tests te schrijven en onbekende code uit te leggen. Een sterk resultaat hangt nog steeds af van een helder brief en het controleren van de echte ervaring. Geef de assistent telkens één nuttige mijlpaal en vraag om te laten zien wat werkt.
Original editorial illustration of personalized merchandise. Product styling and tablet interfaces are conceptual, not screenshots of Mockup Studio.
Waar Selldone MCP past
De voorkant van een winkel is het deel dat klanten aanraken. Daarachter zitten producten, voorraad, betalingen, verzending en de bestellingen die iemand moet afhandelen.Selldone MCP geeft een verbonden AI-assistent gestructureerde toegang tot een geautoriseerde Selldone-winkel. Tijdens een build kan dat de agent helpen met de catalogus, content en ondersteunde configuratie van de winkel in plaats van te gokken met aparte demo-data. Toegang blijft binnen de winkel en de door jou gekozen permissies.De uitgerolde storefront heeft vervolgens zijn eigen geïmplementeerde Selldone API- of service-integratie nodig. MCP helpt de assistent om de ontwikkeling en goedgekeurde winkelwerkzaamheden uit te voeren; het verandert de demo-afrekenknop niet automatisch in een live betaalstroom.Voor Jelly Bites betekent dat het menu en de bestelflow koppelen aan echte commerce-diensten. Voor Mockup Studio betekent het het betrouwbaar opslaan van de sjabloon van de verkoper en het gekozen ontwerp van de klant, en dat het ontwerp wordt bewaard bij het juiste product en de juiste bestelling. De klantgerichte ervaring kan herkenbaar blijven terwijl Selldone de commercebasis levert.Er zijn verschillende manieren om op die basis verder te bouwen. Een volledige storefront kan worden aangepast via de Selldone Layout-workflow, terwijl een meer gespecialiseerde custom applicatie een aparte frontend kan gebruiken. De Selldone Genesis overview legt die wegen uit. De juiste keuze hangt af van hoeveel van de bestaande winkel je wilt behouden en hoe afwijkend de klantreis moet zijn.
Geef je AI een beter eerste brief
Je kunt beginnen met het volgende verzoek in een codeeromgeving. Vervang de onderdelen tussen haakjes door je eigen bedrijfsgegevens.
Inspect the two projects at https://github.com/Modern-Shop and recommend the better starting point for [mijn bedrijf]. Read its documentation, then clone the chosen project into a new folder. Show which features work today and which need integration. Adapt the customer journey to [mijn merk, producten en eisen], keeping it usable on mobile.
Zodra je een richting hebt gekozen, vraag dan om de volgende mijlpaal:
Connect the intended Selldone shop through MCP with the permissions this task needs. Plan and implement the real catalog, design-storage where relevant, cart, checkout, and order integration using supported Selldone services. Replace demo assumptions with actual shop data. Test the complete flow and show a preview for review before deployment.
Die prompts zijn het begin van een bouwgesprek. Een goede agent zal het project inspecteren, ontbrekende onderdelen identificeren en ze met jou doorlopen.Voor een eerste restaurantmijlpaal kun je vragen om één volledige bestelling: pas één item aan, zie de juiste prijs, betaal in de ondersteunde testflow en verifieer dat de bestelling bij het bedrijf binnenkomt. Voor een drukkerij volg je één ontwerp van upload naar preview tot het exact opgeslagen artwork dat aan de bestelling is gekoppeld.Hier kan een custom storefront ook een economischer project worden. Bestaande interactiecode en een commerceplatform verminderen wat je vanaf nul moet bouwen. De uiteindelijke kosten hangen nog steeds af van ontwerp, integraties, assets, hosting en testen die jouw bedrijf nodig heeft. De MIT-licentie maakt de voorbeeldbron herbruikbaar; die omvat die diensten niet gratis.
Bouw het zelf, of breng het idee naar ons team
We blijven de Modern Shop-samples verfijnen en de collectie ontwikkelen. Je kunt beginnen met de nu beschikbare versies, een volledige ervaring aanpassen of het deel lenen dat jouw specifieke probleem oplost.Wil je liever specialisten het resultaat rond je merk laten vormgeven, dan kun je een op maat gemaakte storefront-offerte aanvragen bij Selldone’s officiële setup- en designteam. Breng de demo die je leuk vindt, je producten en de ervaring die je wilt dat klanten hebben. We kunnen het ontwerp en de implementatie met je afstemmen voordat het project start.Misschien begint jouw winkel met een burger die op het scherm uit elkaar valt. Misschien begint het met een kleine illustratie op een mok. Open de demo’s, verander iets en kijk welk idee voelt als jouw bedrijf.Bekijk Modern Shop op GitHub · Probeer de 3D food builder · Probeer Mockup Studio
FAQ
Wat is Modern Shop?
Modern Shop is een verzameling open-source concept-storefronts gemaakt voor Selldone. De twee huidige voorbeelden zijn Jelly Bites, een 3D fast-food storefront, en Mockup Studio, een tool voor verkopers en kopers om producten te personaliseren.
Zijn de Modern Shop-voorbeelden gratis aan te passen?
Ja. Beide projecten publiceren hun broncode onder de MIT-licentie. Je kunt de code gebruiken en aanpassen onder die licentie, inclusief de vereiste copyrightvermelding. Ontwerpkosten, AI-gebruik, commerce-diensten, hosting en productie-integraties kunnen aparte kosten met zich meebrengen.
Kan ik ChatGPT of Codex gebruiken om deze storefronts aan te passen?
Ja. ChatGPT kan helpen bij het opstellen van een brief, en een codeeromgeving zoals Codex kan de repository inspecteren, het project bewerken en helpen bij het testen van integraties. Geef de agent concrete eisen en controleer het resultaat voordat je het uitrolt.
Zijn de demo’s al verbonden met een live Selldone-checkout?
Nee. Jelly Bites gebruikt mock-commercedata, en Mockup Studio toont lokale sjabloon- en ontwerpworkflows. Een werkende winkel heeft de juiste Selldone-integratie nodig voor echte producten, winkelwagen, betalingen, bestellingen en blijvende opslag van ontwerpen.
Wat kunnen klanten personaliseren in Mockup Studio?
De sample ondersteunt geüpload artwork op producten zoals T-shirts, hoodies, petten en mokken binnen door de handelaar geconfigureerde printgebieden. Klanten kunnen plaatsing aanpassen en foto-gebaseerde 2D- of ondersteunde 3D-previews bekijken. Sommige geavanceerde bewerkingsfuncties staan nog op de roadmap.
Kan het Selldone-team een custom storefront voor mijn bedrijf ontwerpen?
Ja. Je kunt via Selldone’s officiële setup-service een op maat gemaakte storefront-offerte aanvragen. Het team bekijkt het beoogde ontwerp, de functionaliteit, scope en leveringsvoorwaarden voordat het project wordt besteld.
Deel uw mening met ons