In the design editor, you can change not only the appearance and order of elements on the product page in the desktop version but also determine its structure — the number of columns in the layout.
Product page settings are done in Online store → Design → Design editor → Product page.
Note: settings for the mobile version are made independently of the desktop version in the section Online store → Design → Design editor → Mobile version of the site → 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 schematic image of the section layout is added as a hint 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
Without components in the top block | Ratio L 1/3 - R 2/3 | Ratio L 2/3 - R 1/3 |
| 
| 
|
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.
Example of a group combined into tabs
Page Structure
In this settings tab, you will see a schematic display of sections on the product page, which depends on the template chosen in the Visual Style of the page.
In each section, component groups that are located in it will be displayed. Components can be moved both within the group and to other groups. You can also change the display order of groups in the 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 photo and gallery — you can change the size of the photo, enable or disable the display of stickers and logos, move the thumbnail gallery.
Title — 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.
Select product variant — you can customize the appearance of variant switches by color and other parameters.
Purchase 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 — 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, Products from the category, Accessories — you can display or hide the Buy button next to the products.
