Product Designer for Shopware (T-shirts, mugs & more)

STEP 1 — Install and activate

    Upload the app via the Shopware Store (or via CLI:

    bin/console app:install DmitsDesigner --activate). Approve the

    requested permissions on first activation.

  STEP 2 — Open the app configuration

    Settings → System → Plugins → DmitsDesigner → "..." → Configure.

    The form is split into two cards.

  STEP 3 — General configuration

    • Active — master switch.

    • Show "Preview" button in designer (modal) — recommended ON.

    • Permanent live mini-preview — OFF by default; enable for richer

      visual feedback while editing.

    • One mockup per ordered colour — only relevant if you tint

      transparent product images. Off by default.

    • Property group ID for "colour" — leave at default unless your

      shop uses a custom property group for variant colours. Find the

      ID in the URL when editing the property group in admin.

    • Add-to-cart behaviour:

        DIRECT — designer's main button posts straight to the cart.

        APPLY  — designer applies the design to the product page; the

                 customer then picks size/qty and uses Shopware's normal

                 add-to-cart flow.

  STEP 4 — Mark a product as designable

    Edit a product → action menu → "Define print area".

    A modal opens with the product image. Drag a rectangle over the

    print zone, optionally add more sides ("Add page"), enter the

    available colours as Name=#hex pairs, then save.

    The configuration is written to the product's

    `dmits_designer_config` custom field; the storefront button

    "Design now" appears automatically on that product.

  STEP 5 — Surface the product picker (optional)

    Want a single "Customisable products" page on the storefront?

    Create a CMS page in Shopware admin, add a Custom-HTML block, paste:

    Add that CMS page to your main menu. The picker fills itself with

    every product whose dmits_designer_config is set.

  STEP 6 — Test the flow

    Open the designable product on the storefront. Click "Design now",

    add some text, place an image, choose a colour, then add to cart.

    The cart line item shows the design preview and an "Edit design"

    link that returns the customer to the designer with their work

    intact.

  TOOLBAR

    Move / scale image (checkbox)

        Toggles drag mode for the product image. With it on, the customer-

        facing photo can be repositioned and proportionally resized inside

        the 530 × 630-px stage. With it off, the same drag interaction

        draws / repositions the print-area rectangle.

    + Add page

        Saves the current settings as one design page (e.g. front side)

        and resets the form for the next side (e.g. back). Multi-page

        products show the customer one tab per page.

     Save

        Writes the JSON config into the product's dmits_designer_config

        custom field. Until this is clicked nothing is persisted.

  CARD: PRODUCT IMAGE

    Use no product image (e.g. buttons)

        Hide the photo entirely; the print area itself becomes the

        product surface. Use for buttons, pins, stickers, blank

        cardboards.

    URL

        The current photo URL. Auto-populated from the Shopware product

        cover image when the editor opens, but can be replaced with any

        absolute URL — e.g. a flat lay or mockup template.

    Load image

        Replaces the stage photo with the URL value. Drag the image into

        position with "Move / scale image" enabled.

  CARD: PAGE NAME

    Free-text label for the current side ("Front", "Back", "Sleeve" etc.).

    Shown to the customer on the page-tab buttons inside the designer.

  CARD: COLOURS

    Manual list (Name=#hex, comma-separated)

        E.g. White=#ffffff, Black=#222222. Defines the colour swatches

        the customer sees in the size matrix and / or the standalone

        colour picker.

    ↙ Take from variants

        One-click import of every colour swatch from your Shopware

        variant Property Group "Colour" — saves typing.

    Load colour palette from Shopware variants (autoColors)

        Uses live variant data instead of the manual list. Recommended

        when colours change in admin and you want them reflected

        automatically in the designer.

    Image tinting (colourise product image)

        Multiply-blends the chosen colour onto the product photo —

        white shirt becomes red shirt, dark areas stay dark. Best for

        clean cut-out templates with pure white shirts. Other photos

        may produce washed / pink results.

    Variant colour fills the print area (same picker as the shirt colour)

        Couples shirt-colour and print-area-colour into one decision —

        ideal for monochrome buttons / pins / stickers where the SKU's

        colour IS the print-area background.

    Colour loads the matching variant image (colorSwitchesImage)

        Swaps the displayed photo to the cover image of the matching

        colour variant — perfect for T-shirts with their own colour-

        specific photos. Works with or without tinting.

  CARD: VARIANT BEHAVIOUR

    Disable variant switch in the designer (lockVariant)

        Hides the in-overlay variant switcher so the customer can only

        order the size/colour they started designing for.

    Allow only the current variant in the cart (singleVariantMode)

        Filters the size matrix to variants with the same print-area

        config as the active one — prevents mixing different shapes in

        a single cart-add.

  CARD: CUSTOM PRINT-AREA BACKGROUND COLOURS

    Palette text field (Name=#hex pairs)

        Independent palette dedicated to the print-area background.

        Adds a SECOND picker labelled "Background colour" inside the

        designer that the customer operates separately from the shirt

        colour picker. Use when shirt colour and print-area colour are

        two distinct decisions (e.g. white T-shirt + coloured "sticker"

        print).

    Allow free colour picking in the designer (allowCustomBgColor)

        On top of (or alongside) the palette, exposes a native colour

        picker so the customer can pick any colour value.

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

PRINT-AREA EDITOR REFERENCE

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

  CARD: DESIGN SURCHARGE

    Price (€)

        Per-piece extra charged on top of the variant price. Surfaces

        as "incl. design surcharge: +X.XX" in the designer and as a

        bumped line price in the cart.

    VAT (%)

        Tax rate written into the cart payload alongside the surcharge.

        Used by your accountant report; the cart engine itself takes

        the rate from Shopware product config.

  CARD: CART FLOW

    Add to cart directly from the designer (cartFlowDirect)

        ON  — designer's main button POSTs straight to the cart.

        OFF — designer applies the design to the product detail page;

              customer adds to cart via Shopware's standard buy-form.

    Per-product override of the global app config.

  CARD: PRICE VISIBILITY

    Price in the designer (3-state select)

        Use global app setting — the value from DmitsDesigner config

        applies (default).

        Show price (force on this product) — overrides global when the

        global is "hide".

        Hide price (force on this product) — overrides global when the

        global is "show".

        Cart still receives correct prices regardless.

  CARD: PRINT AREA

    Shape — Rectangular / Round (oval) / Octagonal.

    Size presets — quick-buttons (small / medium / large) that centre

        a square print area at the chosen pixel size.

    X / Y / Width / Height — read-only, updated as you drag the

        rectangle. Edit by dragging on the canvas.

    Safety margin (bleed, px)

        Inner margin where text shouldn't sit; rendered as a dashed

        inset in the designer, not in the printed file.

  CARD: FRAME

    Draw a frame around the print area (frameEnabled)

        Stroked outline at the print-area boundary — appears in both

        designer and print files.

    Colour / Width (px)

        Frame styling. Click-and-drag the colour input for live preview.

  CARD: IMAGE POSITION

    Read-only X / Y / Width / Height of the product photo. Updated as

    you drag with "Move / scale image" enabled.

  CARD: OVERLAYS (e.g. button shape, on top)

    List of named PNG/SVG overlays rendered on top of the design

    (e.g. transparent button rim, foil look). Each entry has:

        Name              — internal label

        URL               — absolute path to the transparent graphic

        Scale %           — 100 = print-area size; values >100 extend

                            beyond the print area (typical for rims)

        Offset X / Y (px) — fine-tune position relative to the print area

    Apply to all pages (overlaysApplyAll)

        ON — the same overlay list applies to every page; OFF — define

        a different list per page.

  CARD: SAVED PAGES

    Appears after the first "Add page". Lists every saved side with

    edit / delete buttons. Click ✏ to load a page back into the form,

    ✕ to remove it.

  CARD: JSON PREVIEW

    Read-only textarea with the JSON that will be persisted on Save.

    Useful to copy a config to another product or to debug.