Alle artikelen

Design Studio: je eerste custom product maken

Stap voor stap een custom product bouwen met de Composerie Design Studio: bloktypes, personalisatievelden en het gereedschap op het canvas.

Design Studio: je eerste custom product maken

Design Studio: je eerste custom product maken

De Design Studio is het hart van Composerie. Hier bouw je de templates achter je gepersonaliseerde producten: je bepaalt wat klanten mogen aanpassen, hoe hun wijzigingen live meebewegen, en welke uitvoerinstellingen en providerkoppelingen een handelaar kan nakijken. Deze tutorial loopt met je door een compleet custom product, van niets tot klaar.

De Design Studio openen

Ga vanuit je Composerie-dashboard naar Producten > Nieuw. Kies een basisproduct uit je gesynchroniseerde Shopify-catalogus, kies je drukpartner en klik op Design Studio openen. De editor opent met een leeg canvas op de maat van het drukvlak van je product.

De interface heeft drie hoofddelen:

  • Linkerpaneel — blokkenbibliotheek en lagenlijst
  • Midden — het interactieve canvas
  • Rechterpaneel — eigenschappen en grenzen van het geselecteerde blok

Paneel met bloktypes in de Composerie Design Studio: tekst, beeld en vormen

De bloktypes

Blokken zijn de bouwstenen van elk template. Elk type heeft een eigen doel, en je combineert ze vrij tot complexe indelingen.

Tekstblokken

Tekstblokken tonen vaste of door de klant bewerkbare tekst op het product. Bij een tekstblok stel je in:

  • Standaardtekst — wat er staat voordat de klant iets wijzigt
  • Lettertype en -grootte — kies uit de ingebouwde bibliotheek of upload je eigen lettertypes
  • Kleur — zet een vaste kleur, of laat de klant kiezen
  • Uitlijning en spatiëring — bepaal hoe de tekst binnen het blok loopt
  • Tekenlimieten — voorkom dat een klant tekst invoert die buiten het ontwerpvlak valt

Tekstblokken zijn het meest gebruikte personalisatie-element. Ze werken goed voor namen, datums, monogrammen, citaten en korte boodschappen.

Beeldblokken

Met beeldblokken plaats je vaste graphics of laat je klanten hun eigen foto uploaden. Je stelt onder meer in:

  • Standaardafbeelding — een placeholder of een vaste afbeelding
  • Uploadinstellingen — minimale resolutie, toegestane bestandstypes, maximale bestandsgrootte
  • Uitsnijgedrag — of het beeld het kader vult, erbinnen past, of handmatig bijgesneden mag worden
  • Filters — optionele effecten die klanten op hun upload kunnen toepassen

Zet de minimale resolutie gelijk aan de DPI-eis van je drukpartner. Dat voorkomt uploads die slecht afdrukken.

Vormblokken

Vormblokken voegen geometrie toe aan je ontwerp: rechthoeken, cirkels, lijnen en eigen paden. Handig voor:

  • Decoratieve randen en kaders rond tekst of beeld
  • Achtergrondvlakken die contrast geven achter gepersonaliseerde inhoud
  • Scheidingslijnen tussen delen van het ontwerp

Vormen kunnen vaste eigenschappen hebben of aan een personalisatieveld hangen, zodat klanten kleur of formaat bijstellen.

Personalisatievelden instellen

Personalisatievelden zijn de invoer waar je klant op de Shopify-productpagina mee werkt. Elk veld hangt aan een of meer blokken op het canvas, en vormt zo de schakel tussen wat de klant typt of kiest en wat er in het voorbeeld verschijnt.

Tekstvelden

Het eenvoudigste type. Een tekstveld hangt aan een tekstblok en werkt live mee terwijl de klant typt. Je stelt in:

  • Label — wat de klant ziet (bijvoorbeeld “Vul je naam in”)
  • Placeholder — voorbeeldtekst vóór de invoer
  • Validatieregels — verplicht of optioneel, minimale en maximale lengte, toegestane tekens
  • Omzetting — automatisch hoofdletters, kleine letters of beginhoofdletters

Uploadvelden voor beeld

Met uploadvelden voegen klanten hun eigen foto of artwork toe. Je legt de acceptatiecriteria vast, en de upload wordt gekoppeld aan een beeldblok op het canvas.

De klant ziet een sleepvlak op de productpagina. Na het uploaden kan hij het beeld verplaatsen en schalen binnen de grenzen van het blok. Het voorbeeld beweegt direct mee, dus hij ziet precies hoe zijn foto op het eindproduct komt.

Kleurkiezers

Met een kleurkiezer laat je klanten kleuren kiezen voor tekst, vormen of achtergronden. Jij bepaalt wat er te kiezen valt:

  • Vaste palet — een gecureerde set kleuren die past bij je merk of je drukmogelijkheden
  • Vrije kiezer — het volledige kleurenwiel
  • Gekoppelde blokken — welke elementen meeveranderen als de klant kiest

Beperk het palet tot kleuren die je drukpartner aankan; dat voorkomt verrassingen in productie.

Lettertypekiezers

Met een lettertypekiezer geef je klanten keuze in letters voor hun tekst. Jij cureert de lijst, en het voorbeeld op het canvas verandert meteen mee.

Groepeer lettertypes op stijl (schreef, schreefloos, schrijfletter, display) zodat klanten snel vinden wat ze zoeken. Houd de lijst gericht: 8 tot 12 goedgekozen letters werken beter dan honderden opties.

Werken met het canvas

De werkbalk boven het canvas geeft je precisie bij het schikken van je ontwerp.

Uitlijnen en verdelen

Selecteer meerdere blokken en gebruik de uitlijngereedschappen om ze op hun plek te zetten: links, gecentreerd, rechts, of gelijkmatig verdeeld over het canvas. Zo houd je consistente afstanden die er op elk drukformaat verzorgd uitzien.

Uitlijnwerkbalk van het canvas in de Composerie Design Studio

Lagen en volgorde

Elk blok zit op een laag. Met het lagenpaneel links herschik je elementen en bepaal je wat voor of achter wat komt. Dat is cruciaal wanneer beeldblokken tekst overlappen: de tekstlaag moet bovenop blijven om leesbaar te zijn.

Snappen en hulplijnen

Zet slimme hulplijnen aan om tijdens het slepen uitlijnhints te zien. Snappen op het raster houdt de afstanden gelijk. Beide zijn uit te zetten als je vrij wilt positioneren.

Zoomen en voorbeeld

Zoom in voor de details en schakel daarna naar Voorbeeldmodus om het ontwerp te zien zoals je klanten het zien. In voorbeeldmodus verdwijnt de editor-interface en blijft alleen het product met zijn personalisatievelden over, precies zoals het in je Shopify-winkel staat.

Opslaan en publiceren

Opslaan als concept

Klik op elk moment op Opslaan om je werk als concept te bewaren. Concepten zie je alleen in je dashboard; ze staan niet in je Shopify-winkel. Handig om aan een ontwerp te blijven sleutelen, feedback van je team te halen, of seizoensproducten vooruit klaar te zetten.

Publiceren naar Shopify

Is je ontwerp klaar, klik dan op Publiceren. Composerie zet de customizer-configuratie klaar op je Shopify-productpagina. Klanten kunnen meteen personaliseren en bestellen.

Na publiceren kun je gewoon doorwerken. Wijzigingen komen als nieuw concept binnen tot je opnieuw publiceert, zodat je live customizer stabiel blijft terwijl je aanpast.

Dupliceren en doorbouwen

Gebruik Dupliceren om een bestaand template te kopiëren en aan te passen voor een ander product of een andere variant. Dat scheelt tijd als je assortiment vergelijkbare personalisatieopties deelt: bouw één sterk template en pas het aan over je catalogus.

Tips voor betere ontwerpen

  1. Begin bij het drukvlak — stem je canvasmaten af op de specificaties van je leverancier vóór je blokken toevoegt
  2. Zet duidelijke grenzen — tekenlimieten en minimale beeldresoluties voorkomen ontwerpen die slecht afdrukken
  3. Test op mobiel — het meeste Shopify-verkeer komt van telefoons; controleer of je customizer daar goed werkt
  4. Gebruik de voorbeeldmodus — bekijk de klantervaring altijd vóór publicatie
  5. Houd het aantal velden beperkt — drie tot vijf personalisatievelden is een verstandig startbereik; te veel opties overweldigen en kosten je afrondingen

Mobiel voorbeeld van de live customizer van Composerie

Aan de slag

De Design Studio geeft je volledige controle over de personalisatie-ervaring. Of je nu simpele producten met een monogram maakt of complexe ontwerpen met veel velden, het gereedschap is erop gebouwd.

Klaar om je eerste custom product te maken? Start gratis en open vandaag de Design Studio.

Verder lezen

Tutorials

Beginnen met Composerie: je eerste gepersonaliseerde product

Zo zet je je eerste gepersonaliseerde product op in Composerie, van het koppelen van je Shopify-winkel tot een live customizer.

Gidsen

Print-on-demand met personalisatie: de complete gids

Hoe personalisatie werkt in een print-on-demand-workflow, hoe je een drukpartner koppelt, en welke weg een bestelling aflegt van klant tot bezorging.

Vergelijking

Composerie versus traditionele productcustomizers: wat is het verschil?

Composerie naast de klassieke Shopify-customizer-apps: live voorbeeld, analytics en de rest van het werk na de bestelling.