Skip to content

LiveArt HTML5 Product Designer v1.0.0 Migration Guide

LiveArt HTML5 v1.0.0 supports the same configuration files as LiveArt v0.10.* branch, published and available on

Please note the following differences between the versions.


  1. The designs, saved under 0.10.* version of the designer, are no longer compatible with 1.0.0. Any templates and designs have to be recreated respectively.
  2. 1.0.0 version uses Cufon fonts only, thus requiring Cufon font preparation.
  3. The colorizable producs and gallery artwork, prepared for 0.10.* version may not be compatible with 1.0.0 (see migration guide below).
  4. By default, we deprecated adding a stroke to one-color images.
  5. Canvas size changed from 587×543px to 590×530px.
  6. By default, the canvas is responsive.

Deprecated, removed, and unsupported configuration properties:

Main configuration file:

  1. config.options.includeProductInDesign - deprecated;
    • This feature was moved to production output microservice;
    • Update production output config file services/config/output.json with the includeProduct property.
  2. options.includePrintingAreaInDesign - deprecated.
  3. options.includeMaskInDesign - deprecated;
    • Mask now acts as part of the product - see config.options.includeProductInDesign;
  4. options.deleteOnDoubleClick - deprecated.
  5. options.checkTextFXThrottle - deprecated.
  6. options.fitProductImage & options.fitEditableArea - deprecated;
    • v1.0.0 works like these properties are set to true.
  7. options.hideDesignIdeas - deprecated;
    • Pass an empty value in getTemplatesUrl instead.
  8. options.showSuitableProductColorize - deprecated.
  9. options.mergeDesignIdeas - not supported yet.
  10. options.enableSnapGuides - replaced with options.snapConfigs.enableSnapGuides.
  11. options.defaultUnit & options.secondaryUnit - replaced with options.unit, options.unit2, options.unitConversionMult (more info here).
  12. options.zoomEnabled, options.minZoom, options.maxZoom, options.zoomStep - replaced with options.zoomConfigs.enabled, options.zoomConfigs.min, options.zoomConfigs.max, options.zoomConfigs.step.

Product configuration file:

  1. products.restrictions - should be removed (not supported).
  2. products.colorizableElements.hidePantones - should be removed (not supported).
  3. categories.thumbUrl - replaced with categories.thumb.
  4. products.colorizableElements[].id - replaced with products.colorizableElements[].query with valid element id (e.g. "#body") to apply the fill.

Graphics configuration file:

  1. graphics.multicolor - property changes are ignored use graphicsList.colorize instead.
  2. graphics.colorize - indicates the ability to change graphics image(area) fill (both single and multicolor). By default - true, previous default value - false.
  3. graphics.colorizableElements.hidePantones - deprecated.
  4. graphics.colors accepts an array of hex values only the previous version also accepted strings and numbers, which caused major issues for the integrators.
  5. categories.thumbUrl - replaced with categories.thumb.
  6. graphics.colorizableElements[].id - replaced with graphics.colorizableElements[].query with valid element id (e.g. "#body") to apply the fill.

Services changed:

  1. Request/Response changes:
    • application/x-www-form-urlencoded Content-Type in all services - replaced with application/json.
    • { "data": { ...request content } } property in saveDesign request - replaced with { ...request content }.
    • name property in saveTemplate - replaced with title.
  2. Data payload of the POST requests - sent in body (refer to point 1), not as query params.
  3. Services should pass version (X-LA-Service-Version) in header.
  4. Configs.php changes:
    • $LAJS_FOLDER_PATH = "../" - replaced with $LAJS_FOLDER_PATH = "../../"

Premade Templates and Design Idea migration:

Refer to the respective guide

Multicolor graphics/products migration:

  1. Simple (Using Ilustrator):
    • Pros: requires minimal steps, graphics may be processed as a batch;
    • Cons: layer names will be replaced with "Color 1", "Color 2", etc.

    1. Open image in Illustrator and re-save with the next options: sample;
    2. Set "parseColorAreas": true in the configuration for this image;
    3. Remove colorizableElements in the configuration for this image.

  2. Advanced (sample for steps below):
    • Pros: keep the same layer names;
    • Cons: requires processing of each file separately (may be automated).

    1. Reconfigure colorizable layers inside SVG:
      1. Replace class with id.
      2. Add fill attribute with default color instead of <style>
    2. Config changes:
      1. Replace "multicolor": true with "colorize": true in the configuration for this image;
      2. Replace with colorizableElements.query
      3. Set id configured from class inside SVG as a value for colorizableelements.query.

Feedback and Knowledge Base