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
  3. Prices
  4. Constraints / Links
  5. Showing attributes in groups or 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.

Attribute-options.png

Attribute-options2.png

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

3D_Conf_-_Change_color.gif

 

Changing components

3D_Conf_-_Change_components_2.gif

 

Show/hide components

3D_Conf_-_Show_hide_components_2.gif

 

 

2. Attributes, Options and Actions

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

mceclip0.jpg

 

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

 

mceclip0.png

 

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.

 

2.2 Creating options for an attribute

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

options.png

You see now the Create New Option window

mceclip0.png

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.

mceclip1.png

 

2.3 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). 

 

 

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.3.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. 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).

 

adjust_price.png

 

 

4. 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.

 

Example

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:

mceclip0.png

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

1.jpg

2.jpg

 

5. 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.

 

5.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, ...).

Group-attribute-options.png

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.

 

5.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:

steps1.png

Example of steps that group multiple attributes

steps2.png

 

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.

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.