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

applyProductTheme Method


  • Applies a color theme to the product. For details, see the Product Themes topic.

    // Define a color theme.
    var productTheme = {
        "violet": {
            "C01": "rgb(102,45,145)",
            "C02": "rgb(150,67,214)",
            "C03": "rgb(190,107,255)",
            "C04": "rgb(32,18,77)"
    // Enable the violet theme.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition,
        { productThemes: productTheme, defaultProductTheme: "violet" })
        // If the editor has been successfully loaded.
        .then(function (editor) {
            // Change the color theme.
                "C01": "rgb(241,160,175)",
                "C02": "rgb(255,200,214)",
                "C03": "rgb(255,255,255)",
                "C04": "rgb(224,102,102)"
        // If there was an error thrown when loading the editor.
        .catch(function (error) {
            console.error("The editor failed to load with an exception: ", error);


    • theme: string | IProductThemeConfig

      A name of a color theme defined for the current product or through the clientConfig.json file.

    Returns Promise < void >