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

This request yields the 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