Header
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.
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
Within your Shopify admin, go to Online Store > Themes.
Click your theme, and select Customize.
On the left-hand menu, select Header.
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:
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.
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.
🌟 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.
Alternatively, you can replace this text with an image of your logo by going to Logo image > Select image.
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).
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.
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.
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.
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.
.gif?alt=media&token=7dde148d-9267-4734-961b-ce802e4742c0)
If you would like your logo to appear in your slideout menu on mobile view, select Show logo in mobile slideout menu.
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.
When Show icon labels has not been selected.
When Show icon labels has been selected.
You also have the option to choose either a Bag or a Cart as your cart icon - simply select the appropriate checkbox.
To enable the search icon within the header, simply select Enable search.
Enabling the search icon is a great way to help your customers navigate your site.
By enabling your overlay options, your header background will fade until your cursor hovers over the header space.
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).
.gif?alt=media&token=004a0345-9786-4991-a2ef-557e3a215da7)
When your overlay header has been enabled, you have the option to make it more visible by using the Header opacity slider.
Hint: Your overlay header color can be changed under Theme settings > Color > Header > Overlay background.
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:
In order display alternative languages in a dropdown menu within your header, simply select Show currency selector.
.gif?alt=media&token=109fc75a-85df-4d1a-8383-91b38f6752aa)
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.
.gif?alt=media&token=7f274256-051c-42f5-985b-4d529282225b)
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.
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.
