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

setMockups Method


  • Sets mockups for several product pages.

    var newMockups = [
            surface: product.surfaces[0],
            mockup: null
        }, {
            surface: product.surfaces[1],
            mockup: { up: "mockup1" }
        }, {
            surface: product.surfaces[2],
            mockup: { up: "mockup2" }
    var options = { 
        addToHistory: false,
        resetHistory: true,
        updateSurfaceSize: true
        .then(function (product) {
            product.setMockups(newMockups, options)
            .then(function (product) {
                console.log("Mockups are successfully set for the product " +;
        .catch(function (error) {
            console.error("Failed to set up the mockups: ", error);


    • mockupsData: IMockupData []

      The product surface with mockups and preview mockups.

    • Optional options: object

      Mockup additional configuration.

      • Optional addToHistory: boolean

        If true, adds a new user action to the history to allow your users to revert new mockups by using the Undo button. If false, will not add a single action to the history, because of that the mockup can be reverted together with the following user action. The default value is true.

      • Optional resetHistory: boolean

        If true, resets the history of user actions after changing the mockups. The default value is false.

      • Optional updateRevertData: boolean

        If true, the new mockup is stored as one to restore when the product is reverted. Otherwise, the previously stored mockup is restored on a product revert. The default value is true.

      • Optional updateSurfaceSize: boolean

        If true, changes the surface size to match the new mockup. If false, the surface size remains unchanged. The default value is false.

    Returns Promise < Product >

    A new product instance containing the changed surfaces.