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

Setting Up a Product

The Aurigma Personalization Plugin extends the standard product management functionality of nopCommerce. If you want to add an Aurigma-powered product, just create it and set up its title, price, SKU, categories, and other settings. After that, you can use Aurigma Customization Settings to configure the editor.

Enabling the Aurigma Personalization Plugin

You can enable editing for the products through your nopCommerce admin panel by making these changes in the Customization settings panel:

  1. Navigate to Catalog > Products > Edit > Customization settings.
  2. Choose an Editor from the list.
  3. Choose the editor's Config (a set of predefined parameters).
  4. Specify variable attributes if needed.
  5. Click Apply to generate all necessary Specification attributes.

You may notice that this plugin requires different attributes depending on a config, for example, template names or text entry fields. When you fill these attributes in and click the Apply button, the plugin generates new Specification attributes or modifies existing attributes. In the Specification attributes panel, you may notice additional attributes, like names of the editor and config, which are hidden and needed for the plugin to work properly.

The following screenshot illustrates the Design and Mockup attributes for the Phone Cases config.

nopCommerce personalization settings.

To unlink the product from the Aurigma Personalization Plugin, you can remove its attributes or click the Unlink button.

Uploading Designs and Mockups

You may notice that most of plugin configs require you to choose a product design and a mockup image. The Personalization plugin searches for these files on your Customer's Canvas instance. Just place them in the ..\Assets\designs\ and ..\Assets\mockups\ folders respectively, and these files will appear in the drop-down lists.

Product templates in the nopCommerce personalization plugin.

Adding New Products

To add a new product to your nopCommerce site, you need to add a template to Customer's Canvas and enable this template in nopCommerce:

  1. Navigate to Catalog > Products > Add new.
  2. Enter the product name and click the Save and Continue Edit button.
  3. When the Customization settings panel appears, select an Editor and editor's Config.
  4. Specify the required attributes.
  5. Click the Apply button.
  6. Click Preview.

Editors and Configs

Editors are UI Framework-based applications embedded in a product page. You can find an overview of the UI Framework in the corresponding topic. To install a newer version, you can upload it on the Personalization Plugin Editors page or manually copy it to the <Your NopCommerce Folder>\Plugins\Editors\ folder.

Configs are stored in the configs folder of an editor and contain common settings. We supply readymade configs for the most popular scenarios, however, if you are familiar with configuring the UI Framework and Design Editor, you can customize them. For more details about configs, you can refer to the Under the Hood of Editor Configs topic.

Setting Up Options

In terms of nopCommerce, options are the Product attributes representing a user's choice that affects the order, like size, color, etc. For example, you can set up options to toggle the mockup colors.

nopCommerce model of two optional colors.

To implement this, you should add a Product attribute and specify its name in the config file as described in the following topic.


Fonts Do Not Show in the Editor

You have prepared a template but some fonts do not show in the editor.


  1. Put the required fonts in the ..\Assets\fonts\ folder.
  2. Open the Administration panel of nopCommerce.
  3. Navigate to Configuration > Local plugins.
  4. Find the Aurigma Personalization Plugin and click the Configure button.
  5. Click the Reload CustomersCanvas fonts button.

Drop-down Lists Are Empty

The Personalization Settings tab contains empty drop-down lists.


Make sure that the plugin configuration has a valid URL to your Customer's Canvas instance. When you follow this link, the demo application should open in a browser.

Also, compare the ApiSecurityKey parameters in the plugin configuration and the AppSettings.config file of Customer's Canvas. They must be the same.

See Also