Layout

This section includes general settings for changing the page layout of the entire store.

To change the page width according to your preferences, activate the "Enable page width" option.

Then, set the desired width from 1000 to 1800 pixels on the "Page width" scale. The "Icons menu" will be shown eight items in a row from 1000 to 1300 pixels. The maximum number of menu items displayed in a row on the desktop view for the "Icons menu" is twelve items. The theme design allows displaying 12 icons per line with a specified width of 1400 pixels or more.

Show announcement bar

Tick the checkbox to display the Announcement bar at the very top of a page. The same bar will be displayed throughout the store. Read details on how to set up the section here.

To add the navigation steps and show the user's location on the online store, activate the "Show breadcrumbs" checkbox. The breadcrumbs will be shown on the top-left of pages.

Control the top and bottom spacing of the breadcrumbs in the corresponding sliders from 0 to 50 pixels.

Note! The header options described below can be used on the desktop view only!

Type on large screens

These settings allow changing the feel and look of the Header section. Choose one of the pre-design types in the drop-down: "In one line, logo left"; "In one line, logo center"; "In one line, logo and menu left"; "In two lines, logo left"; "In two lines, logo center".

In the following examples, you can view each of the header types:

Note! The sticky header works on all pages except for the "Products" and "Collections" pages.

Use the options described below to configure the sticky header appearance on the desktop view.

In the "Type" drop-down, one can specify whether to display the sticky header while scrolling down or up from the bottom of the page by selecting one of the required options:

  • "Full section". This option ensures the whole header is displayed according to the header type used in the "Type on large screens" drop-down.

  • "Text menu". Use the option to display the Secondary navigation menu with the Logo in the sticky header, avoiding showing the Icons menu.

  • "Icons menu". Unlike the previous option, this setting shows only the Icons menu in the sticky header.

If you want to add a logo scaling below the header before scrolling down or to the very top of a page, use the options below. If you are using the following settings, make sure that the "Show picture logo" option is enabled in Theme settings -> Logo.

Note! The full-width logo feature works only on the Home page.

Using this option changes the header type on the main page.

  • "Full section with fullwidth logo". Let you display the whole header in a sticky mode according to the header type used in the "Type on large screens" drop-down.

The "Full section with fullwidth logo" can be viewed on the DEMO.

  • "Text menu with fullwidth logo". Choose the option to get the sticky header for the Secondary navigation menu and the logo animation.

To hide the sticky header, use the "Disable" option.

Enable on mobile

Activate the option to use the sticky header on mobile.

Hide sticks header when scrolling down

This option disables the sticky header when scrolling down on all screen sizes. However, the feature still works on scrolling up.

Enable "Back to top" button

Use the option to add the button at the very bottom of a page in the entire store. Visitors can be moved to the top of a page after clicking the "Back to top" button.

Last updated