Home Flow Sections Header

Header

Everything you need to customize the header of your online store.

Overview

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 customise the Header of your online store.

Here is where you can find your Header in your theme Settings:

  1. Admin
  2. Online store > themes > customise
  3. Sections
  4. Header

Note

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


Settings

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 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 100 - 500px.


Padding around logo (in pixels)

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


Main menu

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.

https://help.shopify.com/manual/sell-online/online-store/menus-and-links

Note

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.


Enable 'sticky' header

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


Overlay header over home page

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


Overlay logo

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)


Enable search

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


Logo placement

Left:

Center:

Above:


Dropdown alignment

Choose how your dropdown text aligns:

Left:

Center:

Right: