---
title: "Product Layouts"
canonical: https://customerscanvas.com/docs/cc6/product-layouts.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 Layouts

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
In the context of the Design Editor, a product layout is a PSD file containing text, image placeholders, shapes, and other design elements. Your users can change layouts at runtime. To rearrange design elements on the canvas, you can just open a PSD template in the **Asset Manager**.
 
## Applying the Product Layouts
  
When changing layouts, the Design Editor only moves text and image placeholders to new positions and removes other design elements from your product by default. The Design Editor changes layouts in the following way:
 
1. Saves the content of text elements and image placeholders of the current product page.
2. Removes design elements that are not prohibited from being deleted by markers.
3. Pastes elements of the new layout into the current product page.
4. Pastes the saved content into the new placeholders.

First, the Design Editor changes the content of placeholders having the same layer names in the current page and in the new layout. After that, the rest of the placeholders take their 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.
 
The background and foreground layers, marked with `<FG>` or `<BG>`, remain unchanged. If you need to keep the position and content of design elements, apply the `<ROLC_f>` marker to them. By applying the `<ROLC_t>` marker to text and image placeholders, you allow them to be removed if the new layout does not contain enough appropriate placeholders.
 
## Adding the Layout Tab
  
To open layouts in the **Asset Manager**, you need to prepare PSD files, add them to a subfolder of the `..\assets\images\` folder, and configure an asset source in the `clientConfig.json` file.
 
The **Toolbox** supports the default action **Layout**, which allows your users to open the **Asset Manager** and apply any PSD file as a layout. However, in most cases, you will need to fine-tune a source with layouts. The following example configures the **Toolbox** and an asset source so that they contain only the required **Layouts**.
 
```
{
    "assetSources": {
        "Layouts": {
            "type": "PublicSource",
            // Display only PSD files.
            "allowedExtensions": [ "psd" ],
            "rootCategory": {
                // Specify a folder in ../assets/images.
                "name": "Layouts",
                // Specify a subfolder containing the layout templates.
                "categories": [{ "name": "VerticalLayouts" }]
            }
        }
    },
    "widgets": {
        "Toolbox": {
            // Create the Layout button in the Toolbox.
            "buttons": [{
                "translationKey": "Toolbox.LAYOUTS",
                "translationKeyTitle": "Toolbox.TITLE_LAYOUTS",
                "iconClass": "cc-icon-layout",
                // Set the Layout action to merge layouts.
                "action": "Layout",
                // Refer to the tab in the Asset Manager.
                "tabs": [ "Layouts" ]
            }]
        },
        "AssetManager": {
            "tabs": [{
                "name": "Layouts",
                "assetSourceInstance": "Layouts",
                // Specify the appearance of categories.
                "controls": {
                    "categoriesEnabled": false
                }
            }]
        }
    }
}
```
 
As a result, this **Layouts** tab will only display PSD files from the **VerticalLayouts** subfolder.
 
As an alternative to changing layouts through the user interface, you can use the IFrame API. For details, refer to the [setPrintAreas](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.setprintareas.htm.md) method.
 
## See Also
  
### Manual
 
- [The Asset Manager](https://customerscanvas.com/docs/cc6/asset-manager.htm.md)

### IFrame API Reference
 
- [IToolboxConfig](https://customerscanvas.com/docs/cc6/customerscanvas.baseeditor.configuration.ui.itoolboxconfigparsed.htm.md)
- [setPrintAreas()](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.setprintareas.htm.md)