The header of the mobile version can be customized independently of the header for the desktop version.
Available settings:
Display style: header height, background color, color of icons and badges;
Enable/disable and order of modules in the header.
To change the settings, go to the Website → Design → Design editor section of the admin panel, expand the Mobile version item and go to the Header tab.
Available header components in the mobile version
Header modules
You can enable/disable the display of any of the components available for the site header:
Logotype
Shopping cart
Contact information
Search
Menu
Compare
Favorites
Below are the settings for some header components for the mobile version.
Menu
The site menu in the drop-down sidebar consists of separate modules.
As part of the configuration of this block, you can enable/disable individual modules and change the structure of menu levels.
To configure this component, go to Website → Design → Design editor, expand the Mobile version item and go to the Menu tab.
Logotype
The logo for the mobile version should be uploaded in Settings → General settings → Logo → Logo for mobile site.
The maximum size of the logo for the mobile version is 120×44 px (x2 for Retina).
If the logo for the mobile version is not specified, the header will display the text from the Store title field.
Contact information
The Contact information header component of the mobile version can be configured independently of the settings for contacts in the desktop version header.
Available settings:
Number of displayed phone numbers;
Display of messengers (skype, telegram, viber, whatsapp)
Display of the callback request button
To set up this a component, contact our support team.
Examples of header settings
You can set up the height of the header and the order in which the components are displayed. Below are some examples of headers with different arrangements of components.
S height
M height
L height
Each of the modules can be placed on the left, right, or center of the header by dragging them to the appropriate columns in the design editor.
Examples of modules positions in the header