Konfiwear V2 is here — redesigned from the ground up.See what's new

Creating a Design in Konfiwear

By the end of this guide, you'll have a new design created, configured with a preview image and SVG, assigned to the right products, and ready for your customers to use in the 3D customizer.

Before You Begin

Make sure you have the following ready:

  • An active Konfiwear account with admin or owner access

  • A design preview image (PNG, JPEG, or WebP — recommended 600×600px or higher)

  • A design SVG file — the vector template with defined zones for colors, patterns, and graphics

  • At least one product in your account (designs need products to be useful in the customizer)

⚠️ Important: The SVG file is the core asset that powers the customizer experience. Zone IDs in the SVG map directly to the editable areas customers interact with. Work with your design team to ensure zone IDs are consistent and the SVG includes a viewBox attribute.

Setup Instructions

1. Navigate to the Designs page

From your account dashboard, click Designs under the Customizer section in the left sidebar. This opens the Designs list showing all your existing designs.

Caption: The Designs link in the sidebar under the Customizer section.

2. Open the design creation dialog

Click the Create Design button in the top-right corner of the Designs list page. A dialog opens with the creation form.

3. Fill in the design details

Complete the following fields:

Field

Description

Required

Name

A descriptive display name for the design (e.g., "Soccer Jersey — V-Neck Classic"). Maximum 255 characters.

Yes

Description

Optional internal note. Use this to describe the design's intended use, target sport, or any production notes.

No

Design Type

Customizable — customers can edit colors, patterns, and graphics on this design. Fixed — the design renders as-is with no editing allowed. Default is Customizable.

Yes

Source

Select Custom for designs you're creating from scratch. Library and Starter are used for designs originating from the Konfiwear catalog or onboarding seeding.

Yes

Price

An optional per-design price (numeric, minimum 0). Set to 0 if designs are included in the product price.

No

Status

Toggle Active to make the design immediately available in the customizer. Leave inactive to configure fully before publishing.

Yes

Sort Order

Controls the display sequence in the customizer's design selector. Lower values appear first. Default is 0.

No

Caption: The design creation form with sample data entered.

4. Save the design

Click Save to create the design. You'll be redirected to the design detail page where you can upload assets and configure product assignments.

✅ Done! Your design record is created. Now let's upload the assets and assign it to products.

5. Upload the preview image

On the design detail page, navigate to the Overview tab. In the left column, locate the Assets card. You'll see two upload slots: Preview and SVG.

  1. Click the Upload button on the Preview row

  2. Select your preview image (PNG, JPEG, or WebP)

  3. Wait for the upload to complete — the file uploads directly to cloud storage via a presigned URL

  4. The preview URL is automatically saved to your design

The preview image now appears in the design list, the design detail page, and the customizer's design selector.

Caption: The Assets card with a preview image successfully uploaded.

6. Upload the SVG file

  1. Click the Upload button on the SVG row in the Assets card

  2. Select your SVG file (.svg format)

  3. Wait for the upload to complete

This is the vector template the customizer loads onto the 2D canvas. Once uploaded, zone IDs in the SVG become available for color, pattern, and graphic customization.

💡 Tip: After uploading the SVG, open the customizer with a product that uses this design to verify zones render correctly. If zones don't appear, check that the SVG contains elements with the expected zone ID attributes.

Caption: Both the preview image and SVG are uploaded and ready.

7. Configure the pricing (optional)

In the right column of the Overview tab, locate the Pricing card. If you want to charge a per-design price:

  1. Click the Edit button on the Pricing card

  2. Enter the price amount (in your account currency)

  3. Click Save

If designs are included in your product pricing, leave the price at 0.

8. Assign the design to products

Switch to the Products tab using the horizontal tab navigation at the top of the detail page. Here you control which products this design is available for.

Step 8a — Choose a product rule:

Select one of three modes:

Rule

When to Use

All Products

This design works for every product in your catalog. No product selection needed.

Include Specific Products

This design only applies to certain products (e.g., only cycling jerseys). Select the products to include.

Exclude Specific Products

This design works for everything except certain products (e.g., exclude sublimation-only items). Select the products to exclude.

Click the appropriate radio button to set the rule.

Caption: The product rule selector at the top of the Products tab.

Step 8b — Select products (for Include or Exclude):

If you chose Include or Exclude, a product picker appears:

  1. Click Add Products to open the searchable product picker

  2. Browse or search for products by name — products are grouped by category with thumbnail previews

  3. Click products to select them, or use Select all within a category group

  4. Close the picker — selected products appear in the assigned list below

Each assigned product shows its thumbnail and name, with a remove button to unassign it.

Caption: The product picker with search, category grouping, and thumbnail previews.

⚠️ Important: Switching the rule to All Products clears the product assignment list automatically. Make sure this is intentional before switching.

Verify It Works

Follow these steps to confirm your design is fully set up:

  1. Navigate back to the Designs list and confirm your new design appears with the correct thumbnail, name, type, and status badge

  2. Click into the design and verify the Overview tab shows both assets uploaded (preview and SVG) and the correct pricing

  3. Switch to the Products tab and confirm the product rule and assigned products match your intent

  4. If the design is active, open the customizer with an assigned product and verify:

    • The design appears in the design selector panel

    • Selecting it loads the SVG onto the canvas

    • Color zones appear and are editable (for Customizable designs)

✅ Done! Your design is live. Customers can now select this design in the customizer and begin personalizing their garment.

Troubleshooting

The design doesn't appear in the customizer's design selector Check three things: the design's status must be Active, the design must be assigned to the product the customer is viewing (check the Products tab), and the customizer must be enabled for your account.

Zones don't appear after selecting the design The SVG may be missing zone ID attributes, or the zone IDs may not match the expected format. Open the SVG in a text editor and verify that elements have the correct id attributes. Also confirm the SVG includes a viewBox attribute.

The preview image doesn't show in the design list Verify the upload completed successfully by checking the Assets card on the design detail page. If the preview URL is blank, re-upload the image. Ensure the file is a supported format (PNG, JPEG, or WebP).

"Fixed" design still shows editing controls Confirm the Design Type is set to Fixed on the info card. If it was recently changed, refresh the page and clear the customizer session storage.

💡 Tip: If you're still experiencing issues, contact our support team at support@konfiwear.com or use the live chat in your dashboard.

Next Steps

Now that your design is created and assigned, here's what to do next: