Header

The Header of your store contains key elements for the functions of your Shopify store, including your brand's logo, navigation menu, and currency selectors.

Envy offers a wide variety of options to help you customize the header for improved user experience.

Menu's, Logo's, Navigational links, Social icons and Cart/Account icons can all be controlled from within these settings.

Start by following the steps below from your Shopify dashboard:

  1. Online store → Themes → Customize

  2. Sections

  3. Header

Note

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

Settings

Control the logo image, header features, and dimensions of the header with the following settings.

Overlay Header

Enable to set an overlay effect on the header. When the cursor hovers over the header space, a background will fade in.

The default color for the overlay effect is white. This can be changed via the color settings, located in the Theme settings.

Enable 'sticky' header

Selecting this option will mean your header follows you as you move down the page on your storefront:

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.

If text is undesired, an image can be uploaded as your logo instead.

To set an image (which will replace the default text option), upload an image from your computer, or select one from your existing Shopify image library. These are stored within the assets folder of the store.

This library can be found though your Shopify dashboard, clicking Settings and selecting Files.

We recommend image dimensions of 250 x 133 pixels for best results.

Width

A slider setting which can set the width of the header. This can be set to a value between 50 - 500 pixels.

For theme versions Envy 25.0 and older, Envy will still have an option to add a padding around the logo. This setting alters the amount of blank white space surrounding your logo.

Choose any value between 0 - 100 pixels.

As this option is not available in the newer versions of the theme, padding can be added to the logo via customisation of the themes CSS file.

For more information, we have a recommended specialists who can help:

Recommended Specialists

Placement

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

Within header:

Below header:

Wherever you decide to place your logo, you may prefer to use a transparent image type (for minimal image background). Additionally, you could change the background color of the Header to match that of your image.

To change your Header background color, follow the steps from your Shopify dashboard:

  1. Online Store → Themes → Customize

  2. Theme Settings

  3. Colors

  4. 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: Logo generator tool

Icons

Customize the icons that sit within the header.

Enable to display a magnifying glass next to the Account icon in the top right. Once enabled, this allows visitors to use the search spotlight on your store.

Show icon labels

Display labels next to the Search, Account and Cart icons.

Cart icon

Select which design of icon you would like to display on your store - both a bag or cart icon are available for the Envy theme.

Cart Icon
Bag Icon

Cart number

"Quantity" shows the number of items in the cart. "Cart total" shows the value in currency. "None" shows no figure at all.

Selectors

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:

Menus

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

Shopify Help - Menus and Links

Note

If you choose to remove this Main menu, keep in mind that your customers will have no navigation method of finding different pages of your site outside the homepage. You would need to have at least the “Top bar” activated to allow some form of navigation.

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:

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

The most recent theme version will now also display Top bar links on mobiles.

Content

The content section is reserved for Mega Menu functionality. Drop down the Mega Menu option to reveal further settings.

When the menus have been created and nested, the Mega Menu can be assigned to a menu item using the Mega Menu form field:

When assigning the Mega menu to a menu item, the Shopify system is case sensitive for this information and will not pick up the menu item if its inputted incorrectly.

Note:

If you are interested in setting up your own Mega Menu for your store, please see our detailed walkthrough here