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, Sections, and 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 help distinguish element types in complex models, the Designer applies a background color to each item by type when placed or dragged in the workspace.

• Sections: Light blue. • Widgets: Light orange. • Attributes: Grey.

This enhancement is available only in the Designer for Templates and Sections and is intended to improve readability and reduce mistakes when arranging larger layouts.

Color coding complements existing placeholder states, which continue to indicate placement availability and resizing behavior.

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 10 ROWS, and a new 10 rows will be added at the bottom of the workspace.

It's also possible to add a single new row in a specific place, to do so left 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 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.

When a section is dropped on the designer workspace, it's possible to assign a completeness set to it.

To do so, hover over the section, and from the kebab menu, click on Assign completeness set. For this to work, a set must already be created.

After a click new window will pop up from where you may choose to assign from the drop-down list.

It's possible to quickly create a new set from this place simply by clicking on + Add new completeness set from the drop-down list. Then set a name for this new set and click on the icon to save.

When the template is ready, click SAVE CHANGES. A push notification will then be displayed at the bottom of the screen.

This kebab menu also has 2 more options: Edit section that will open this specific section in edit mode, and Remove to delete it from the designer workspace (the same can be achieved by dragging the section out of the area).