Header

Overview

The Header of your store is one of the most important aspects of your storefront; featuring your brand's logo, navigation, and the shopping cart, the header features the key elements of your storefront.

Example of your store's header.

Flow offers a wide variety of extra options to help you customize your header to suit your store's needs, including:

  • Menus

  • Language selector

  • Currency selector

  • Search

Steps

  1. Within your Shopify admin, go to Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Header.

Sections > Header

Mega Menu

Under Content, you will have the option to configure a Mega menu.

A Mega menu will only be possible when set up on a menu from your Main Menu - if you have only added a menu to your Top bar, the Mega menu will not work.

To learn more, please read our comprehensive guide:​

Enable Mega Menu

If you would like the mega menu functionality to appear within your header, scroll down to Enable mega menu at the bottom of your Header settings.

The mega menu option can be enabled at the bottom of the header settings.

Enable 'Sticky' Header

By selecting Enable 'sticky' header, you can fix your header to the top of the page as you scroll down, so that it is always visible.

Sticky header enabled.

Logo Image

🌟 We recommend using Shopify's logo generator to make an impact on your customers; “Creating an appealing logo is one of the best things you can do for your brand to inspire consumer confidence.”

Before uploading a logo, your header will automatically display the text of your store's name as set through your Shopify admin.

Before; text displaying your store's name.

Alternatively, you can replace this text with an image of your logo by going to Logo image > Select image.

After; an image displaying your store's logo.

To add an image, you have the option to Upload a new image, or to select an image from your existing Shopify image library (as stored within your assets folder within your Shopify admin, which can be found under Settings > Files).

Uploading a header logo image.

Logo Placement

By altering the options from the drop-down menu under Logo placement, you can choose to position the logo either to the Left, in the Center, or Above.

Left

Logo placed to the left.

Center

Logo placed in the center.

Above

Logo placed above the header menu.

Padding Around Logo

With the Padding around logo slider, you can set how much padding appears around your header logo to a value between 0 and 100 pixels.

Changing the logo padding.

Preferred Logo Width on Desktop

With the Preferred width on desktop slider, you can choose to set the desktop width of your header to a value between 50 and 500 pixels.

Changing the logo width on a desktop device.

Preferred Logo Width on Mobile

With the Preferred logo width on mobile slider, you can choose to set the mobile width of your header to a value between 50 and 300 pixels.

Changing the logo width on a mobile device.

Show Logo in Mobile Slideout Menu

If you would like your logo to appear in your slideout menu on mobile view, select Show logo in mobile slideout menu.

Enabling the logo in the mobile slideout menu.

Show Icon Labels

Within your header, you have your search function, your account portal, and your cart - all represented by icons.

Labelling the icons in your header can make it easier for your customers to navigate your site. To enable this, simply select Show icon labels.

Enabling icon labels within your header.

Before

When Show icon labels has not been selected.

Icon labels not enabled.

After

When Show icon labels has been selected.

Icon labels enabled.

Cart Icon

You also have the option to choose either a Bag or a Cart as your cart icon - simply select the appropriate checkbox.

Bag

Shopping bag icon.

Cart

Shopping cart icon.

Cart Number

Quantity

Displaying the quantity of products in cart.

Cart Total

Displaying the total price of the products in the cart.

None

No cart number displayed.

Enable Search

To enable the search icon within the header, simply select Enable search.

Enabling the search icon.

Enabling the search icon is a great way to help your customers navigate your site.

Search icon in header.

Overlay Header

By enabling your overlay options, your header background will fade until your cursor hovers over the header space.

Comparing the regular header to the overlay header.

You can choose which of your templates this function is enabled on by selecting its corresponding checkbox:

  • Enable on homepage

  • Enable on collection

  • Enable on collection lists

  • Enable on the contact page.

To add an image, you have the option to Upload a new image, or to select an image from your existing Shopify image library (as stored within your assets folder within your Shopify admin, which can be found under Settings > Files).

Changing the overlay logo.

Overlay Header Opacity

When your overlay header has been enabled, you have the option to make it more visible by using the Header opacity slider.

Using the slider to change how opaque the overlay header is.

Hint: Your overlay header color can be changed under Theme settings > Color > Header > Overlay background.

Show Language Selector

In order display alternative languages in a dropdown menu within your header, simply select Show language selector.

However, in order for this function, your languages must be set up within your Shopify admin under Settings > Store languages.

For more information about how to configure your store's language settings, please read our guide:

Enabling the language selector within the header.

Currency Selector

In order display alternative languages in a dropdown menu within your header, simply select Show currency selector.

Enabling the currency selector within the header.

Main Menu

The Main menu is the main navigation option for your product collections, and is displayed within the header.

To add your main menu, go to Main menu and click Select menu.

Selecting the main menu navigation.

To learn more about editing menus and link within your Shopify admin, click here to read Shopify's help pages.

You have the option to Change or Remove the main menu for another block of links, which are created within your Shopify admin.

Removing this main menu will leave your customers with no means of navigating to different pages of your store outside the homepage; you would need to have at least the Top bar activated to allow some form of navigation.

Dropdown Alignment

Use the Dropdown alignment menu to change whether your menu drop-down options are aligned to the Left, in the Center, or to the Right.

Left

Dropdown options aligned to the left.

Center

Dropdown options aligned to the center.
Dropdown options aligned to the right.