Header

Customize Theme > Sections > Header

Introduction

This section is at the top of your homepage and it's the first thing that a user sees when he enters in your shop. The header contains a logo, a navigation main menu, a promotion bar and three icons (search, account, cart).

Header options

In this section, you have the option to choose a sticky header. With this option, you determine if you want your main navigation, logo and header icons to be "sticky."  When this option is selected, the header will follow the user down the page for a certain distance, and then hide itself. If users begin to scroll back up, the main header is revealed. When this option is unchecked, the header will remain at the top of the page when users scroll down. Also, you are able to select the location of your mobile nav ("Mobile nav location" setting) with 2 options ("Bottom", "Top").

Example of a sticky header 

Mobile nav location: Top

Mobile nav location: Bottom

Logo

In the "Alignment" setting, choose how you want your logo to display with two options ("Centered", "Left").

Alignment: Centered

Alignment: Left

With the option "custom logo" you can upload your own logo which will be added to the header. The recommended size for your image is 450 x 200px and the recommended file format is .png.

Once you have uploaded your logo you can then choose the max width of your logo with a range of 50 to 500px.

Note: the logo uploaded in the header section, is the logo that will appear in the “sticky” footer in the mobile version of your site. Also, if you don't choose to upload an image then the default option will appear which is your shop's name.

Navigation main menu

Choose the main menu linklist for both desktop and mobile views from the dropdown menu of options.

If you have not yet created the linklist you want to use, click "edit menu" and then follow this guide here which will help you to create a multi-level menu.

A “mega” navigation that shows multiple categories (for example: https://loft-theme-demo-nashville.myshopify.com/) is created when a linklist has at least one sub-menu associated with it.

You can enable the "mega-menu layout" option which gives you a bigger dropdown menu and the ability to add an ad to your navigation.

The overlay color is seen when the mega navigation dropdown or search are active. This overlay color covers the contents of the site. Choose a color from the color picker and set the opacity. If you do not wish to have an overlay color choose "hide" from the dropdown of overlay opacity options.

On the mobile view, you have also the option to show/hide the account links & the social links through the two checkboxes "Show account links" & "Show social links".

Announcement bar

Choose to have an announcement bar at the top of each page by checking the "Enable announcement bar" box. 

You are able to add a promotional message by typing a text in the Announcement text field.

Add a redirection link to your message through the "CTA Link" setting 

Navigation ads

You have the option to display an advertisement within your mega navigation. To enable this ad, simply fill in the fields provided; Ad title, Subheader, CTA text and CTA link.

Also, instead of adding text as an ad you have the option to upload an image and link it to the page you like. To enable it, click select image to the AD image option and paste a link or search to the AD image link option.

When you want to remove the ad, clear the text from all the fields or remove your image (if you have selected the second option) and it will no longer display.

Advanced search 

Enabling advanced search will give store visitors the option to refine their search using pre-made dropdowns. The filters included in Loft are:

1. Limit searches to:
1. Products
2. Pages
3. Blogs
2. Product vendor
3. Product type

Disabling this option will display a simple search modal screen.