---
title: "Interface: IMockupTemplate | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IMockupTemplate/"
---

# Interface: IMockupTemplate

> A structure holding settings to create overlaying and background mockups from PSD templates or raster images.

## Example

``` js
CustomersCanvas.IframeApi.loadEditor(
   iframe,
   {
       surfaces: [{
           mockup: {
               up: "stamp",
               down: "envelope"
           },
           previewMockups: `[{ down: "envelope" }]`,
           printAreas: `[{
               designFile: "envelopeDesign"
           }]`
       }]
   }
);
```

## Extends

- [`IModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IModelComponent.md)

## Properties

### name?

> `optional` **name?**: `string`

A name of a surface (a page) in the product.

#### Remarks

In multipage products, it allows you to use a name mask for product surfaces. If this string contains the `{0}` placeholder, it will be replaced with a page number, starting from `1`. For example, `name: "Page {0}"` specifies the following page captions in the Bottom toolbar: `Page 1`, `Page 2`, and so on.

#### Inherited from

[`IModelComponent`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IModelComponent.md).[`name`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IModelComponent.md#name)

***

### down?

> `optional` **down?**: `string`

A background mockup: the mockup lays below the design template. This property represents a file name without an extension.

***

### up?

> `optional` **up?**: `string`

An overlaying mockup: the mockup lays above the design template. This property represents a file name without an extension.