Theme Documentation > Header

Header

Header

The Header contains your logo, main navigation and key toolbar for search, account, cart and market selector.

A number of visual and functional options are available to configure the header to suit your store.

We understand, your logo is your most valuable and important brand asset. A number of options are available to ensure your logo looks perfect at the head of your site. Upload your logo within the main theme settings.

Logo position - mobile
You can choose from center or left. 

Logo position - desktop
You can choose from left, center, top left or top center. The latter two options will result in the navigation list being positioned below the logo. Choose the position that you feel is most appropriate for your brand.

Logo size
Sets the size of your logo on both mobile and desktop. Be careful to check your site, especially on mobile, to ensure that your logo is not too large. Note: The logo size is also limited by the header bar height.

Tip: Ensure that there is a comfortable amount of clear space horizontally between your logo and interactive elements such as the menu button, search button and cart button. 

Choose the main menu and an optional secondary menu. If you create nested (sub) navigation menus, the theme will automatically adapt to these. The theme supports up to three levels of menu. i.e. Primary > Child > Grandchild.

The secondary menu is optional and can be useful for showing items such as a size guide, FAQs or contact links - any item that you wish to include in the mobile drawer but which are not considered primary navigation items.

For more information about creating menus, visit help.shopify.com/en/manual/online-store/menus-and-links

Header style and behaviour

Change the look of the header bar by setting style options such as border, shadow and corner radius and homepage transparency.

Header bar type
Choose between ‘Standard bar’ or ‘Floating’. ‘Floating’ adds margins around the header bar so that background header images can be seen behind it.

Transparent on homepage
Activating this setting removes the background until the user scrolls down the page. This creates an elegant look, and works especially well with image or video banners at the top of your homepage (provided that the images are dark enough for sufficient contrast). Before activating this setting, ensure you have uploaded a transparent main logo and inverted logo.

Desktop menu type
Choose between ‘Dropdown’ or ‘Drawer’ for desktop. Please note: If the length of your primary navigation list is long to fit within the menu bar, it will be compressed into a drawer style menu except on screen sizes large enough to display it in full.

Dropdown contents width
Full width: The contents of the dropdown will stretch full width of the screen
Fixed width: The contents of the dropdown will be limited to a maximum width of 1200px.

Fonts

Set the font size for mobile and desktop independently. You can also set the text case (UPPERCASE or Normal)

Set whether to show images in your collection menus. If drawer images are activated, the theme will automatically show a relevant image for each collection. By default, it will display the featured image for each collection (this is automatically set as either the featured image uploaded within the collection or – if there is no featured image uploaded – the featured image of first product within the collection).

You can activate different levels of menu image depending on your preference, i.e. show images at the secondary level but not primary level.

For desktop dropdown images, you can insert a menu image block into the header. The images will show in sequential order based on the order of your dropdown links and the order of the image blocks you insert. For example, the first image block will show on the first dropdown menu. For each menu image you can also include an optional heading, subheading, and link. You can also choose the position of the text - either below the image or overlaying it. Choose the design that works best for your images and the look & feel you prefer.

Desktop menu images should be uploaded at at least 1200px wide.

Image aspect ratio
Sets the aspect ratio of the menu images. Choose from portrait, square or landscape.

Set whether to show a search button in the header. You can also choose the visual display of the search button (icon or word).

Accounts

Set whether to show a link to customer accounts/login in the header. You can also choose the visual display of the account button (icon or word). Note, to enable accounts you also need to activate accounts in your admin settings.

Cart

Choose the visual appearance of the cart button. Choice of three icons (bag, cart, basket) or for a more contemporary design you can choose a circle or word. With all options, the number of items in the cart is always displayed.

International markets

Set whether to show a button to change market (location/currency). Note, to enable this you also need to activate international markets in your admin settings.

Social media

Choose whether or not to display social media icons/links within the menu drawer. You can also set the alignment (left or center) and add a heading (optional).