---
title: "updateSurfaces Method"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.updatesurfaces.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/).

# updateSurfaces Method

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
### Callable
 
- updateSurfaces(params:  [IUpdateSurfaceOptionsByDefinition](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.iupdatesurfaceoptionsbydefinition.htm.md) ) :  Promise < [Product](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.htm.md) >

- Replaces surfaces and returns a new product instance with the updated surfaces.
  
    By default, **updateSurfaces** moves only texts and image placeholders to new positions and drops other design elements. Note that this method changes the content of placeholders having the same layer names on the current [Surface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.htm.md) and in the new layout. To maintain the rest elements, set the **replaceAll** param to `true`. In this case, the rest of placeholders take content in a random order according to their type. If the old layout had more placeholders than the new layout, then extra placeholders are removed.
 
    If the current and the new surfaces have different sizes, you can specify whether to update the surface size to match the new one by using the **updateSurfaceSize** param.
 
    In the following example, we take surfaces `1` and `4` from the specified state file and insert them instead of surfaces `0` and `1` in the loaded product.
 
 - example
     - ```
    var product = await editor.getProduct();
    var options = {
        replaceAll: true,
        definition: "7a6ecf23-1286-4e90-8f18-c7c1c77e3cb0",
        surfaces: [0, 1],
        newProductSurfaces: [1, 4]
    };
    
    product.updateSurfaces(options);
    ```

#### Parameters

    - ##### params: [IUpdateSurfaceOptionsByDefinition](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.iupdatesurfaceoptionsbydefinition.htm.md) 
  
        Additional parameters for changing surfaces.

#### Returns Promise < Product >
 
    A new product instance containing the changed surface.