Composer

The Composer section is where you set the rules on how your product can be customized.

Summary

1. Before you start
2. Attributes, options and actions
   • Attributes
   • Options
   • Actions
3. Pre-set Configurations
4. Prices
5. Constraints / Links
6. Showing attributes in groups or steps
   • Groups
   • Steps

1. Before you start

Before you start working on defining the customization rules, there are a few important basic concepts that you should know to fully understand how to manage your configurable items, in particular:

• Attribute
• Option
• Action

Each configurable product is made of Attributes > Options. The attributes are the parts that your customers can personalize in your product and the options are the choices that they have for each attribute.

Options can be colors, materials, or components, meaning that for each attribute you can set a number of different choices for colors, materials or different components or a combination of colors, materials and components.

Example: a hat to which customers can change the color and decide whether or not to add a feather and the type of feather.

You use the Actions to define the way the product changes based on the options. When your customers choose the color purple (option) for the hat color (attribute), an action in Zakeke has been set to change the color to purple. Or when they choose not to add any feathers (option for the attribute "feathers"), there is an action that hides all the feathers. Action is how you "tell" Zakeke what to do for every possible option in the configurator and are basically of two types:

• change
• hide or show

The final process is Attribute > Option > Action

This way Zakeke supports all possible personalization for your item, not only just changing color, but it can also be changing components, adding/removing a component, or a combination of several options, such as changing the color and a part of the product at the same time. See below.

Changing colors/materials

Changing components

Show/hide components

2. Attributes, Options and Actions

You set the attributes, options and actions from the Composer section in your Zakeke back-office.

2.1 Creating an attribute

To add a new attribute, go to Composer > select a product and click on the Add button in the toolbar on the left. You see now the Create New Attribute window

The most important (and mandatory) information is the name and the code of the attribute, but you also have other fields:

• Store attribute: this is to link the attribute that you're creating in Zakeke with an attribute that already exists in your store.
• Preview options: this is to define how the options' icons should look in the configurator UI.
• Camera: this is to associate a camera to each attribute so that when customers click on that attribute to customize it, the 3D model automatically rotate to show that product's part to the customer. Cameras are set in Scene Editor > Viewer Preview (learn more here).
• Objects: this is to make it possible for customers to click on a part of the 3D model to get the personalization options for that part. Please refer to this guide.

IMPORTANT

if you're using BigCommerce as platform for your e-store, you can't create attributes on the fly within Zakeke. You need to create them along with the options in your BigCommerce admin panel first and then use them in Zakeke. Please refer to this guide for more details. 

If you're using Shopify as platform for your e-store, you need to match and associate a product attribute inside Zakeke with a product option inside Shopify. Please refer to this guide for more details.

2.2 Creating options for an attribute

Once an attribute has been created, you have to set the Options for that attribute. 

You see now the Create New Option window

Name and code are mandatory information.

Preview image: this is the icon that your customers see in the configurator UI for the option you're just creating. You can upload an image or use the color picker to set the icon or use the feature to automatically create icons from the back-office. It's really recommended to set an icon for each option and do not leave it blank to make it easy for your customers to visually recognize the options. See below an example of icons for color options:

IMPORTANT: Shopify users see another option here, namely Adjust price. That is to set a price for the option. Please refer to the Prices section of this article for further details.

2.2.1 Automatically create icons for the options

Other than uploading an image from your device or use the color-picker, you can click the Object screenshot button or the Material screenshot button to automatically take and apply an image for the option. See image below.

 

2.3 Import Attributes

You can import attributes from other products previously configurated inside Zekeke.

Once you have imported the attributes click on the "Retarget" button, which brings up materials and meshes of the imported products so you can choose them automatically and not load them manually, if needed.

2.4 Actions

For each option, you need now to define one or more actions.

NOTE: it's not necessary to define an action if the options for the attribute are not visual options meaning that do not affect the aspect of your product (example: you have an attribute "size", customers can choose their size but this does not visually change the 3D model in the scene, it's a no-visual option).

The actions that can be set are the followings:

• Show objects: to show a component;

• Hide objects: to hide a component;

• Set object material: to set a particular material to the selected object;

• Set sub-object material: to set a particular material to the selected sub-object;

• Set material color: to set a specific color to the selected object or sub-object;

• Move camera: to select a pre-made camera position for the option of the selected attribute (learn here on how to create camera positions). 

• Set design material: to set a particular material to be applied to the customized design of the configurable product. (example: an engraved text on a gold ring will have the same gold material and not a plane effect).
• Set & Reset camera pivot: to set or reset a specific camera within a product, linked to an attribute and to the corresponding action. It's not recommended for the external part of a product. Everything will revolve around the pivot once set.

 

Example 1
You sell a hat for which customers can choose the color (blue, red or black). You'd need to set Zakeke as follows:

• Attribute: Hat Color
  • Option 1: Blue
    • Action 1: Set material color "Blue"
  • Option 2: Red
    • Action 2: Set material color "Red"
  • Option 3: Black
    • Action 3: Set material color "Black"

Example 2
You sell a hat that customers can buy with or without a ribbon. You'd set Zakeke as follows:

• Attribute: Ribbon
  • Option 1: Yes
    • Action 1: Show objects "Ribbon"
  • Option 2: No
    • Action 2: Hide objects "Ribbon"

2.4.1 Managing multiple items (objects, materials, ...) together

At the moment, when you associate one action to the corresponding elements, you can use the wildcards (*) to select a group of assets with prefixes or suffixes in common.

For instance, if you need to change the material for all the objects that have the word 'Case' in their names, then you can group these selectors by putting an asterisk before or after the word. See below.

PRO TIP: do you have a product that shares the same or a part of the attributes/options or different products that share the same attributes/options? Read this.

3. Pre-set Configurations

Pre-set configurations in Zakeke allow you to have the ability to define new attribute and options combinations for your products inside the 3D configurator. Pre-set configurations can be defined for all the elements of your products or just some of them, giving customers the freedom to create unique designs based on your defined rules. Please follow this guide to create and manage pre-set configurations

4. Prices

You can set a price for each option in order to have a dynamic price for your product, meaning that the final price of the product for your customers changes based on the options that they select.

Go to the prices section, then click 'Add a new price' and add the amount you wish. Then you'll be able to edit, remove or set constraints to it. 

Only for Shopify users

Shopify users are not provided with the Prices tab because Shopify does not allow any dynamic price and the only way to set a price for each option is to link each option to an actual variant of the product in the store.

If you wish to set a specific price for each option, you need to use the Adjust price option that you see in the Create New Option modal when you create a new option for your product. That is where you can set a price for the option (Zakeke is able to dynamically calculate the final price of your product by adding the prices of all options). In order to do so, Zakeke needs to link the option to an actual variant of your product at your store and you can choose whether to use an existing variant (Use an existing variant in your shop) or create it on the fly (Create a charge).

5. Constraints / Links

Attributes and options can be linked to each other to create conditional rules and constraints, such as making an option or attribute available only if given conditions on other option(s) or attribute(s) are met. 

Constraints are set and managed from the Link feature in the menu of the attribute/option.

Please note that those shown below are just some generic examples, links can be used with options of any kind, including those that have actions on objects.

EXAMPLES:

You sell a customizable backpack for which customers can choose both the leather color and the zipper color:

• Attribute: Leather Color
  • Option 1: Black
  • Option 2: Brown
• Attribute: Zipper Color
  • Option 1: Gold
  • Option 2: Silver

However, the silver color for the zip is available only for the brown version of the backpack:

• Attribute: Leather Color
  • Option 1: Black
  • Option 2: Brown
• Attribute: Zipper Color
  • Option 1: Gold
  • Option 2: Silver - Only available for the Option 2 (Brown) of the Attribute 1 (Leather Color)

This is how to set the constraint rule:

In the configurator, it's like in the image below:

6. Showing attributes in groups or steps

Zakeke allows you to change the way attributes are shown to your customers. In particular, you can group attributes or make each attribute (or group of attributes) a single step of a process for which your customers proceed step-by-step (attribute by attribute) to personalize your product instead of having all attributes available at the same time.

6.1 Groups 

Attributes can be grouped into Groups. For each group you can have as many attributes.

Example: a shoe where your customers can choose a color or a material (options) for the different parts (attributes) that compose the shoe. The group is "Customize colors" which includes all the attributes (front, side lace, tongue, swoosh, ...) and for each attribute, you have color options (yellow, blue, black, ...).

To group one or more attributes select them (to select multiple attributes hold down the CTRL key while clicking), then press the "Group" button on the top toolbar:

You see the Create New Group window

The main options are:

• Name: the group name.
• Icon: the image used as group icon. (optional, if none is provided then a default icon is shown)

Other useful options are:

• Direction: how the attributes are shown inside the group.
• Camera position: choose a camera position that must be used when opening this group (learn here more on how to set camera positions).
• Objects: when one of these objects or one of its children is clicked, this group is opened. 

After creating the group, the attributes tree is changed like this:

TIP 1: You can drag other attributes inside, outside or from/to another group.

TIP 2: Use the arrows to the right of a group to re-order them.

6.2 Steps

By using the Steps option you can make it that customers go through a step-by-step process to personalize your item. You can set a step for each attribute or even for a group of attributes. Customers are able to move among steps by using "back" and "next" buttons.

To create a step:

1. Select one or more attributes (hold CTRL key while clicking to select multiple attributes).
2. Click the "Step" button in the toolbar.
3. A "New step" dialog gets shown.
4. Type the name of the step and confirm.

The attributes tree changes as in the image below:

This is how your customers see the configurator:

Example of steps that group multiple attributes

TIP 1: Each group has its own steps.

TIP 2: Like groups, after you created a step you can drag other attributes inside, outside or from/to other steps.

TIP 3: Like groups, you can use the arrows to the left of the step to re-order them.