Product Designer – Creating Product Layers

[
  {
    "parameters": {
      "left": "0",
      "top": "1",
      "scaleX": "1",
      "scaleY": "1",
      "angle": "0",
      "locked": false,
      "originX": "left",
      "originY": "top"
    },
    "type": "image",
    "source": "/assets/images/default/women_tee.jpg",
    "title": "Base"
  },
  {
    "parameters": {
      "left": 290,
      "top": 232,
      "locked": false,
      "colors": "#000000",
      "originX": "left",
      "originY": "top"
    },
    "type": "text",
    "source": "Default Text",
    "title": "Any Text"
  }
]

Instructions:

  • Wrap everything inside square brackets set [].
  • Each curly bracket set {} directly under square bracket set [] represent a product layer.
  • Each product layer has 3 main properties. Each property and its value will be inside quotes “” and separated by colon. There are 3 main properties for each layer;
    • “type”: The type of layer. It can be either “text” or “image”
    • “source”: This is actual value of the layer. It will be a string of text for text layers and an image path for image layers.
    • “title”: Title to identify the layer.
  • Each layer will need some “parameters”. The parameters will be inside their own curly brackets. Here are the available parameters.
    • “left”: Distance from left in pixels.
    • “top”: Distance from top in pixels.
    • “locked”: If true the layer can’t be modified by users until unlocked.
    • “colors”: Available colors for the layer.
    • “originX”: Reference point of “left” parameter. You can leave it to “left” for consistency.
    • “originY”: Reference point of “top” parameter. You can leave it to “top” for consistency.

You can check other available properties here.

X