Prepare multicolor product images
- The product template that you'd like to support multicolor feature should be prepared in SVG format. This could be converted from Adobe Illustrator format, or created from scratch.
- Next, decide which
path
elements you'd like to colorize. Add definition of class to the path object, e.g.class="left-sleeve"
. - Finally, add a definition of default style, this should go immediately after
svg
element.<style type="text/css"> <![CDATA[ .left-sleeve{fill:#fff} ]]> </style>
The Products JSON should be updated as well. For example, to make the above colorizable layer available, the following should be added to the product object of the configuration file:
"colorizableElements":
[
{
"name": "Left Sleeve",
"id": ".left-sleeve.fill",
"colors": [
{ "name": "Epic Red", "value": "#f00" },
{ "name": "Pitch Black", "value": "#000"},
{ "name": "Yellow", "value": "#ff0"}
]
}
]
Please note couple of specifics in the configuration snippet above:
- The id should correspond the class you have used inside SVG file.
- colorizableElements node is of type array (note the square brackets);
- You can use "fill" or "stroke" keywords to define either the fill of the colorizable layer or it's stroke.
- You can omit "colors" array node. In this case list of available product colors will be used, i.e. all colorizable elements will have same color list.
- Avoid using "_" (underscore) symbol in class names — Adobe Illustrator has issues with import/export such SVG files.
Preparing Multicolor Mask
Products may have also multicolor mask. Basically rules are the same, but there is one important difference — styles definition should be in product image. Despite of mask is using same color layers or own ones, they all should be listed only in product svg file. Surely
colorizableElements
list should describe all these layers both of product image and product mask.