Produktdesigner für Shopware (T-Shirts, Tassen & mehr)

  SCHRITT 1 — Installieren und aktivieren

    App über den Shopware Store hochladen (oder via CLI:

    bin/console app:install DmitsDesigner --activate). Beim ersten

    Aktivieren die angefragten Berechtigungen bestätigen.

  SCHRITT 2 — App-Konfiguration öffnen

    Einstellungen → System → Plugins → DmitsDesigner → „…" → Konfigurieren.

    Das Formular ist in zwei Karten unterteilt.

  SCHRITT 3 — Allgemeine Konfiguration

    • Aktiv — Hauptschalter.

    • Vorschau-Button im Designer (Modal) — empfohlen AN.

    • Permanente Live-Mini-Vorschau — Standard AUS; einschalten für

      mehr visuelles Feedback beim Bearbeiten.

    • Pro bestellter Farbe ein Mockup — nur relevant, wenn du

      transparente Produktbilder einfärbst. Standard AUS.

    • Property-Group-ID für „Farbe" — auf dem Default belassen, außer

      dein Shop nutzt eine eigene Property-Group für Variantenfarben.

      Die ID findest du in der URL beim Bearbeiten der Property-Group

      im Admin.

    • Warenkorb-Verhalten:

        DIRECT — Haupt-Button im Designer postet direkt in den Warenkorb.

        APPLY  — Designer übernimmt das Design auf die Produktseite;

                 der Kunde wählt anschließend Größe/Menge und nutzt

                 Shopwares normalen Warenkorb-Flow.

  SCHRITT 4 — Produkt als designbar markieren

    Produkt bearbeiten → Aktionen-Menü → „Druckbereich definieren".

    Ein Modal öffnet sich mit dem Produktbild. Rechteck über die

    Druckzone ziehen, optional weitere Seiten hinzufügen

    („Weitere Seite"), die verfügbaren Farben als Name=#hex-Paare

    eintragen, dann speichern.

    Die Konfiguration wird in das Custom-Field `dmits_designer_config`

    des Produkts geschrieben; der Storefront-Button „Jetzt gestalten"

    erscheint automatisch auf diesem Produkt.

  SCHRITT 5 — Produkt-Picker einbinden (optional)

    Eine eigene „Personalisierbare Produkte"-Seite im Storefront?

    Im Shopware-Admin eine CMS-Seite anlegen, einen Custom-HTML-Block

    einfügen, folgendes einfügen:

    Diese CMS-Seite ins Hauptmenü hängen. Der Picker füllt sich

    automatisch mit allen Produkten, die ein dmits_designer_config

    gesetzt haben.

  SCHRITT 6 — Den Flow testen

    Designbares Produkt im Storefront öffnen. „Jetzt gestalten"

    klicken, Text hinzufügen, Bild platzieren, Farbe wählen, dann in

    den Warenkorb legen. Die Warenkorb-Position zeigt eine

    Design-Vorschau und einen „Design bearbeiten"-Link, der den Kunden

    zum Designer zurückbringt — mit erhaltener Arbeit.

================================================================================

DRUCKBEREICH-EDITOR REFERENZ

================================================================================

TOOLBAR

    Bild verschieben/skalieren (Checkbox)

        Schaltet den Drag-Modus für das Produktbild. Aktiv: das Foto

        kann in der 530 × 630-px-Bühne verschoben und proportional

        skaliert werden. Aus: dieselbe Drag-Geste zeichnet bzw.

        verschiebt das Druckbereichs-Rechteck.

    + Seite hinzufügen

        Speichert die aktuellen Einstellungen als eine Design-Seite

        (z.B. Vorderseite) und setzt das Formular für die nächste Seite

        zurück (z.B. Rückseite). Mehrseitige Produkte zeigen dem Kunden

        einen Tab pro Seite.

     Speichern

        Schreibt die JSON-Konfiguration in das CustomField

        dmits_designer_config des Produkts. Vorher wird nichts persistiert.

  KARTE: PRODUKTBILD

    Kein Produktbild verwenden (z.B. Buttons)

        Blendet das Foto komplett aus; der Druckbereich selbst ist die

        Produktoberfläche. Für Buttons, Pins, Aufkleber, leere Pappkarten.

    URL

        Die aktuelle Foto-URL. Wird beim Öffnen automatisch aus dem

        Shopware-Produkt-Coverbild übernommen, lässt sich aber durch

        jede beliebige absolute URL ersetzen — z.B. ein Flatlay oder

        eine Mockup-Vorlage.

    Bild laden

        Tauscht das Bühnen-Foto gegen den URL-Wert aus. Bild mit

        aktiviertem „Bild verschieben/skalieren" in Position ziehen.

  KARTE: SEITENNAME

    Freier Text-Label für die aktuelle Seite („Vorderseite",

    „Rückseite", „Ärmel" etc.). Wird dem Kunden auf den Seiten-Tabs

    im Designer angezeigt.

  KARTE: FARBEN

    Manuelle Liste (Name=#hex, kommagetrennt)

        Z.B. Weiß=#ffffff, Schwarz=#222222. Definiert die Farbpunkte,

        die der Kunde in der Größen-Matrix und/oder im Standalone-

        Farbpicker sieht.

    ↙ Von Varianten übernehmen

        Ein-Klick-Import aller Farb-Optionen aus deiner Shopware-

        Variant-Property-Group „Farbe" — spart Tipparbeit.

    Farbpalette aus Shopware-Varianten laden (autoColors)

        Nutzt Live-Variantendaten statt der manuellen Liste. Empfohlen

        wenn Farben sich im Admin ändern und du sie automatisch im

        Designer reflektiert haben willst.

    Bild-Tinting (Produktbild einfärben)

        Multiply-Blendet die gewählte Farbe auf das Produktfoto —

        weißes Shirt wird rotes Shirt, dunkle Stellen bleiben dunkel.

        Am besten für saubere, freigestellte Templates mit reinweißen

        Shirts. Andere Fotos können verwaschen / rosa wirken.

    Variantenfarbe füllt den Druckbereich (gleicher Picker wie Shirt-Farbe)

        Verknüpft Shirt-Farbe und Druckbereich-Farbe zu einer

        Entscheidung — ideal für monochrome Buttons / Pins / Sticker,

        wo die SKU-Farbe = Druckbereichs-Hintergrund.

    Farbe lädt das passende Variantenbild (colorSwitchesImage)

        Tauscht das angezeigte Foto gegen das Cover der passenden

        Farbvariante — perfekt für T-Shirts mit eigenem Foto pro Farbe.

        Funktioniert mit oder ohne Tinting.

  KARTE: VARIANTEN-VERHALTEN

    Variantenwechsel im Designer deaktivieren (lockVariant)

        Versteckt den In-Overlay-Variant-Switcher; der Kunde kann nur

        die Größe/Farbe bestellen mit der er angefangen hat zu designen.

    Nur die aktuelle Variante im Warenkorb erlauben (singleVariantMode)

        Filtert die Größen-Matrix auf Varianten mit derselben

        Druckbereichs-Konfig wie die aktive — verhindert Mischen

        verschiedener Formen in einem Cart-Add.

  KARTE: EIGENE DRUCKBEREICHS-HINTERGRUNDFARBEN

    Paletten-Textfeld (Name=#hex-Paare)

        Unabhängige Palette nur für den Druckbereichs-Hintergrund.

        Fügt einen ZWEITEN Picker „Hintergrundfarbe" im Designer hinzu,

        den der Kunde getrennt vom Shirt-Farbpicker bedient. Verwende

        dies wenn Shirt-Farbe und Druckbereichs-Farbe zwei separate

        Entscheidungen sind (z.B. weißes T-Shirt + farbiger „Sticker"-

        Print).

    Freie Farbauswahl im Designer erlauben (allowCustomBgColor)

        Zusätzlich zur (oder anstelle der) Palette wird ein nativer

        Color-Picker eingeblendet, mit dem der Kunde jede beliebige

        Farbe wählen kann.

  KARTE: DESIGN-ZUSCHLAG

    Preis (€)

        Pro-Stück-Aufpreis auf den Variantenpreis. Erscheint im

        Designer als „inkl. X,XX € Designzuschlag" und im Warenkorb

        als erhöhter Zeilenpreis.

    MwSt. (%)

        Steuersatz, der ins Cart-Payload neben dem Zuschlag geschrieben

        wird. Verwendet von Buchhaltungsreports; die Cart-Engine selbst

        bezieht den Satz aus der Shopware-Produktkonfiguration.

  KARTE: WARENKORB-VERHALTEN

    Direkt aus dem Designer in den Warenkorb (cartFlowDirect)

        EIN — Haupt-Button im Designer postet direkt in den Warenkorb.

        AUS — Designer übernimmt das Design auf die Produkt-Detail-

              seite; der Kunde legt es über Shopwares Standard-

              Warenkorb-Button hinzu.

    Pro-Produkt-Override der globalen App-Konfiguration.

  KARTE: PREIS-ANZEIGE

    Preis im Designer (3-Wege-Select)

        Globale App-Einstellung verwenden — der Wert aus der

        DmitsDesigner-Config greift (Default).

        Preis anzeigen (für dieses Produkt erzwingen) — überschreibt

        global wenn global „Preis ausblenden" ist.

        Preis ausblenden (für dieses Produkt erzwingen) — überschreibt

        global wenn global „Preis anzeigen" ist.

        Im Warenkorb stimmen die Preise unabhängig davon.

  KARTE: DRUCKBEREICH

    Form — Rechteckig / Rund (Oval) / 8-eckig.

    Größen-Presets — Schnell-Buttons (klein / mittel / groß), die

        einen quadratischen Druckbereich in der gewählten Pixelgröße

        zentriert platzieren.

    X / Y / Breite / Höhe — read-only, aktualisiert beim Ziehen des

        Rechtecks. Bearbeiten durch Drag auf dem Canvas.

    Sicherheitsabstand (bleed, px)

        Innerer Rand in dem keine Schrift platziert werden sollte;

        gestrichelt im Designer angezeigt, nicht in der Druckdatei

        gerendert.

  KARTE: RAHMEN

    Rahmen um die Druckfläche zeichnen (frameEnabled)

        Strich-Outline am Druckbereichs-Rand — erscheint sowohl im

        Designer als auch in den Druckdateien.

    Farbe / Stärke (px)

        Rahmen-Styling. Color-Input click-and-drag für Live-Vorschau.

  KARTE: BILDPOSITION

    Read-only X / Y / Breite / Höhe des Produktfotos. Aktualisiert

    beim Ziehen mit aktivem „Bild verschieben/skalieren".

  KARTE: OVERLAYS (z.B. Button-Form, oben drauf)

    Liste benannter PNG/SVG-Overlays, die über dem Design gerendert

    werden (z.B. transparenter Button-Rand, Folien-Look). Jeder Eintrag:

        Name              — interne Bezeichnung

        URL               — absoluter Pfad zur transparenten Grafik

        Skalierung %      — 100 = Druckbereichsgröße; >100 erstreckt

                            sich über den Druckbereich hinaus (typisch

                            für Buttons-Ränder)

        Versatz X/Y (px)  — Fein-Justierung relativ zum Druckbereich

    Auf alle Seiten anwenden (overlaysApplyAll)

        EIN — die Liste hier gilt für alle Seiten; AUS — pro Seite

        eine andere Liste definieren.

  KARTE: GESPEICHERTE SEITEN

    Erscheint nach dem ersten „Seite hinzufügen". Listet jede

    gespeicherte Seite mit Edit-/Delete-Buttons. ✏ klick lädt eine

    Seite zurück ins Formular, ✕ entfernt sie.

  KARTE: JSON-VORSCHAU

    Read-only-Textarea mit dem JSON, das beim Speichern persistiert

    wird. Nützlich um eine Konfiguration auf ein anderes Produkt zu

    kopieren oder zum Debuggen.