Discover the power of the Product Designer

The product designer will provide a completely innovative experience while enriching product data. Typical PIM solutions for product management and editing have user interfaces that require advanced technical knowledge and are difficult to learn and use. Our goal at Ergonode is to make working with products simple and intuitive while making the reflection of the nature of a product family to its fullest extent as effortless as possible.

For that reason, we have created a tool that allows for the design of the layout of a product card in a completely innovative way. How does it work? Using the Product Designer, you can easily craft any layout of a product card from scratch. All you have to do is to drag the attributes from the side menu and drop them into the workspace, then arrange them according to your desired setup 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".

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

Fill in the name (code) of your product family template. Optionally you can add a picture - this option is very helpful in situations where you 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.

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 a template, you will see the designer's workspace. The designer workspace is the area with dotted line rectangles. Each rectangle is a placeholder for an attribute.

You can design the product card layout that best suits your content requirements by simply dragging and dropping elements from the side menu into the workspace.

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 more flexibility and power to your design you can use widgets. For example, the "Section title" widget gives the possibility to divide the layout with a text sub-header.

Managing attributes on the visual grid

The following actions can be performed on 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, the attribute name and icon color switches back to black.

• 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 the desired size and drop it down to finish.

Setting up the required features for completeness

On a product template, required attributes are used to indicate progress showing the template’s completeness for the selected language.

Those attributes are marked with a red asterisk. To mark an attribute as required simply click on the context menu and select the “required” checkbox.