Alle Beiträge

Design Studio: dein erstes individuelles Produkt bauen

Schritt für Schritt ein individuelles Produkt mit dem Composerie Design Studio bauen: Blocktypen, Personalisierungsfelder und die Werkzeuge auf der Arbeitsfläche.

Design Studio: dein erstes individuelles Produkt bauen

Design Studio: dein erstes individuelles Produkt bauen

Das Design Studio ist das Herz von Composerie. Hier baust du die Vorlagen hinter deinen personalisierten Produkten: du legst fest, was Kunden ändern dürfen, wie ihre Änderungen live mitlaufen, und welche Ausgabeeinstellungen und Anbieterzuordnungen ein Händler prüfen kann. Dieses Tutorial führt dich durch ein vollständiges Produkt, von null bis fertig.

Das Design Studio öffnen

Geh im Composerie-Dashboard auf Produkte > Neu. Wähl ein Basisprodukt aus deinem synchronisierten Shopify-Katalog, wähl deinen Druckpartner und klick auf Design Studio öffnen. Der Editor startet mit einer leeren Arbeitsfläche in der Größe der Druckfläche deines Produkts.

Die Oberfläche hat drei Hauptbereiche:

  • Linkes Panel — Blockbibliothek und Ebenenliste
  • Mitte — die interaktive Arbeitsfläche
  • Rechtes Panel — Eigenschaften und Grenzen des gewählten Blocks

Panel mit Blocktypen im Composerie Design Studio: Text, Bild und Formen

Die Blocktypen

Blöcke sind die Bausteine jeder Vorlage. Jeder Typ hat einen eigenen Zweck, und du kombinierst sie frei zu komplexen Layouts.

Textblöcke

Textblöcke zeigen festen oder vom Kunden bearbeitbaren Text auf dem Produkt. Bei einem Textblock stellst du ein:

  • Standardtext — was dasteht, bevor der Kunde etwas ändert
  • Schrift und Größe — wähl aus der eingebauten Bibliothek oder lade eigene Schriften hoch
  • Farbe — setz eine feste Farbe, oder lass den Kunden wählen
  • Ausrichtung und Abstände — bestimm, wie der Text im Block läuft
  • Zeichenlimits — verhindere Eingaben, die über die Designfläche hinauslaufen

Textblöcke sind das meistgenutzte Personalisierungselement. Sie passen gut zu Namen, Daten, Monogrammen, Zitaten und kurzen Botschaften.

Bildblöcke

Mit Bildblöcken platzierst du feste Grafiken oder lässt Kunden eigene Fotos hochladen. Einstellbar sind unter anderem:

  • Standardbild — ein Platzhalter oder eine feste Grafik
  • Upload-Einstellungen — Mindestauflösung, erlaubte Dateitypen, maximale Dateigröße
  • Zuschnittverhalten — ob das Bild den Rahmen füllt, hineinpasst oder manuell beschnitten werden darf
  • Filter — optionale Effekte, die Kunden auf ihren Upload anwenden können

Setz die Mindestauflösung so, dass sie zur DPI-Anforderung deines Druckpartners passt. Das verhindert Uploads, die schlecht drucken.

Formblöcke

Formblöcke bringen Geometrie ins Design: Rechtecke, Kreise, Linien und eigene Pfade. Nützlich für:

  • Zierränder und Rahmen um Text oder Bild
  • Hintergrundflächen, die Kontrast hinter personalisierte Inhalte legen
  • Trennlinien zwischen Designabschnitten

Formen können feste Eigenschaften haben oder an ein Personalisierungsfeld hängen, damit Kunden Farbe oder Größe anpassen.

Personalisierungsfelder einrichten

Personalisierungsfelder sind die Eingaben, mit denen dein Kunde auf der Shopify-Produktseite arbeitet. Jedes Feld hängt an einem oder mehreren Blöcken auf der Fläche und verbindet so das, was der Kunde tippt oder wählt, mit dem, was in der Vorschau erscheint.

Textfelder

Der einfachste Typ. Ein Textfeld hängt an einem Textblock und läuft live mit, während der Kunde tippt. Einstellbar:

  • Beschriftung — was der Kunde sieht (etwa „Trag deinen Namen ein”)
  • Platzhalter — Beispieltext vor der Eingabe
  • Prüfregeln — Pflicht oder optional, Mindest- und Höchstlänge, erlaubte Zeichen
  • Umwandlung — automatisch Groß-, Klein- oder Anfangsbuchstaben

Bild-Upload-Felder

Mit Upload-Feldern fügen Kunden eigene Fotos oder Grafiken hinzu. Du legst die Annahmekriterien fest, und der Upload wird mit einem Bildblock auf der Fläche verbunden.

Der Kunde sieht eine Ablagefläche auf der Produktseite. Nach dem Hochladen kann er das Bild innerhalb der Blockgrenzen verschieben und skalieren. Die Vorschau läuft sofort mit, er sieht also genau, wie sein Foto auf dem fertigen Produkt sitzt.

Farbwähler

Mit einem Farbwähler lässt du Kunden Farben für Text, Formen oder Hintergründe wählen. Du bestimmst, was zur Wahl steht:

  • Feste Palette — ein kuratierter Satz Farben, der zu deiner Marke oder deinen Druckmöglichkeiten passt
  • Freier Wähler — das ganze Farbrad
  • Verknüpfte Blöcke — welche Elemente sich mitändern

Beschränk die Palette auf Farben, die dein Druckpartner beherrscht; das erspart Überraschungen in der Produktion.

Schriftwähler

Mit einem Schriftwähler gibst du Kunden die Wahl der Schrift für ihren Text. Du kuratierst die Liste, und die Vorschau ändert sich sofort mit.

Gruppier Schriften nach Stil (Serife, serifenlos, Schreibschrift, Display), damit Kunden schnell finden, was sie suchen. Halt die Liste knapp: 8 bis 12 gut gewählte Schriften wirken besser als hunderte Optionen.

Mit der Arbeitsfläche arbeiten

Die Werkzeugleiste über der Fläche gibt dir Präzision beim Anordnen.

Ausrichten und verteilen

Wähl mehrere Blöcke und nutze die Ausrichtwerkzeuge, um sie zu setzen: links, zentriert, rechts, oder gleichmäßig über die Fläche verteilt. So bleiben Abstände konsistent und wirken in jeder Druckgröße sauber.

Ausrichtleiste der Arbeitsfläche im Composerie Design Studio

Ebenen und Reihenfolge

Jeder Block sitzt auf einer Ebene. Im Ebenenpanel links ordnest du Elemente um und bestimmst, was vor oder hinter was liegt. Das ist entscheidend, wenn Bildblöcke Text überlappen: die Textebene muss oben bleiben, sonst wird es unleserlich.

Einrasten und Hilfslinien

Schalt die intelligenten Hilfslinien ein, um beim Ziehen Ausrichthinweise zu sehen. Einrasten am Raster hält die Abstände gleich. Beides lässt sich abschalten, wenn du frei positionieren willst.

Zoom und Vorschau

Zoom für die Feinheiten hinein und wechsle dann in den Vorschaumodus, um das Design so zu sehen wie deine Kunden. Im Vorschaumodus verschwindet die Editor-Oberfläche, übrig bleibt das Produkt mit seinen Personalisierungsfeldern, genau wie in deinem Shopify-Shop.

Speichern und veröffentlichen

Als Entwurf speichern

Klick jederzeit auf Speichern, um deine Arbeit als Entwurf zu sichern. Entwürfe siehst nur du im Dashboard; im Shop erscheinen sie nicht. Praktisch, um an einem Design weiterzufeilen, Feedback vom Team zu holen oder Saisonprodukte vorzubereiten.

Zu Shopify veröffentlichen

Ist das Design fertig, klick auf Veröffentlichen. Composerie stellt die Customizer-Konfiguration auf deiner Shopify-Produktseite bereit. Kunden können sofort personalisieren und bestellen.

Nach dem Veröffentlichen kannst du weiterarbeiten. Änderungen laufen als neuer Entwurf auf, bis du erneut veröffentlichst, dein Live-Customizer bleibt also stabil, während du baust.

Duplizieren und weiterbauen

Nutze Duplizieren, um eine vorhandene Vorlage zu kopieren und für ein anderes Produkt oder eine andere Variante anzupassen. Das spart Zeit, wenn dein Sortiment ähnliche Personalisierungsoptionen teilt: bau eine starke Vorlage und pass sie über den Katalog hinweg an.

Tipps für bessere Designs

  1. Fang bei der Druckfläche an — stimm deine Flächenmaße auf die Angaben deines Anbieters ab, bevor du Blöcke setzt
  2. Setz klare Grenzen — Zeichenlimits und Mindestauflösungen verhindern Designs, die schlecht drucken
  3. Teste mobil — der Großteil des Shopify-Traffics kommt vom Handy; prüf, ob dein Customizer dort gut läuft
  4. Nutze den Vorschaumodus — sieh dir das Kundenerlebnis immer vor der Veröffentlichung an
  5. Halt die Felder knapp — drei bis fünf Personalisierungsfelder sind ein vernünftiger Startbereich; zu viele Optionen überfordern und kosten Abschlüsse

Mobile Vorschau des Live-Customizers von Composerie

Loslegen

Das Design Studio gibt dir volle Kontrolle über das Personalisierungserlebnis. Ob du schlichte Produkte mit Monogramm baust oder komplexe Designs mit vielen Feldern, die Werkzeuge sind dafür gemacht.

Bereit für dein erstes individuelles Produkt? Kostenlos starten und heute das Design Studio öffnen.

Weiterlesen

Tutorials

Erste Schritte mit Composerie: dein erstes personalisiertes Produkt

So richtest du dein erstes personalisiertes Produkt in Composerie ein, von der Shopify-Verbindung bis zum laufenden Customizer.

Guides

Print-on-Demand mit Personalisierung: der komplette Leitfaden

Wie Personalisierung in einem Print-on-Demand-Ablauf funktioniert, wie du einen Druckpartner verbindest und welchen Weg eine Bestellung vom Kunden bis zur Lieferung nimmt.

Vergleich

Composerie und klassische Produkt-Customizer: was ist anders?

Composerie neben den klassischen Shopify-Customizer-Apps: Live-Vorschau, Analytics und die Arbeit nach der Bestellung.