Changing product layout

• 3 minutes to read

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 Allow remove on layout change permission (the <ROLC> marker in Photoshop file) to them. By enabling it to text and image placeholders, you allow them to be removed if the new layout does not contain enough appropriate placeholders.

Adding the Layout button

If you have configured the Asset Manager so that it contains PSD files in "PrivateSource", "PublicSource", or "MemorySource", then your users will be able to apply layouts from these sources. The Toolbox supports the default action Layout, which allows your users to open the Asset Manager and apply any PSD file from these sources as a layout. However, in most cases, you will need to fine-tune the sources with layouts.

Now, let's learn how you can configure these sources to enable layouts.

PublicSource

To add layouts to the public gallery, you need to prepare PSD files and put them into a subfolder of the ..\assets\images\ folder. After that, configure an asset source in the clientConfig.json file:

1. Define an asset source.
2. Add a tab for this source to the Asset Manager.
3. Add the name of this tab to the buttons.tabs array of Toolbox.

The following example configures the Toolbox and a public 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": "vertical-layouts" }]
            }
        }
    },
    "widgets": {
        "AssetManager": {
            "tabs": [{
                "name": "Layouts",
                "assetSourceInstance": "Layouts",
                // Specify the appearance of categories.
                "controls": {
                    "categoriesEnabled": false
                }
            }]
        },
        "Toolbox": {
            // Create the Layout button in the Toolbox.
            "buttons": [{
                "translationKey": "Toolbox.LAYOUT",
                "translationKeyTitle": "Toolbox.TITLE_ADD_LAYOUT",
                "iconClass": "cc-icon-layout",
                // Set the Layout action to merge layouts.
                "action": "Layout",
                // Refer to the tab in the Asset Manager.
                "tabs": [ "Layouts" ]
            }]
        }
    }
}

As a result, this Layouts tab will only display PSD files from the vertical-layouts subfolder.

PrivateSource

To enable layouts from the private source, just add "psd" to the allowedExtensions array.

{
    "assetSources": {
        "My files": {
            "type": "PrivateSource",
            "allowedExtensions": [ "jpg", "jpeg", "pdf", "psd" ]
        }
    }
}

This allows you users to upload PSD files.

MemorySource

To provide external layouts, you can specify them using URLs to preview and PSD files.

{
    "assetSources": {
        "ExternalAssets": {
            "type": "MemorySource",
            "rootCategory": {
                "categories": [
                    {
                        "name": "Vertical layouts",
                        "assets": [
                            {
                                "title": "one",
                                "preview": "https://example.com/vertical-layouts/preview/sparce.png",
                                "source": "https://example.com/vertical-layouts/sparce.psd"
                            },
                            {
                                "title": "another",
                                "preview": "https://example.com/vertical-layouts/preview/top-aligned.png",
                                "source": "https://example.com/vertical-layouts/top-aligned.psd"
                            }
                        ]
                    }
                ]
            }
        }
    }
}

As an alternative to changing layouts through the user interface, you can use the IFrame API. For example, refer to the setPrintAreas method to learn how to update a single product page. When you need to change a multipage product, refer to the article Replacing product pages.