Skip to content

Prepare multicolor product images

Multicolor products are useful if you'd like user to "configure" the product by changing the color for one of its' parts. For instance, a uniform may require specific colors for sleeve panels. Please note that preparing such products would require more profound skills like editing SVG files manually.
  1. 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.
  2. Next, decide which path elements you'd like to colorize. Add definition of class to the path object, e.g. class="left-sleeve".
  3. Finally, add a definition of default style, this should go immediately after svg element.
            <style type="text/css">
                <![CDATA[
                 .left-sleeve{fill:#fff}
                ]]>
            </style>
            
You can also do the same from within the Adobe Illustrator. Please note that we still recommend checking the SVG output manually to ensure you have all the correct style section and class attributes set.


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.

Feedback and Knowledge Base