Designer

It's the place where you can design your product catalog page simply by using the drag and drop method.

There are 3 main components of a template; Widgets, and Product attributes.

Widgets are built and cannot be managed in any way.

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 attributes

The following actions can be performed on attributes:

• move – drag an attribute either from an attribute list or from another 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 kebab menu (three dots) and choose “remove”. On the attributes list, the attribute name and icon color switch back to black.

resize – grab the bottom right corner of 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.

If you need more space on the designer workflow click on + ADD ROW and a new row will be added at the bottom of a workspace.

It's also possible to add a new row in a specific place, to do so left click on the dotted line, and the + Add row button will appear. Click on it to add that extra row under that specific line.

When an attribute is placed on the designer workspace it can be set as the one being required. Required attributes are used to indicate progress showing the template’s completeness for the selected language. Those attributes are marked with a red asterisk.