In the design editor, you can change not only the appearance and order of product page elements, but also define its structure — the number of columns in the layout.
The product page is set up in Website → Design → Design editor → Product page.
Visual style
Here you can define a page layout template and set the color and visual appearance of component groups on the page.
Page template — you can choose one of two possible options for the columns layout: 2 columns or 3 columns. This setting determines the order of the page sections that you see in the Page layout tab. A tooltip with a schematic representation of the section layout has been added to the setting.
2 columns | 3 columns |
| 
|
Columns
These settings are available only when you select the 2 column template. In this case, you can set the ratio of column widths to each other, as well as set the minimum width of each column in pixels.
Examples of setting the proportion of a 2 column template
No components in the upper group | L 1/3 - R 2/3 ratio | L 2/3 - R 1/3 ratio |
| 
| 
|
Component groups
A group is several components that are combined into a common block on the product page. In each group, the components can be displayed sequentially one after the other (with or without a separator) or can be combined into tabs.
An example of a group combined into tabs
Page layout
In this settings tab, you will see a schematic display of sections on the product page, which depends on the template selected in the Visual style.
Each section displays groups of components that are located in it. You can move components both within a group and to other groups. You can also change the order in which groups are displayed in a section, or move a group between sections.