--- title: "Under the Hood of Editor Configs" canonical: https://customerscanvas.com/docs/cc4/configuring-personalization-plugin.htm archived: true applies_to: - product: "Customer's Canvas On-Premises" - product: "Design Editor" versions: ["4.4.25", "4.x (may differ)"] --- **You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/). # Under the Hood of Editor Configs **Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation** The [Setting Up a Product](https://customerscanvas.com/docs/cc4/configuring-nopcommerce-products.htm.md) topic illustrates that the field list on the **Personalization Settings** tab may change when you select an editor or a config. You may have further questions related to this: what are the configs, how to make a config, how to display other parameters, and so on. This topic dwells on these questions. ## How Configs Appear in the List The Aurigma Personalization Plugin looks for the editors in the `\editors\` folder. Every subfolder of this folder contains an editor. If you want to add a new version or modify your current editor, put a new folder with that version in `\editors\`. After that, the new editor will appear in the corresponding drop-down list on the **Personalization Settings** tab. An editor contains a description in the `editor.json` file and a set of predefined configurations in the `\configs\` subfolder. ``` { title: "The config title for Personalization settings", name: "internal_config_id", version: "1.0", config: { /* the configuration itself as explained further */ } } ``` The plugin reads titles in such files and displays them in the drop-down list. If you want to create your own config either from scratch or based on another config, make sure that you define all these fields and your title describes that this is a new config. The unique title is important when you copy configs from standard editors. Note that configs are always bound to an editor. If you install a newer editor, do not forget to transfer your customized configs to it. Now that we know how the Personalization plugin forms the editor list and how you can add your own config to it, let us have a look at a config example. ## The Config Example For example, let us see the following configuration of a single-page product. ``` { "title": "Single Page Products", "name": "single-page", "version": "1.1.0", "config": { "productDefinition": { "surfaces": [ "%product.attributes.#attributeNames.frontTemplate#%" ] }, "editorConfig": { "canvas": { "rulers": { "enabled": false } }, "preloader": { "enabled": false }, "initialMode": "Simple", "restoreProductOnReloadEnabled": "false", "widgets": { "FinishButton": { "mode": "Disabled" } } }, "attributeNames": { "frontTemplate": { "name": "Template", "settings": { "type": "design" } } }, "steps": { "editor": { "objectInspectorVisible": true, "topToolbarVisible": false, "bottomToolbarVisible": true, "leftToolbarVisible": false, "canvasBorderVisible": false, "contentShadowVisible": true, "canvasAlign": "centertop", "showPrice": "false", "fillItems": "warning" }, "approve": { "preview": { "width": 500, "height": 500 } } }, "language": "en" } } ``` This config contains the following sections: - **productDefinition** specifies what templates and mockups should apply; you can find examples of this definition in the [Mockups](https://customerscanvas.com/docs/cc4/mockups.htm.md) topic. - **editorConfig** configures the user interface of the editor according to the [following specification](https://customerscanvas.com/docs/cc4/client-config.htm.md). - **attributeNames** binds variable fields to the **Specification attributes**. - **steps** define the editing sequence described in the [Introducing Editors](https://customerscanvas.com/docs/cc4/product-editors.htm.md) topic. - **language** specifies the language of the user interface. The [Introducing Editors](https://customerscanvas.com/docs/cc4/product-editors.htm.md) topic describes how to configure the editors in detail with examples. If you have any questions or problems with it, please contact the Aurigma [support team](mailto:info@aurigma.com). ## Variable Fields In the simplest case, you can define all the properties in the config, including names of design templates, but you have to create a separate config for each product, which differs by just one line - the template name. This is a laborious approach, especially if you have a lot of products. To resolve this, we added the possibility to make variable fields for your products. ![Variable attributes in the nopCommerce personalization plugin.](https://customerscanvas.com/docs/cc4/images/nopCommerce_Attributes.png) To apply these variable fields, define the **attributeNames** section. ``` "attributeNames": { "frontTemplate": { "name": "Template1", "settings": { "type": "design" } }, "backTemplate": { "name": "Template2", "settings": { "type": "design" } } } ``` Here, **name** is a specification attribute name, and **settings** defines a type of this attibute: - **design** - the drop-down list containing PSD templates from the `\ProductTemplates\designs\` folder. - **mockup** - the drop-down list containing mockups from the `\ProductTemplates\mockups\` folder. - **desingFolder** - the drop-down list containing subfolders with designs. - **mockupFolder** - the drop-down list containing subfolders with mockups. - **list** - the list of **settings.values**, for example: `"values": ["album", "portrait"]`. - **text** - the text input. - **number** - the text input for numbers, you can define the **settings.min** and **settings.max** values for such an attribute. Now, you can refer to these attributes from any section of your config by using the **%...%** syntax. ``` "productDefinition": { "surfaces": [ "%product.attributes.#attributeNames.frontTemplate#%", "%product.attributes.#attributeNames.backTemplate#%" ] } ``` When the editor loads a product on a page, the Personalization plugin substitutes the content between the percent symbols with an attribute value that is specified in **attributeNames**. ## More About the %...% Syntax The previous example illustrates how you can refer to specification attributes of a product. Also, you can apply the following shortcodes: - **%product.title%** - **%product.sku%** - **%product.price%** - **%product.description%** - **%product.attributes.Specification Attribute%** where **Specification Attribute** is a name of a specification attribute. Unlike the previous use, it does not display fields on the **Personalization Settings** tab, instead it just reads the value that you type in on the standard **Specification Attributes** tab. You may use this approach if you have a file name convention - e.g. if you know that all your PSD files include an SKU in their file names, there is no need to choose a template on the **Personalization Settings** tab manually. However, in this case, you take responsibility for the integrity of your PSD design folder yourself. ## See Also ### Manual - [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc4/integration-with-e-commerce.htm.md) - [Introducing Editors](https://customerscanvas.com/docs/cc4/product-editors.htm.md)