Understanding the Assets Module in Konfiwear
Assets are the building blocks your customers use in the 3D customizer. Every color swatch, font, print position, size option, and category in your customizer is defined and managed here. This guide gives you a map of the Assets module
What Are Assets?
Assets are the configurable elements that power your customizer experience. They're separate from products and designs — products are the garments, designs are the templates, and assets are the options your customers choose from when customizing.
Five asset types live behind a shared tab navigation:
Section | What It Manages | Why It Matters |
Colors | Color swatches (hex, Pantone, CMYK), palettes, ordering, color zones, and customizer color settings | Defines every color your customers can apply to garment zones |
Fonts | Typefaces for text customization — Google Fonts, custom uploads, or system fonts | Controls what fonts are available for player names, numbers, and sponsor text |
Positions | Named zones on a garment where graphics and text can be placed (e.g., chest, back, sleeve) | Determines where customers can position logos, artwork, and text |
Sizes | Size run definitions organized into groups (e.g., Adult Alpha, Youth Numeric) | Defines the size options customers select when ordering |
Categories | Hierarchical navigation tree for the customizer (e.g., Sport → Football → Jerseys) | Guides customers through product selection with nested drill-down navigation |
Navigating to Assets
From your account dashboard, click Assets in the left sidebar. The Assets area opens with a horizontal tab bar across the top. Click any tab to switch between sections.
The default landing tab is Colors.
Caption: The Assets tab bar with five sections. Colors is selected by default.
How Assets Connect to the Customizer
Assets are assembled into the customizer configuration at runtime. When a customer opens your customizer at /c/your-slug, the platform loads:
All enabled colors (and their zone assignments) for the color picker
All enabled fonts for the text editor
All enabled positions for graphic and text placement
All enabled size groups and sizes for the size selector
The category tree for product navigation
Disabling any asset hides it from the customizer without deleting it. This gives you full control over what customers see — seasonally rotate colors, restrict fonts to your brand typefaces, or hide size groups that are temporarily out of stock.
Section Overview
Colors — The Most Feature-Rich Section
Colors has its own sub-navigation with four areas:
Sub-Section | What It Does |
Colors | The main list — create, edit, and delete color swatches with hex, Pantone, and CMYK values |
Palettes | Group colors into preset palettes (e.g., "Home Kit", "Away Kit") for quick customer selection |
Sort | Drag-and-drop grid to reorder how colors appear in the customizer |
Settings | Toggle customizer features (color search, gradients, palettes, hex picker) and configure color zones that map to SVG element IDs in your designs |
💡 Tip: Color zones are the bridge between your design SVGs and the customizer. Each zone maps to an element ID in the design file — primary, secondary, accent, etc. — and defines which colors are available for that area of the garment.
Fonts — Typeface Management
A single-page list for managing fonts. Each font has a source type that determines how it's loaded:
Source | How It Works |
Loaded from Google Fonts CDN at runtime. Specify the Google font family name. | |
Custom | Loaded from a URL you provide (e.g., a WOFF2 file hosted on your CDN). |
System | Assumes the font is available on the customer's device. No loading needed. |
Positions — Garment Placement Zones
Positions define named areas on a garment where customers can place graphics or text. Each position has a content type that controls what's allowed:
Content Type | What Customers Can Place |
Graphic | Images, logos, and artwork only |
Text | Text and numbers only |
Both | Graphics and text |
Sizes — Grouped Size Runs
Sizes are organized into groups that represent different sizing systems. A single account can run multiple systems simultaneously — for example, an "Adult Alpha" group (S, M, L, XL) alongside a "Youth Numeric" group (6, 8, 10, 12).
Each group specifies a size system type:
System | Example |
| S, M, L, XL, 2XL |
| 6, 8, 10, 12, 14 |
| 36, 38, 40, 42 |
| 2, 4, 6, 8 |
| 6, 8, 10, 12 |
| Any custom labels you define |
Categories — Customizer Navigation
Categories create a hierarchical tree that guides customers through product selection. See Product Categories Explained for a detailed walkthrough.
Shared Patterns Across All Sections
All five asset sections follow the same technical patterns:
Account-scoped — every asset belongs to your account and is isolated from other accounts
RLS-protected — access is enforced at the database level via Supabase Row-Level Security
Enabled/Disabled — every asset has a visibility toggle. Disabled assets are hidden from the customizer but preserved in your configuration.
Sort order — all assets support ordering that controls display sequence in the customizer
DataGrid tables — all list pages use a consistent table interface with search, filters, pagination, and row actions
Tips & Best Practices
Start with colors and sizes — these are the two assets customers interact with most. Get your color swatches and size runs configured before anything else.
Configure color zones early — they connect your design SVGs to the customizer's color picker. Without zones, customers can't change garment colors.
Use palettes for brand consistency — create palettes for "Home Kit", "Away Kit", or "Corporate" to help customers select cohesive color combinations
Keep fonts focused — offer 5–10 well-chosen fonts rather than dozens. Too many options slow down the customizer and overwhelm customers.
Name positions by location — "Front Chest Center", "Back Upper", "Left Sleeve" are far clearer than "Position 1", "Position 2"