Header

Your store’s header is where you display your logo, navigational links, social media icons, search bar and cart icon.

Below, we outline everything you need to customize the Header of your online store.

Navigate the steps provided to find the Header settings:

  1. Online store → themes → customize

  2. Sections

  3. Header

Throughout, the value “px” refers to “Pixels”.

Settings

Enable 'sticky' header

This allows your header to travel with you as you scroll down the page:

Tip:

There are two main options for your store's logo; text, or image.

A text logo will be shown by default, as the Theme will automatically pull in your store’s name from your Shopify Admin Settings.

Logo

Logo image

To set an image (which will replace the text option mentioned above), you need to upload your image from your computer or select one from your existing Shopify image library. (These can also be found in Admin → Settings → Files).

Width (in pixels)

This can be set to a value between 50 - 500px.

Padding around logo (in pixels)

This can be set to a value between 0 - 100px.

Logo placement

Choose between left, centre and right:

Icons

Show icon labels

Enable this option if you'd like labels (Search, Account, Cart) to be displayed next to the header icons. Labels will increase the accessibility of your site:

Shown:

Hidden:

Cart Icon

A simple toggle between a shopping cart, or shopping bag icon for the Cart menu, to better suit your storefront

Cart Number

A toggle between the different options of information display around the Cart Icon, after items are added.

Note:

Prior to Flow version 14.3, this option only applied to the Desktop view, as a design decision based around maximising the available screen space on Mobile device screens.

On 14.3 and later version, you have the option to add a Quantity Number to the Mobile Cart icon, to display how many items have been added.

Flow - Header - Mobile Cart Number displayed.

A simple check-box to toggle the magnifying glass icon on or off at top right of the storefront.

Overlay Header

Overlay Header over home page

This will place the header directly over the home page content:

To set an image (which will be displayed as part of your overlay header mentioned above), you need to upload your image from your computer, or select one from your existing Shopify image library. (These can also be found in Admin → settings → files)

Header Opacity

Selectors

Selectors can now be enabled for your Header and Footer.

Once the language/current has been set up through the Shopify settings, enable the selectors to display a dropdown box for multiple selections.

Language Selector

Displays or hides the Language Selector option for customer use - see below for information referring to the setup:

Currency Selector

Displays or hides the Currency Selector option for customer use - see below for information referring to the setup:

Breadcrumbs

Enable Breadcrumbs

Enable this option if you'd like to display breadcrumb navigation on your store:

This will result in a small inline navigation line, appearing just below the Header:

The main menu is usually used as the main navigation for your product collections and is displayed in this area of your header:

You are able to remove this entirely or change it for another block of links. These are created in your navigational area in the Shopify admin.

If you choose to remove this Main menu, keep in mind that your customers will then have no method of finding different areas of your site outside the homepage.

Choose how your dropdown text aligns:

Left:

Center:

Right:

Mega Menu

Enable this option here, and see the page below for more information: