This is an old documentation. Go to the latest Customer's Canvas docs

updateSurfaces Method


  • 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 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.

    var product = await editor.getProduct();
    var options = {
        replaceAll: true,
        definition: "7a6ecf23-1286-4e90-8f18-c7c1c77e3cb0",
        surfaces: [0, 1],
        newProductSurfaces: [1, 4]


    Returns Promise < Product >

    A new product instance containing the changed surface.