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.

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

It's also possible to add a single 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.

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 be already created.

After a click new window will pop up from where you may choose set 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 from the area).