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.
Note: settings for the mobile version are made independently of the desktop version in the section Website → Design → Design editor → Mobile version
→ Product page.
Visual Style
Here you can define the page layout template and set the color and visual appearance of component groups on the page.
Page template — choose one of two possible column layout options on the page: 2 columns or 3 columns. This setting determines the order of the page sections, which you will see in the Page structure 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 selecting the 2 columns template. In this case, you can set the width ratio of the columns to each other, as well as set the minimum width of each column in pixels.
Examples of 2-column template proportion settings
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 on a page that are combined into a common block on the product page. In each group, components can be displayed sequentially one after another (with or without a separator) or be collected in 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.
Components, after the name of which contains the symbol >, can be additionally configured — to do this, click on the name.
Product image and gallery — you can change the size of the photo, enable or disable the display of stickers and logos, move the thumbnail gallery.
Page heading — you can change the size, enable and disable additional elements (breadcrumbs, availability, rating), change the position of the SKU relative to the title.
Note: if the field SKU for display on the site is filled in for the product, then instead of SKU, the value from this field is displayed.
Price — you can display or hide the availability of the product, manage the Favorites and Comparison icons.
Product variant — you can customize the appearance of variant switches by color and other parameters.
Buy buttons — you can enable and disable the product quantity counter and the purchase on credit button.
Product set — you can change the position of product images within the block.
Promotion countdown — you can customize the color of the timer, text, and background.
Attributes(Characteristics list) — you can customize the style of attribute display on the product page.
Description — you can collapse or expand the product description.
Reviews — you can set the number of reviews displayed on the product page.
Products with similar attributes(characteristics), Products from the category, Accessories — you can display or hide the Buy button next to the products.
