Guide for the web designer for displays

or right click design version in cloud



After accessing the URL the user is met with the login page

User will add username credentials and click “Get started”


The system will now try the combination of the username and password on the various cloud systems:

(Delfi own and private clouds)

  • DEMO
  • Prod1
  • Prod2




Login step2:

After checking accessibility on the various systems the user now get a list of the systems the user has access to.

If user has been logged on before then the user needs to state if he/she wants to continue the last session or start over.

User will select system, installation group (this can be skipped), installation.

The user now needs to either open existing design from cloud or from local storage or create a new design.

When opening existing design from cloud – version must also be selected.

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


Create new (Package name is optional):

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


Open existing (User needs to select a local JSON file (new design) or BDM file (old design/keyframe file)

Entering the Editor (overview)



- Create Elements bar: Crete various elements by clicking and draw in canvas area.

- Quick properties bar: Change to most common properties here

- Elements list: List of the elements added to the design

- Element properties area: Here all the properties of the single element can be changed

- Preview: After adding elements to the canvas area it is possible to see how it would look like with product data.

- Upload to cloud: By entering the menu it is possible to upload the design to cloud and make it work on displays.

- Layouts list: List of possible layout to be designed (The list is configured in cloud under “Definitions”).

Upload to cloud:

Here can download the keyframe file (BDM file) to local storage.

Upload the design and keyframe file to installation.

Upload the design and keyframe file to installation group.

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


The user can choose to publish upon upload.

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


File -> Save (Top left)


Stretch and align the textbox


Open new layout:

When creating/opening a design the designer will open the default layout for Chroma21.

To open other layouts to make design for them then the user must click “Design” and open the wanted layout:

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


Text Element:


Autosize: the user can select between Autosize font or Autosize Box

Autosize font will make sure the text will keep inside the box. If more text the smaller font is added the text. Autosize box will resize the box so it matches the text.

If auto size font is used and Priceformat is enabled then the user can use the autosizefont factor.

Using a decimal from 1-3.9 will change the superscript hight in comparison to the whole number price.

The larger the factor the smaller the superscript  

When assigning a product value to a text element:

It is possible to change the format (if input variable is a price)

and/or make advanced value where the user combines static text and variables from product.

Et billede, der indeholder tekst

Automatisk genereret beskrivelse


Make condition (Dependency) to element:

Here you can make the element show only if a certain condition is met.

e.g. only show former price if an on-sale price is present.

Shadow Effect

It is possible to add shadow effect to elements. This is done by selecting the desired element with a text/number value and setting the shadow color, shadow adjustment and shadow placement on the left pane.

To remove the shadow effect, choose the transparent color.

The price has shadow effect, see picture below:


Barcode and QR code:


Et billede, der indeholder tekst 
Automatisk genereret beskrivelse


When user creates a barcode then the user can select from the dropdown what type of barcode it needs to be.




Use the preview function to see how the design would look on a display.

Preview can be found in the top right corner of the editor



After opening the preview the system will automatically auto fill the products with products from the installation on cloud.

The number of product is determined by the opened layouts. If some layouts are expecting multiple products (e.g. dual layout) then the system will show that.

The user can search for other product and change the input product(s). Just like when assigning products to display.

The designer will load the values of the product into the preview function. If the user wants to change some values (e.g. to trick some functionality) – then the user can do the in the Data section.


Et billede, der indeholder tekst

Automatisk genereret beskrivelseAfter clicking “OK” the preview will be presented. The user can toggle between the opened layouts at the bottom of the preview.