API Documentation
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 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 templateFinalX1
, etc is the coordinates of the image that should be cropped out of the UI and submittedLayers
is an array of layersDesign
layers are ones which include assets to be drawn on the UIImage
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.