With the design editor, you can set separate parameters for the mobile version of your website that will differ from the desktop version. In particular, you can change the order of displaying blocks on the main page, set up different banners for mobile devices, move elements on the product page, etc.

You can customize the design for the mobile version in Website → Design → Design editor → Mobile version.

Here you can customize almost all the same parts of the mobile version as of the desktop one:

In this tab, you can set your own fonts and page backgrounds for the mobile version, as well as add color accents to the drop-down action menu, change the colors of quantity badges in the filter or in the reviews section of the product page.

The header is a through top block that is displayed on all pages of the site. The header for mobile version has a special structure adapted to the needs of a visitor on a mobile device.

You can set the background color, elements color, and one of three options for the header width in pixels.

The mobile header has three equal width sections. In this settings tab, you can disable certain elements of the header, as well as shuffle them between sections (columns) of the header.

The header in the mobile version can contain the most important functional elements that are present on the desktop, namely:

In this tab, you can customize the visual display of the menu and the level of display of nested categories in the catalog menu in the pop-up functional panel.

In the mobile version of the site, the footer has a simplified look. For the footer, you can set the background color, the color of the elements in it, and the color of links — for example, a link to the full version of the site.

In the Homepage block of the design editor, you can see the order of blocks and banners on the homepage of the mobile version of your site. It also shows which of the available blocks are enabled.

You can change the order of blocks and banners on the home page by dragging the blocks to new locations.

You can see the style settings available for the block by clicking on the block's bar — the panel with the settings for the block will expand.

Read more about all the possible homepage blocks in the separate article.

You can add any number of slots for placing banners — banner lines — to the homepage.

To add a new banner line:

Please note: separate banners for the desktop version can be set in Website → Design → Design editor → Homepage.

The banner line will not be displayed on the website until you add the appropriate images in Website → Banners.

For the catalog page in the mobile version, you can set the parameters for displaying the following elements:

On mobile devices, the mini-card doesn't change when you hover over it, so we added options that allow you to change the information on the card specifically for mobile devices.

The product page layout in the mobile version consists of four sections, which you can see in this settings tab. On mobile phones, the sections are placed sequentially one after the other: top, left, right, and finally bottom. On tablets, the left and right sections will be placed side by side.

For the mobile version of the site, you can change the location of groups of elements and individual elements in the page layout by moving the element panels between sections and changing their order, and enable/disable individual elements as needed.