Understanding the Graphics Module in Konfiwear
The Graphics module controls how logos, artwork, text, and brand elements are placed on garments in the 3D customizer. It manages three distinct placement modes freeform, fixed, and zone-based each serving a different production and customer workflow.
What Does the Graphics Module Manage?
The Graphics module is organized into four sections accessible via a tabbed interface:
Section | What It Manages | Where to Find It |
Zones | Bounded rectangular areas for DTG/sublimation printing — where customers place artwork within defined bounds | Graphics → Zones (default tab) |
Link Groups | Groups of positions that share a single customer input — e.g., a jersey number that appears on both front and back | Graphics → Link Groups |
Upload Settings | Global rules for customer file uploads — file size limits, allowed formats, scale constraints | Graphics → Upload Settings |
Brand Logos | Fixed, non-interactive tenant logos placed at predefined positions — automatically adapt to light/dark backgrounds | Graphics → Brand Logos |
A fifth related section — the Graphic Library — lives under Assets → Graphic Library and manages your reusable graphic assets (logos, badges, clip art).
Three Placement Modes
Graphics in Konfiwear follow three placement modes that can coexist on a single product:
Mode | Who Controls Placement | Example | Key Entity |
Freeform | The customer drags, scales, and rotates freely on the canvas | Customer uploads a club logo and positions it on the chest | Upload Settings |
Fixed Position | You predefine the coordinates; the customer provides the content | Player name on the back, number on front and back (linked) | Link Groups |
Zone (DTG/Sublimation) | You define a rectangular print area; the customer fills it with artwork | Full-chest DTG zone where the customer uploads a design | Graphic Zones |
💡 Tip: Most sportswear products use a combination of all three. A typical soccer jersey might have DTG zones for the chest and back, fixed positions for the player name and number (via link groups), and freeform placement enabled for sponsor logos.
Canvas Layer Order
All graphic elements render on the 2D Fabric.js canvas, which feeds the 3D model texture. The layer order from bottom to top is:
Layer | Type | Interactive? |
Design base | The design SVG template | No |
Brand logos | Fixed tenant logos | No — completely locked |
Zone boundaries | Dashed rectangles showing DTG print areas | No |
Pattern overlays | Tiled SVG patterns per zone | No |
Zone graphics | Customer artwork within zones | Yes — constrained to zone bounds (DTG) |
Zone text | Customer text within text zones | Yes |
Link group text | Text from linked positions | Yes |
Freeform graphics | Customer-placed graphics anywhere on the garment | Yes — drag, rotate, scale |
Freeform text | Customer-placed text | Yes |
Layering controls (forward/backward) move objects within their layer group but never across group boundaries. A freeform graphic can never drop below zone content.
Navigating the Graphics Module
Go to Graphics under the Customizer section in the sidebar. The section opens with three tabs: Zones, Link Groups, and Upload Settings. Brand Logos is accessible as a fourth tab or section.
Caption: The Graphics section with the three main tabs.
How Graphics Connect to Other Modules
Module | Relationship |
Designs | Zones are assigned to specific designs via a junction table. When a customer selects a design, only the zones assigned to that design appear. |
Products | Zones and link groups can be assigned to specific products and/or categories. |
Positions | Link group members reference positions from the Positions asset module. Each position can belong to only one link group. |
Colors | Color zones (from the Colors module) handle garment coloring. Graphic zones handle content placement. They are separate systems. |
Quotes | Selected graphics, zone content, and link group inputs are captured in the quote submission with a pricing breakdown. |
Billing | Zones can have per-unit surcharges that factor into the pricing engine. |
The Graphic Library
The Graphic Library (under Assets → Graphic Library) manages your account's reusable graphic assets — logos, badges, clip art, and artwork that customers can browse and select in the customizer.
Each graphic library entry has:
Property | Description |
Name / Slug | Display name and unique identifier |
Preview / Source URL | Thumbnail and original file (stored in S3) |
File Format | SVG, PNG, JPG, etc. |
Dimensions | Original width and height in pixels (used for DPI calculation) |
Allow Recolor | Whether customers can change SVG fill colors |
Price | Optional per-graphic surcharge |
Tags | Searchable tags for filtering |
Active | Visibility toggle |
Graphic library items use soft delete (deleted_at) to preserve references in existing quote snapshots.
Pricing Integration
The Graphics module integrates with the pricing engine:
Graphic zones can have a per-unit price surcharge — charged when the zone has content
Graphic library items can have individual prices
Fabrics have their own price surcharge
VAT is configurable per account (
vat_rateandvat_modeon customizer settings)
All pricing is computed by a pure, side-effect-free pricing engine. The breakdown is snapshotted as JSONB on the quote at submission time.
Tips & Best Practices
Define zones before enabling the customizer — customers need clear print areas to know where to place their content
Use link groups for repeated content — a jersey number should be a link group, not two separate positions that the customer fills independently
Set meaningful zone constraints — enforce minimum DPI, maximum file size, and allowed formats to ensure production-quality uploads
Upload both light and dark brand logo variants — automatic variant selection based on background luminance ensures your brand always looks correct
Restrict freeform placement when needed — use Upload Settings to control scale limits, rotation, and drag permissions