Understanding the Mockups Module in Konfiwear

---

What Is a Mockup Session?

A mockup session is a workspace that contains one or more items, each pairing a fabric texture with a product. Think of it as a presentation: each item is a slide showing a different product or texture variation. You can create a session with a single soccer jersey mockup, or build a multi-item session showing an entire collection — jersey, shorts, socks — all with the same fabric applied.

Each session has:

---

The Approval Workflow

Mockup sessions follow a four-stage workflow:

Draft → Shared → Approved                 → Revision Requested → Shared

💡 Tip: When you change a session's status to "Shared", the share link is automatically enabled. You can copy the link from the export/share dialog and send it to your client.

---

Navigating the Mockups Module

The Mockups List

Navigate to Mockups from your account sidebar. The list page shows all your sessions in either a grid view (cards with thumbnail carousels) or a list view (compact rows).

Features available on the list page:

• Search by session name

• Status filter — filter by Draft, Shared, Approved, or Revision Requested

• Grid / List toggle — switch between visual cards and compact rows

• Create dialog — start a new session with an optional name

• Session actions — Rename, Duplicate, Delete, and status changes

Each session card shows a thumbnail carousel of its items, the session name, status badge, item count, and creation date.

Caption: The Mockups list page in grid view with session cards, status badges, and a thumbnail carousel per session.

---

The Mockup Studio

Click any session to enter the Studio — a full-screen editor where you build and preview your mockups. The studio is organized into four areas:

Left sidebar:

• Texture Upload — drag-and-drop or file picker to upload the base fabric texture for the active item

• Product Library — a searchable grid of your account's products, filterable by category. Click a product to assign it to the active item.

Center canvas:

• 2D / 3D toggle — switch between the 2D Fabric.js editor and the 3D garment preview

• 2D mode — edit the texture canvas directly. The canvas is a fixed 2048×2048 workspace with rulers, snap guidelines, and layer management.

• 3D mode — the fabric texture is applied to the product's GLB model and rendered in real time. Rotate and zoom to inspect from any angle.

Top bar:

• Item tabs — each item in the session gets a tab. Click to switch between items. Add new items with the + button. Remove items from the tab's close icon.

Bottom status bar:

• Session name (editable inline)

• Save button — saves the active item's canvas state, captures a thumbnail, and uploads it

• Export button — batch-exports all items in the session (captures a 3D screenshot for each)

• Share button — opens the share dialog for copying the share link and changing the session status

Caption: The Mockup Studio with the texture sidebar, 2D canvas workspace, item tabs across the top, and status bar at the bottom.

---

Creating a Mockup Session

1. Open the create dialog

On the Mockups list page, click the New Mockup button. A dialog appears.

2. Enter a session name (optional)

Type a name for your session (e.g., "Summer 2026 Collection — Client Review"). If you leave it blank, a default name like "Mockup #4" is generated.

3. Create and enter the studio

Click Create. The session is created with one empty item, and you're redirected to the Studio.

Caption: The create dialog with an optional session name field.

---

Building a Mockup Item

Each item in a session represents one product-texture combination. Here's how to set one up:

Assign a product

In the left sidebar, browse or search the Product Library. Click a product to assign it to the active item. The product's 3D model (GLB) loads in the 3D view.

⚠️ Important: Assigning a product resets the item's texture and canvas state. Assign the product first, then upload your texture.

Upload a texture

In the left sidebar, use the Texture Upload area to drag-and-drop or select your fabric texture image (PNG, JPEG, or WebP). The texture uploads to cloud storage and immediately appears as the base layer on the 2D canvas.

Edit in 2D

Switch to 2D mode using the canvas toolbar. The 2D editor gives you:

• The uploaded texture as the base layer

• Rulers along the edges with snap guidelines

• Layer management for additional graphics, text, or pattern overlays

Preview in 3D

Switch to 3D mode to see your texture mapped onto the product's garment model. Rotate and zoom to verify the mockup looks correct from all angles.

Caption: The 3D preview showing a texture applied to a jersey model.

💡 Tip: The 2D canvas automatically bridges to the 3D model. Every change you make in 2D is reflected in 3D in real time — no manual export or refresh needed.

---

Working with Multiple Items

A session can contain multiple items — for example, a complete team kit with jersey, shorts, and socks.

• Add an item — Click the + button in the item tab bar

• Switch items — Click any tab to switch the active item

• Remove an item — Click the close icon on a tab (with confirmation)

• Reorder items — Items are ordered by their tab position

Each item has its own product assignment, texture, canvas state, and thumbnail. Saving and exporting operate per-item.

---

Saving and Exporting

Save the active item

Click Save in the status bar. This:

1. Serializes the Fabric.js canvas state

2. Captures a 3D screenshot (if a product with a GLB model is assigned)

3. Uploads the thumbnail to cloud storage

4. Saves everything to the database

The dirty-state indicator clears once the save completes.

Export all items

Click Export in the status bar. This batch-processes every item in the session:

1. Switches to each item sequentially

2. Captures a 3D screenshot for each

3. Uploads all thumbnails and export images

A progress indicator shows the current item being processed. The export is cancellable.

---

Sharing for Approval

1. Click Share

Click the Share button in the status bar. The export/share dialog opens.

2. Set the status to Shared

If the session is still in Draft, change the status to Shared. This automatically enables the share link.

3. Copy the share link

The dialog displays the shareable URL powered by the session's unique share token. Copy it and send it to your client or reviewer.

4. Track the response

When the reviewer responds:

• Approved → the session moves to the Approved status

• Revision Requested → the session enters the revision loop. Make changes, re-save, and share again.

Caption: The share dialog with the copyable link and status selector.

---

Session Management

From the Mockups list page, each session card offers these actions via the dropdown menu:

⚠️ Important: Deleting a session is permanent. All items, canvas data, textures, and thumbnails are removed. Consider keeping approved sessions as a record of client sign-offs.

---

How Mockups Connect to Other Modules

---

Tips & Best Practices

• Assign the product before uploading a texture — product assignment resets the canvas, so set up the product first to avoid losing work

• Use multi-item sessions for collections — show an entire team kit in one session rather than creating separate sessions for each garment

• Save frequently — the studio tracks dirty state and prompts you if you try to navigate away with unsaved changes

• Export before sharing — run the full export to ensure all items have up-to-date thumbnails before sending the share link

• Use descriptive session names — "Game One — Home Kit Review — March 2026" is much more useful than "Mockup #7" when managing multiple client projects

• Duplicate for revisions — if a client requests changes, duplicate the session to preserve the original, then edit the copy

---

Related Articles

• Understanding the Products Module

• Understanding the Fabrics & Materials Module

• PBR Material Settings Guide

• Product Setup Guide