---
title: "addSurface Method"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.addsurface.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# addSurface Method

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
### Callable
 
- addSurface(surface:  [SurfaceTypes](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.htm.md)  |  [IStateSurface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.istatesurface.htm.md), position?:  number ) :  Promise < [Product](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.htm.md) >

- Adds the given surface (page) to the product.
  
 - example
     - ```
    // Let us add a back side to the postcard.
    editor.getProduct()
        // When we get the product.
        .then(function(product) {
            // If postcard has no back side.
            if (product.surfaces.length < 2) {
                   // Adding the back to the loaded product.
                return product.addSurface(
                    { 
                        // Defining the template file.
                        printAreas: [{ designFile: "postcard_side2"}]
                    })
                    // If the back side is added to the postcard.
                    .then(function(newProduct) {
                        // Replace the loaded product with the new one.
                        product = newProduct;
                    });
            }
        })
        // If there was an error while getting the product or adding a back side to the postcard.
        .catch(function (error) {
            console.error("Adding surface failed with exception: ", error);
        });
    ```

#### Parameters

    - ##### surface: [SurfaceTypes](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.htm.md)  |  [IStateSurface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.istatesurface.htm.md) 
  
        A surface (page) to add.
    - #####  Optional position: number 
  
        A position in the surface array where the new surface (page) should be added. The index of the first surface is `0`. By default, this method adds pages to the end of the surface array.

#### Returns Promise &lt; Product &gt;
 
    The product instance where the surface (page) was added.