Designs Module

---

What Is a Design?

A design in Konfiwear is a vector template (SVG) that defines the visual layout of a garment. It determines which areas of the product are colorable, where patterns can be applied, and how graphics and text are positioned. Each design also has a raster preview image used as a thumbnail throughout the dashboard and customizer.

Designs are scoped to your account — each team manages its own collection independently.

---

Key Properties

Every design has the following properties:

💡 Tip: The distinction between Customizable and Fixed is important. Use Fixed for designs where you want to offer a curated look with no customer modifications — for example, a pre-designed team uniform with locked colors.

---

How Design-Driven Customization Works

Konfiwear uses a design-driven customization model. This means:

1. The customer selects a product (e.g., a soccer jersey)

2. The customer chooses a design from the available designs for that product

3. The selected design's SVG loads onto the 2D canvas, defining the garment's zones

4. All customization happens within the zones defined by the design — colors, patterns, graphics, and text

5. The 2D canvas feeds the 3D model texture via the canvas-to-texture bridge

Zones and link groups are assigned per design, not per product. When a customer selects a different design, the entire set of editable zones changes. This is a core architectural principle in Konfiwear.

⚠️ Important: A design's SVG structure determines what customers can customize. Zone IDs in the SVG map directly to the color zones, pattern zones, and graphic placement areas in the customizer. If a zone isn't defined in the SVG, it won't appear in the customizer.

---

Product Assignment

Designs can be scoped to specific products using the product rule system. This controls which products a design appears for in the customizer:

This gives you precise control. For example, you might create a design that only applies to cycling jerseys (use Include and select your cycling products), or a universal design that works on everything except sublimation-only items (use Exclude).

The product assignment is managed through a dedicated Products tab on each design's detail page.

Caption: The Products tab showing the product rule selector and the assigned product list.

---

Navigating the Designs Module

The Designs List

Navigate to Designs from the Customizer section in your account sidebar. The list page shows all your designs in a data table with:

• Search by design name

• Filter by source (Custom, Library, Starter) and status (Active, Inactive)

• Sort by name, price, type, or sort order

• Click any row to open the design detail page

Each row displays the design's thumbnail, name, source, type, price, and status badge.

Caption: The Designs list page with search, filters, and design rows.

The Design Detail Page

Click any design to open a detail view organized into two sub-pages accessed via horizontal tabs:

Overview tab:

• Left column — Design info (name, description, source, type, status) and asset upload slots (preview image and SVG)

• Right column — Read-only preview card and pricing configuration

Products tab:

• Product rule toggle (All / Include / Exclude)

• Searchable product picker with thumbnail previews, grouped by category

• List of currently assigned products with remove buttons

Caption: The design detail Overview tab with info, assets, preview, and pricing cards.

---

Design Assets

Each design carries two primary assets:

Both assets upload directly to cloud storage via presigned URLs. The SVG file is the critical production asset — it controls the entire customizer experience for that design.

💡 Tip: Always upload both a preview image and an SVG. The preview gives your team and customers a quick visual reference, while the SVG powers the actual customizer rendering.

---

Soft Delete

When you delete a design, Konfiwear performs a soft delete — it sets a deleted_at timestamp rather than permanently removing the record. Soft-deleted designs:

• Disappear from the dashboard and customizer immediately

• Are excluded from all queries automatically

• Retain their data in the database for audit and recovery purposes

---

How Designs Connect to Other Modules

---

Tips & Best Practices

• Name designs descriptively — use names like "Soccer Jersey - V-Neck Classic" rather than "Design 1" so your team and customers can find them quickly

• Set a default design for each product — this gives customers a starting point and reduces the blank-canvas friction

• Use the Include/Exclude rules strategically — assign sport-specific designs only to the relevant product types rather than showing everything to everyone

• Keep SVGs clean — ensure zone IDs are consistent, use flat structures where possible, and validate that viewBox attributes are present

• Test in the customizer after uploading — open the customizer with a product that uses the design to verify zones load correctly

---

Related Articles

• Creating a Design

• Understanding the Products Module

• Product Categories Explained