Theme Helpcenter

Documentation

Header

Header.png

About:

The header is one of the main components in your store. It is shared among all of the pages along with the content you wish to display, containing some of the most important elements in your store such as the navigation, cart, search, language selector, and so on.

Header settings:

Layout: Logo centered / Navigation centered / Logo and navigation aligned to start

Enable sticky header: On / Off

Borders for navigation elements: On / Off

Note: Allows you to add borders to the inward-facing edges of the first and last element.

Enable navigation drawer layer: On / Off

The show/hide feature is added to the third level menu elements in the navigation drawer

Logo settings:

Logo: Select your logo image from this option.

SVG Code: If you wish to have additional customization options, we recommend uploading your logo as an SVG rather than using it as a normal file

Note: The SVG code will overwrite the logo image

Max desktop width: Select between 50 and 200 px.

Max mobile width: Select between 50 and 200 px.

Note: This only works when a logo image or SVG are used. It will not work for text logos

Logo font size: Select between 0.5 X and 4 X

Note: This option works only for text logo

Transparent header:

Important note: The transparent header requires that the first section of the home page and collection page have good contrast with the transparent header.

Enable for home page: On / Off

Enable for collection page: On / Off

Show bottom border: On / Off

Logo for transparent header: Please keep in mind to use a different color than the regular logo you use.

Country drawer:

Enable in header: On / Off (this will appear with the utilities)

Enable in navigation drawer: On / Off (to be used only with the drawer navigation).

Utilities link display: Icon / Text / Icon with text

First and Second additional links:

The settings for these two links are identical, therefore, they will only be mentioned once:

Note: The links will be found in the main navigation or utilites depending on the layout you've selected.

Title: Select the title for your menu link

URL: Enter an URL for the redirect or select one from wthin the store.

Navigation:

Menu: Select a menu for your main navigation.

Mobile menu: Can be different than your desktop menu.

Submenu: Select a submenu visible only if you're using the navigation drawer layout.

Mobile menu card column count: Select between 1 and 2 columns

Megamenu:

Spacing between cards: No / S / M / L / XL

Card aspect ratio: Auto / Square / Landscape

Card aspect ratio for mobile: Auto / Square / Landscape

Important note: Please check our Navigation and Megamenu documentation for how to set up the megamenu.

Contact Us
Was this article helpful?

Have more questions? Submit a request