Configuring editors for Shopify

• 2 minutes to read

The Customer's Canvas backend is pre-configured for using Shopify. The Setting up products topic illustrates how you can associate PSD templates with Shopify products. When you set up products on the Customer's Canvas backend, you select editors first. This topic describes how editors appear in the Select editor list and how you can configure an editor.

How editors appear in the List

On the backend, you can find installed editors in the \SimplePolygraphy\Editors\ folder. Every subfolder contains an editor. If you want to add a new editor, you need to create a new subfolder in \Editors\ and upload this new version to the created subfolder. If you have some problems with this, please contact our support team.

Every editor has a description in the editor.json file.

{
  "title": "A title of the editor", 
  "name": "internal-config-id",
  "version": "1.1.12",
  "defaultConfig": "photobook.json"
}

Customer's Canvas reads titles in such files and displays them in the drop-down list. For a new editor, make sure that you define all of these fields and have a unique title.

Editors contain sets of predefined configurations in the \configs\ subfolder. In the following section, you can find a config example.

Config example

Each product type, for example, a single-page product or a photobook, requires a separate config file. If you want to create your own config either from scratch or based on another config, make sure that your title describes that this is a new config. The unique title is important when you copy configs from standard editors. Let us see the configuration of photobooks.

{
  "title": "Photobook",
  "name": "photobook",
  "version": "1.1.0",
  "config": {
    "language": "en",
    "productDefinition": {
      "surfaces": {
        "designFolder": "%product.attributes.#attributeNames.folder#%"
      }
    },
    "editorConfig": {
      "initialMode": "Simple",
      "restoreProductOnReloadEnabled": "false",
      "widgets": {
        "FinishButton": {
          "mode": "Disabled"
        }
      }
    },
    "attributeNames": {
      "folder": {
        "name": "Design Folder",
        "settings": {
          "type": "designFolder"
        }
      }
    },
    "steps": {
      "editor": {
        "objectInspectorVisible": true,
        "topToolbarVisible": true,
        "bottomToolbarVisible": true,
        "leftToolbarVisible": false
      },
      "approve": {
        "preview": {
          "width": 500,
          "height": 500
        }
      }
    }
  }
}

This config contains the following sections:

• productDefinition specifies what templates and mockups should apply.
• editorConfig configures the user interface of the editor.
• attributeNames set up product attributes.
• steps define the editing sequence.
• language specifies the language of the user interface.

The product attributes allow you to apply variable items. You can use their names in config files and define a specific value when you set up a product. You can refer to these attributes from any section of your config by using the %...% syntax. When the editor loads a product on a page, it substitutes the content between the percent symbols with an attribute value. As well as product attributes, you can apply the following shortcodes:

• %product.title%
• %product.sku%
• %product.price%
• %product.description%

For more details about product editors, you can refer to the UI Framework topic.