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, Product attributes.

Placeholders can be displayed in 3 different states according to the 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

Color coding of element types. To improve clarity in more complex section designs, the Designer shows distinct background colors by item type while arranging content.

• Widgets: Light orange. • Attributes: Grey.

This feature is available only in the Designer for Templates and Sections and is designed to make element types easier to recognize at a glance.

Color indicators work alongside the existing placeholder states to signal when positions are available or can accept resized elements.

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 the 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 in the designer workspace, it can be set as the one 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.