Products – List of Product Templates

Product Template is the data that describes how to build the UI for a SKU. For example, a template contains the following information:

  • how many images you need to supply for a SKU
  • what the required sizes are for the supplied images
  • what the coordinates are for placing the images
  • assets (product renderings) used to draw a realistic preview of what the final product would look like with their respective coordinates

The GET producttemplates endpoint takes a single argument:

  • sku - required - the SKU of the product that you are requesting a template for.

This request yields the following response:

{
  "Options": [
    {
      "Name": "string",
      "ImageUrl": "string",
      "IsDefault": "boolean",
      "Category": "string",
      "IsPartnerSpecific": "boolean",
      "Spaces": [
        {
          "Id": "string",
          "Description": "string",
          "Index": "integer",
          "DefaultRotation": "integer",
          "Layers": [
            {
              "Id": "string",
              "Description": "string",
              "Type": "string",
              "ZIndex": "integer",
              "X1": "integer",
              "X2": "integer",
              "Y1": "integer",
              "Y2": "integer",
              "Color": "string",
              "BackgroundImageUrl": "string",
              "OverlayImageUrl": "string",
              "FontName": "string",
              "FontSize": "string",
              "FontHAlignment": "string",
              "FontVAlighment": "string",
              "DefaultText": "string"
            }
          ]
        }
      ]
    }
  ]
}

Parsing the Template Data

The response contains an array of templates.

There is a lot going on here. A few notes on what the fields of a template mean:

  • ImageUrl is a nice icon of the template
  • FinalX1 and Etc. are the coordinates of the image that should be cropped out of the UI and submitted
  • Layers is an array of layers
  • Design layers are ones that include assets to be drawn on the UI
  • Image layers represent where you should allow the user to draw

So once you have a template, in order to draw the UI, one would:

  • create a canvas with a width of the largest X value in the layers and a height of the largest Y value in the layers
  • sort the layers using the ZIndex
  • for design layers, paint the UI
  • set up your drawing to work only within the Image layer coordinates

An example of how to read this information to get a list of required image sizes can be found here.

Next Step: Print Ready Products