logo

Generating 3D Apparel Mockups

Learn how to create new fabrics in Konfiwear

Mockups are a powerful feature that allows you to generate realistic static apparel previews. Whether you're looking to share designs with clients, embed a 3D viewer on a website, or create professional product images, the mockup feature provides an easy-to-use interface for creating high-quality renders.

With the Mockup Editor, you can:
✅ Generate static mockups with customizable background and garment colors
✅ Upload designs & logos and position them easily on garments
✅ Create shareable mockup links for clients
✅ Embed a 3D mockup viewer on your website using iframe integration

1️⃣ Accessing the Mockup Editor

To generate a new mockup, follow these steps:

1️⃣ Navigate to the Mockups Tab in your dashboard.
2️⃣ Click the “Open Editor” button.
3️⃣ The Mockup Editor will open, allowing you to create your apparel preview.

📌 Screenshot: mockup-editor.png

2️⃣ Setting Up Your Mockup

Once inside the Mockup Editor, follow these steps to configure your design:

1️⃣ Choose a Product

  • Select the product template you want to generate a mockup for.
  • The product model will appear in 3D view for customization.

2️⃣ Customize Scene & Garment Colors

  • Background Color: Set a solid background color for a clean presentation.
  • Garment Color: Choose a single-color fabric, or apply a custom design.

3️⃣ Upload Logos & Custom Designs

  • Single Color & Logo Upload: Choose a base color and place a logo on top.
  • Full Custom Design: Upload a full apparel design and use the stretch tool to adjust placement on the garment.

📌 Screenshot: mockup-preview.png

3️⃣ Saving & Sharing Your Mockup

Once your design is complete, click “Save” to generate a Mockup Link.

📌 Example of a Mockup Link:
🔗 https://app.konfiwear.com/for-testing/?d=4411bd35-7b59-4d32-bcb6-b59a7c3881bf

Enable or Disable Mockups

  • In the Mockup List, you can toggle mockups ON/OFF to control visibility.

4️⃣ Embedding the Mockup Viewer on Your Website

To display the 3D Mockup Viewer on your website, use an iframe integration.

📌 Example iFrame Code:

This allows clients or website visitors to view your apparel designs directly on your website in interactive 3D mode. You can also enable or disable the mockup link.

✅ Summary & Next Steps

✔️ Access the Mockup Editor from the Mockups Tab
✔️ Select a product and customize colors & designs
✔️ Save & share the generated mockup link
✔️ Embed the 3D viewer using iframe integration
✔️ Manage mockups by enabling/disabling in the Mockup List

PreviousPatterns
NextQuotes