---
title: "Product definition examples | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/product-definition/examples/"
---

# Product definition examples

> You may load different kind of designs - PSD/IDML template, regular static image, blank design or even a [state file](https://customerscanvas.com/docs/on-premises/design-editor/concepts/state-files.md) created by the user or published in a master user folder. Let's consider all these scenarios.

## Different types of designs

### Importing a PSD Template

Let us assume you have a file named stamp.psd. You should put it into the **..\\assets\\designs\\** folder, which contains all PSD and IDML templates, and use the following JavaScript.

```js
// An iframe where CustomersCanvas editor should be loaded.
let iframe = document.getElementById("editorFrame");
// Specify the PSD name here (without the extension).
let productTemplate = { surfaces: ['stamp'] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    productTemplate,
    config
);
```

### Importing a multipage IDML Template

Loading IDML files is quite similar to PSD, however, if it is a multipage file, you can avoid listing each surface by using the following code (note, it works only with IDML!).

```js
// An iframe where CustomersCanvas editor should be loaded.
let iframe = document.getElementById("editorFrame");
// Specify the IDML name here (without the extension).
// You may put it to subfolders.
let productTemplate = {
    surfaces: {
        file: 'folder1/my-indesign-template' 
    }
};
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    productTemplate,
    config
);
```

### Loading a Rasterized Image as a Background

If you have an image, you can load it into the editor as a background. The image can be a **.png**, **.jpg**, or **.jpeg** file. For example, to load **SummerPhoto.jpg**, put it into the **..\\assets\\designs\\** folder and use the following JavaScript.

```js
// Specify the image name here (without an extension).
let backgroundImage  = { surfaces: ['SummerPhoto'] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    backgroundImage,
    config
);
```

### Opening a Blank Product

Now, let us create a template for an 800x600 product from scratch.

```js
// Specify the empty product size, in points.
let emptyProductDefinition  = { surfaces: [{width: 800, height: 600}] };
// Specify the user ID (in our case, masteruser, to make our template public automatically).
let config = { userId: 'masteruser' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    emptyProductDefinition,
    config
);
```

### Loading a Template from a State File

To load a state file, you need to specify an identifier of the user who created this state. The Design Editor looks for the state in the state folder of this user.

```js title="Loading a State File"
let iframe = document.getElementById("editorFrame");
// Specify a state file name to load a product.
let stateId = "ee9293bc-c887-433d-a5bd-454888f07a8a";
// Pass an identifier of the user who created this state, in the editor config.
let config = { userId: 'JohnWood' };
// Load the Design Editor.
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    stateId,
    config
);
```

When a state file represents a multipage product, you can create a new product by using certain pages from this state file.

```js title="Loading a Multipage State File"
let productDefinition = {
    // Create a product based on a page from a state file.
    surfaces: [{
        // Specify a state file name.
        stateId: "ee9293bc-c887-433d-a5bd-454888f07a8a",
        // Select the second surface.
        surface: 1
    }]
};
let config = { userId: 'JohnWood' };
CustomersCanvas.IframeApi.loadEditor(
    iframe,
    productDefinition,
    config
);
```