BallinKit Docs
Back to Site

Designer Studio — Interface & Settings

The Designer Studio is the full-screen, interactive customizer interface that customers see when they click "Customize Design" on a product page. It is powered by Fabric.js 5.3.1 and rendered as a standalone page at /designer-studio/?product_id={id}. It can also be embedded anywhere with the shortcode [kit_customizer product_id="{id}"].

Studio URL Structure

The designer studio can be accessed via several URL patterns:

  • Frontend customer view: /designer-studio/?product_id=123
  • Admin template creation: /designer-studio/?product_id=123&admin_mode=1&new_post_type=kit_template
  • Admin design creation: /designer-studio/?product_id=123&admin_mode=1&new_post_type=kit_design
  • Load existing template: /designer-studio/?template_id=456&admin_mode=1
  • View order design (read-only): /designer-studio/?load_order_item=789
  • Load variation: /designer-studio/?product_id=123&variation_id=124

The studio requires a valid license key to load. If the license is inactive, the page shows a "License Key Required" error.

Studio Layout — Three-Panel Design

The designer interface is split into three panels:

  1. Left Panel (Sidebar Tabs + Drawers): Tool selection and configuration panels
  2. Center Panel (Canvas Workspace): The Fabric.js canvas where designs are created
  3. Right Panel (Order Sidebar): Size selection, pricing breakdown, team roster, and cart submission (customer mode only)

Header Bar

The top header includes:

  • Back to Store — Arrow button returning to the shop homepage
  • Product Name + "Designer Studio" subtitle
  • Center Controls: Undo (Ctrl+Z), Redo (Ctrl+Y), Zoom Out, Zoom Level indicator, Zoom In
  • Right Controls (Customer Mode): Live Total Price display + "Add to Cart" button
  • Right Controls (Admin Mode): Title input field + "Save Template" or "Save Design" button + "Exit Admin" link
  • Right Controls (Order View Mode): "Viewing Order Design (Read-Only)" badge

Left Sidebar — Tab Panels

Five tabs control different tool drawers on the left sidebar:

1. Templates Tab

Allows customers to browse and load pre-made design templates, as well as save and load their own design drafts.

  • Save Design Draft: Enter a design name and click "Save Draft" to persist the current canvas state as a kit_design post. Saved via REST API POST /kit-customizer/v1/designs/save.
  • Library Sub-Tab: Loads all published kit_template posts via REST API GET /kit-customizer/v1/templates and displays them as thumbnail cards. Clicking a template loads it onto the canvas.
  • My Drafts Sub-Tab: Loads the logged-in user's saved drafts via REST API GET /kit-customizer/v1/designs.

2. Colors Tab (Default Active)

Controls the garment color and patterns:

  • Garment Color Swatches: Circular color buttons rendered from the kit_product config. Clicking a swatch applies that color to the canvas background (solid color fill or color-mapped image swap).
  • Custom Color Picker: If Allow Custom Color is enabled, a "+" swatch opens a Pickr color picker for any custom hex selection.
  • Patterns Section: Lists available pattern images for the current view (populated from kit_product config). Customers can click a pattern to apply it over the base layer. Pattern colors can also be changed if the pattern has color options.

3. Text Tab

Full-featured text editor for adding and styling text layers on the canvas:

  • Text Content: Free-form text input field (default: "YOUR TEXT")
  • Font Family: Dropdown populated from the server-side fonts-manifest.json file (custom uploaded fonts) plus system fallbacks: Outfit, Arial, Impact
  • Text Color: HTML color picker input
  • Advanced Options (Accordion):
    • Bold / Italic toggles
    • Left / Center / Right alignment buttons
    • Custom Font Upload — upload a .ttf or .otf file directly in the studio (sent to REST API POST /kit-customizer/v1/fonts)
    • Width (inches) and Height (inches) number inputs
    • Letter Spacing slider (0–25px)
    • Line Spacing slider (0.5–3.0)
  • Add Text Button: Places the configured text as a new Fabric.js IText object on the active canvas view.

4. Upload Tab

Two separate upload zones:

  • Logo / Artwork Upload (Dropzone): Accepts PNG, JPG, SVG up to 10MB. Uploaded images appear on the canvas as user-image layers. Files are sent via REST API POST /kit-customizer/v1/upload and returned as URLs to load onto canvas via Fabric.js fromURL().
  • Product Design Reference (Dropzone): Accepts any image file. The uploaded image is stored as metadata (referenceImage) in the design export — it is NOT placed on the canvas. Instead, it is attached to the order as a production reference for the manufacturer. Once uploaded, a preview thumbnail card appears showing the filename and a "Remove Reference" button.

5. Layers Tab

Displays all user-created layers on the active canvas view. Each layer entry shows:

  • Layer type icon (text, image, clipart)
  • Layer label/name
  • Reorder controls (move up / move down)
  • Delete button

Selecting a layer in the list selects it on the canvas and vice versa.

Center Canvas Workspace

  • Fabric.js Canvas: 500×500px canvas element (scales responsively). Renders base layer, color fill, patterns, and user-added elements.
  • View Selector Buttons: Thumbnail buttons below the canvas for switching between configured views (Front, Back, Sleeve, etc.). Each button shows the base image thumbnail. Switching views saves the current view state and loads the new view.
  • Loading Overlay: Shown while canvas assets are being fetched. Includes spinner and "Loading Assets..." text.

Right Panel — Order Sidebar (Customer Mode)

  • Product Name & Description
  • Live Price Breakdown: Updates in real-time as the customer adds text, uploads, or switches views. Shows base price, per-text surcharge, per-upload surcharge, per-view surcharge, and bulk discount tier applied.
  • Size Selector: Dropdown populated from WooCommerce variation attributes (size). Falls back to a default size chart (YXS through 3XL) if no size attributes are defined.
  • Quantity Input
  • Team Roster Section: Expandable section to enter player names and jersey numbers for team orders. Each roster entry generates a separate design during checkout.
  • Garment Color Display: Shows the currently selected color hex value.
  • Add to Cart Button: Triggers design export, preview generation via POST /kit-customizer/v1/save-preview, and adds the product to the WooCommerce cart with all design metadata.

Admin Mode

When the studio is launched with admin_mode=1, the right order sidebar is hidden and the header shows Save/Exit buttons instead. This mode is used by store owners and admins to:

  • Create new design templates (kit_template posts) that appear in the customer template library
  • Create sample designs (kit_design posts)
  • Edit existing templates

Admin mode requires the user to have manage_woocommerce or manage_options capability.

Global Studio Settings

Navigate to KIT Designer > Settings to configure:

  • Studio Theme Mode: Light or Dark — controls the CSS theme class applied to the canvas wrapper (theme-light or theme-dark). Stored in the kit_studio_theme_mode WordPress option.
  • API URL: Your licensing portal URL for license validation
  • API Secret: Shared secret for HMAC authentication with the licensing server
  • Cache Directory: Server path for preview image cache
  • Upload Directory: Server path for user-uploaded design assets
Previous Asset Layers Next Fonts & Clipart