Home Envy 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”.


Size

Width -

Full screen:

Site width:


Logo

There are two main options for your stores 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.

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)

We recommend 250 x 133px.

Width

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

Padding around logo

Alters the amount of blank white space surrounding your logo.

Choose any value between 0 - 100px.

Placement

'Logo placement' determines whether your logo is placed “Within header”, “Below header”, or to the “Left”.

Within header:

Below header:

Left:

Wherever you decide to place your logo, you may prefer to use a 'transparent PNG' (for minimal image background), or you can change the background color of the 'Header' to match your image.

To change your Header background color:

  1. Admin
  2. Online Store > Themes > Customise
  3. Theme Settings
  4. Colors
  5. Header > Background

Tip

As stated by Shopify on their logo generator page, “Creating an appealing logo is one of the best things you can do for your brand to inspire consumer confidence.” Here is a link to Shopify’s logo generator tool: shopify.co.uk/tools/logo-maker


Top bar

This option adds a second list of navigational links to the top of your Header and is a great place to have your 'About', 'Contact' and/or 'Stockists' pages:

Menu

“Select menu” allows you to choose which bunch of links to use in your Header (these are created in your navigational area in the Shopify admin).

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

Show social media icons

A simple check-box to toggle on or off at top right of your storefront.

Search

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


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).

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. You would need to have at least the “Top bar” activated to allow some form of Navigation.

Padding around 'main menu'

This can be set to a value between 0 - 50px and varies the space above and below your Main menu links.

An example of (the maximum) 50px Padding:

An example of (the minimum) 0px Padding:


Mega menu

Ensuring your customers can discover your products quickly and easily is important for every store.

By default, Envy supports three levels of dropdown menu, but it also possible to configure a 'mega-menu' which will allow you to show your customers a greater number of navigation options:

Getting a mega-menu setup only takes a few minutes, so let's get started.

Firstly, your menu structure needs to be setup in the 'Navigation' section of your Shopify dashboard.

For mega menu's the 2nd level will show as sub headers, and 3rd level will show as menu items.

Once all the menu items are ready to go, we need to enable mega-menu functionality for each of the relevant main menu items.

Doing this individually means you can have mega menu functionality for certain menu items, and standard dropdowns for others.

To enable mega-menu functionality, in your header setttings, scroll to the bottom of the settings, and ensure your mega-menu functionality is enabled:

Click 'Add mega-menu' and enter the name of one of your main menu titles. In this instance, it's 'Dresses'. Please ensure the names are exactly the same, including the case:

Once entered, you should now see the mega-menu view.

You also have the option to add up to two images, along with optional headers, subheaders and links. These are the perfect place to advertise promotions specific to this mega-menu.

You can revisit the 'Navigation' section of your Shopify dashboard to change your menu options, including the order, at any time, and it will update the live site.