API Documentation

Listing Product Templates for a SKU

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

  • how many images does one need to supply for a SKU
  • what are the required sizes for the supplied images
  • coordinates where to place 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 for which you are requesting the templates

Here is an example for getting list of templates for a given SKU:

This request yields following response:

{
  "Options": [
    {
      "Spaces": [
        {
          "Id": "22CB8",
          "Index": 1,
          "Layers": [
            {
              "Id": "273C9",
              "Type": "Design",
              "ZIndex": 0,
              "X1": 0,
              "X2": 1161,
              "Y1": 0,
              "Y2": 1683,
              "BackgroundImageUrl": "https://az412349.vo.msecnd.net/product-phonecases/Backgrounds/PhoneCase-Nexus5-Matte_BackV1.png",
              "IncludeInPrint": false
            },
            {
              "Id": "29FFB",
              "Type": "Image",
              "ZIndex": 1,
              "X1": 0,
              "X2": 1161,
              "Y1": 0,
              "Y2": 1683,
              "IncludeInPrint": true
            },
            {
              "Id": "E5BD9",
              "Type": "Design",
              "ZIndex": 2,
              "X1": 0,
              "X2": 1161,
              "Y1": 0,
              "Y2": 1683,
              "OverlayImageUrl": "https://az412349.vo.msecnd.net/product-phonecases/PhoneCase-Nexus5-Matte_Overlay.png",
              "IncludeInPrint": false
            }
          ]
        }
      ],
      "Name": "Single",
      "ImageUrl": "http://app-imgs.print.io/product-phonecases/PhoneCase_Nexus5_Glossy_Single_V2.png",
      "IsDefault": true
    }
    [...]
  ]
}

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, etc is 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 which 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, 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 coords

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

Next Step: Getting Shipping Price Estimates