Skip to main content

Product Builder

The Product Builder is a full-screen dark-theme editor for configuring product templates.

Interface​

  • Top Toolbar: View tabs, zoom controls, undo/redo, save, export, exit
  • Left Sidebar: Views, background, canvas size, print area, elements
  • Canvas: Central editing area with the product mockup
  • Right Panel: Element properties (appears when selecting an element)

Views​

Each product can have multiple views (e.g., Front and Back):

  • Click + Add View to add a new view
  • Click a view tab to switch between views
  • Each view has its own canvas size, elements, and background

Canvas Size​

Set per-product canvas dimensions:

  • Width and Height in pixels
  • Different products need different sizes (e.g., 800x500 for mugs, 400x700 for phone cases)

The print area defines where customers can place designs:

  • Set X, Y, Width, Height to define the bounding box
  • Shown as a dashed blue rectangle on the canvas
  • Elements outside the print area won't be included in print exports

Adding Elements​

  • Add Text: Creates an editable text element
  • Curved Text: Text with character spacing for curve effect
  • Add Image: Opens WordPress Media Library to select an image
  • Background Image: Sets the product mockup as canvas background
  • Background Color: Sets a solid background color

Saving​

Click Save to save all views. Changes are saved via AJAX without page reload.