Attributes and Options are fundamental in providing choices within a product. Attributes are the distinct characteristics or features of a product that can be varied or customized. Options, on the other hand, are the specific choices available within each attribute.
Summary
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
1. Attributes, Options and Actions
Attributes are the distinct characteristics or features of a product that can be varied or customized inside Zakeke.
You set the attributes, options and actions from the Composer section in your Zakeke back-office.
1.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.
1.2 Creating options for an attribute
Options are the specific choices available within each 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.
1.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.
1.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.
1.4 Actions
For each option created, 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"
- Option 1: Blue
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"
- Option 1: Yes
1.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.