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

# Product Class

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
A Customer's Canvas product.
 
## Methods
  
|  Name |  Description |
| --- | --- |
 |  [addSurface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.addsurface.htm.md) |  Adds the given surface (page) to the product. |
 |  [addSurfaces](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.addsurfaces.htm.md) |  Adds a number of surfaces (pages) to the product. |
 |  [applyProductTheme](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.applyproducttheme.htm.md) |  Applies a color theme to the product. For details, see the [Product Themes](https://customerscanvas.com/docs/cc6/product-themes.htm.md) topic. |
 |  [changeBackground](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.changebackground.htm.md) |  Sets an image or a plain color to the background. |
 |  [getAllItems](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.getallitems.htm.md) |  Lists all design elements in the product. |
 |  [getItemRectangles](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.getitemrectangles.htm.md) |  Gets the bounding rectangles for design elements with regard to their rotation. |
 |  [getTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.gettags.htm.md) |  Reads product tags. |
 |  [getVariableItems](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.getvariableitems.htm.md) |  Lists all variable items in the product. |
 |  [removeSurface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.removesurface.htm.md) |  Removes the given surface (page) from the product. |
 |  [setMockups](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.setmockups.htm.md) |  Sets mockups for several product pages. |
 |  [setSurfaces](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.setsurfaces.htm.md) |  Replaces a product. |
 |  [setTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.settags.htm.md) |  Specifies tags for the product. |
 |  [swapSurfaces](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.swapsurfaces.htm.md) |  Swaps two surfaces (pages) in the product. Returns the product instance where the surfaces (pages) were swapped. |
 |  [switchTo](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.switchto.htm.md) |  Opens the given product surface in the designer. Returns the product with the given surface (page) opened. |
 |  [updateSurfaces](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.updatesurfaces.htm.md) |  Replaces surfaces and returns a new product instance with the updated surfaces. |
 
## Properties
 
### currentSurface
 
currentSurface: [Surface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.htm.md)

A surface (page) currently opened in the editor.
  
 - example
     - ```
editor.getProduct()
    .then(function (product) {
        // Remove the current surface.
        product.removeSurface(product.currentSurface)
            .then(function(result) {
                console.log("Surface removed");
            });
    })
    // If there was an error thrown while removing the surface.
    .catch(function (error) {
        console.error("Removing the surface failed with exception: ", error);
    });
```
 
### id
 
id: string

A unique product identifier.
 
### name
 
name: string

A product name.
 
### surfaces
 
surfaces: [Surface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.htm.md) []

Product surfaces (pages).
  
 - example
     - ```
editor.getProduct()
    .then(function (product) {
        // Get the current surface index.
        const indexOfCurrentSurface = product.surfaces.lastIndexOf(product.currentSurface);
        if (indexOfCurrentSurface < 0)
            throw "Surface not found!";

        let indexOfNextSurface = indexOfCurrentSurface + 1;
        if (indexOfNextSurface > (product.surfaces.length - 1))
            indexOfNextSurface = 0;

        // Switch to the next surface.
        return product.switchTo(product.surfaces[indexOfNextSurface]);
    })
    .then(function(result) {
        console.log("Surface switched");
    })
    .catch(function (error) {
        console.error("Switching the surfaces failed with exception: ", error);
    });
```