The product designer will provide a completely innovative experience when enriching product data. Previous PIM solutions for product management and editing have a strong technical user interface. At Ergonode we have set ourselves the goal to make working with the products pleasant and intuitive and to reflect the nature of the product family to the greatest extent possible.

That's why we have created a tool that allows us to design the layout of the product card in a completely innovative way.

How it works?

Using the product designer you can easily design any layout of the product card from scratch.  All you have to do is to drag the attributes from the side menu and throw them into the workspace, then arrange them according to your assumptions and adjust their size by "expanding".

Creating your first product template

To create a product template, expand the "Product design" section and then click on "Product templates".

You will open a section that will list all templates for product families.
Then in the upper right corner click the button "new template". You will see a modal-window for creating a template.

Fill in the name of your product family template. Optionally you can add a picture - this option is very helpful when you will have hundreds of different templates for dozens of product families.

The options in the "Presentation product" section are used to define the correct display of product data in the "gallery" view of the product listing.

Presentation product section defines the correct display of product label and image on gallery view.

Default label attribute - this is the value of the indicated text attribute that you want to be displayed as a signature in the product item.

Default image attribute - is a value of the indicated image attribute which will be displayed as a signature in a product item.

Template Designer Tab

After creating the template, you will see the designer's workspace. Designer workspace is the area with dotted line rectangles. Each rectangle is a placeholder for an attribute.

With simply drag and drop the elements from side menu, you will be able to design the product card layout that best suits the content requirements of your product family.

Placeholders can be displayed in 3 different states according to performed action:

grey – a placeholder is available,
light green – a placeholder is ready for dropping down an attribute,
dark green – a placeholder is available to accept resized attribute.

Do more with widgets

To bring you more flexibility and powerful of your design you can use widgets. For example "Section title" widget gives possibility to divide the layout with text sub-header.

With widgets you can do more e.g. better arrange your product page layout with Section titles.

Managing attributes on the visual grid

Following actions can be performed on the attributes:

move – drag an attribute either from an attribute list or from other position on the matrix and move it over an available attribute placeholder. While hovering it over a chosen location, it illuminates light green if available for dropping down. Attributes taken from the attribute list on the left do not disappear but fade to gray.

remove - open a context menu (three dots) and choose “remove”. On the attributes list, attribute name and icon returns to black color.

resize – grab a bottom right corner on an attribute in order to change its size. Available attribute placeholders will illuminate in light green. Simply resize an attribute to a desired size and drop down to finish.

Setting up the required feature for completeness

On the product template, required attributes are considered to indicate progress bar showing template completeness for selected language.

Those attributes are marked with a red asterisk. To mark attribute as required:
1. click on context menu,
2. select “required” checkbox.

Saving the template

When template is ready after click “save template”. A push notification “template created” is shown on the bottom of the screen.