Builder

Builder has two major parts: the panel and the drag'n'drop area. This is how the builder looks like:The builder panel is on the left (by default) and the builder content area is just above the 'add to cart' button.

The builder panel

Day/Night mode

Switch the color of the builder panel. Quite handy to make the panel more contrast in comparison with the theme.

Left/right panel position

Change the side of the appearance of the panel.

View saved content

Exit builder mode and review the single product page.

History of saved content

Only autosave at the moment. It is possible to restore last unsaved changes in the builder content (add/remove modules/options, change their settings)

Product's general settings

Opens product's general settings modal window.

Non Option Variables (NOV) Free | Pro

Opens a modal window with non option variables.

Image conditional logic Pro

Opens a modal window with settings related to_ image conditional logic _functionality.

Weight conditional logic Pro

Opens a modal window with settings related to _weight conditional logic _functionality.

Dimensions Settings Pro

Opens a modal window with settings related to dimensions settings.

Formula conditional logic

Opens a modal window with settings related to formula conditional logic functionality.

Cart discounts Pro

Opens a modal window with cart discounts.

Save builder content button is for saving the builder content. Always do this to apply changes done in settings of modules/options as well as in their order.

⚠️ Important! Changes made in the builder content must be saved by clicking on the green diskette icon. They ARE NOT applied automatically even if you use 'Save to DB?' checkbox in the option settings modal window.

Delete builder content button deletes all the builder content at once. This action cannot be undone.

The builder drag'n'drop area - using the builder

It works like this. Start with adding a row if you do not have any builder content yet. Open the list of basic modules and start dragging the row into builder content area and drop it there. A new row and a column inside this row will be created automatically. You can add more rows if needed. As many as you need it. You can also add more column in that first row just by dragging them and dropping into that row. By having at least one column, you can add any modules/options there. Just drag and drop them into a column.

Hover over a row or a column or any module/option - a compact GUI will be shown over the hovered element. Click on the name of the chosen element and actions icons will be shown. There you can move row/column/module/option to the other place, change their order, open their settings modal windows, duplicate them or simply remove them. They are identical for any builder element.

Moving, duplicating and removing the element actions will be applied to all the nested elements. For instance, duplicating a row with three columns and five modules/options in those columns results in creating a new row with the same number of columns and modules/options which are the exact copies of the duplicated instances. Another example, removing a column with some modules/options results in removing columns as well as modules/options within this column.

Changes in module/option settings will be instantly applied and you will see them in the builder. This way you can use truly live editing mode for your content. You do not need to wait for AJAX calls in order to save to DB after each change. Just hit 'Save' button and changes are applied! :)

However, always and ever save the changes made in the builder content in order to publish them. They will be applied outside the builder ONLY after saving them (clicking on the green diskette in the panel)!