Color Zones

They are the editable color sections customers see when they open the Colors panel, such as:

• Primary

• Secondary

• Accent

• Accent 2

• Accent 3

Color zones can come from either the SVG design or the 3D model.

What Is a Color Zone?

A color zone is a named section that can receive a color inside the customizer.

For example, if a design has a shape named primary, Konfiwear can show a Primary color option in the customizer.

If another part is named accent, Konfiwear can show an Accent color option.

The color zone only appears when it exists on the selected design or product.

This means customers only see the color options that are actually available.

SVG Color Zones vs 3D Color Zones

Color zones can be used in two ways:

Use SVG when the zone is part of the uploaded design file.

Use 3D when the zone is a separate object or material section on the 3D product.

Default Color Zones

Konfiwear includes default color zones such as:

You can use these default names when preparing your SVG designs.

For example, if several shapes should change together as the main body color, name them primary.

1. Open the Color Zone Settings

Go to:

Colors > Settings

From there, you can manage the available color zones.

This is where you can view the default zones and add new custom zones.

2. Create a Custom Color Zone

Click Add Zone.

Enter the zone name.

For example, if you have an SVG element named line, create a color zone with the same name:

line

The zone name in Konfiwear must match the name used inside the SVG file.

3. Add an Alias

You can also add an alias.

The alias is the display name shown in the customizer.

For example:

This makes the color option easier for customers to understand.

4. Choose the Zone Type

Select where the color zone is used:

For example, if the element named line is inside your SVG design, choose SVG.

5. Choose a Default Color

You can select a default color for the zone.

This color will be applied automatically when the design or product loads.

For example, you can set the default color of the line zone to black.

6. Select Available Colors

You can decide which colors are allowed for this zone.

For example, you can allow only:

• Black

• Red

• Yellow

Or you can leave the zone available for all colors.

This is useful when a specific section should only use certain production-approved colors.

7. Save the Zone

After setting the name, alias, type, default color, and available colors, click Save Zone.

The color zone is now available in Konfiwear.

8. Use the Zone in an SVG Design

To use a custom SVG color zone, open your design file in Illustrator or another vector editor.

Select the element you want to make editable and name it exactly like the color zone.

Example:

line

Then export the design as SVG.

When exporting, make sure to enable:

Use Artboard

This keeps the SVG aligned correctly in the customizer.

9. Upload the Design

After exporting the SVG, upload it to a design in Konfiwear.

Add the SVG file and a preview image.

Once the design is available in the customizer, open a product and select the design.

The new color zone should appear in the Colors panel.

Example

If you create a custom zone named line and your SVG contains an element also named line, the customizer will show a new color option called Line.

Customers can then change the color of that specific line using the colors you allowed for that zone.

Best Practices

When working with color zones:

• Use simple and clear zone names

• Keep SVG element names consistent

• Use default zones like primary, secondary, and accent when possible

• Create custom zones only when needed

• Make sure the zone name in Konfiwear matches the SVG element name

• Use SVG for design elements

• Use 3D for separated 3D model parts

• Export SVG files with Use Artboard enabled

• Test the design in the customizer after upload

Summary

Color zones make product and design colors editable in the Konfiwear customizer.

They can be used for SVG design elements or separated 3D model parts.

To create a custom color zone, add the zone in Colors > Settings, use the same name inside your SVG or 3D model, then test it in the customizer.