Header

Overview

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.

Envy 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

Steps

  1. Within your Shopify admin, go to Online Store > Themes.

  2. Click your theme, and select Customize.

  3. On the left-hand menu, select Header.

Mega Menu

Under Content, you will have the option to configure a Mega menu.

To learn more, please read our comprehensive guide:โ€‹

Enable 'Sticky' Menu

By selecting Enable 'sticky' menu, you can fix your header to the top of the page as you scroll down, so that it is always visible.

Sticky menu enabled.

Overlay Header

By selecting Overlay header on homepage, your header background will fade until your cursor hovers over the header space.

Overlay header on the homepage, making it fade into the page.

Logo Image

๐ŸŒŸ 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.

Before; text displaying your store's name.

Alternatively, you can replace this text with an image of your logo by going to Logo image > Select image.

After; an image displaying your store's logo.

You will then 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).

๐ŸŒŸ For the best results, we recommend using an image with the dimensions 250 x 133 px.

Overlay Logo Image

If you have selected Overlay header on homepage under Settings, you also have the option to add an alternative image specifically for your overlay header.

Enabling the logo overlay image.

This is a great function for merchants who want their header to be overlaid, but notice that their logo gets lost in the background without a solid header background color; you can simply upload an alternative logo in a more suitable color.

It's also great for customers with alternative brand names, or a store associated with parent companies featuring a different logo.

Preferred Width

With the Preferred width slider, you can choose to set the width of your header to a value between 50 and 350 pixels.

The width of the logo changing as controlled by the slider.

When the screen size has been reduced - either because you are viewing the page on a mobile or because the desktop window has been minimized - the logo width will stay the same.

Logo Placement

By altering the options from the drop-down menu under Logo placement, you can choose to position the logo either Within header or Below header.

Logo placement moving from within to below the header.

Show Logo on Sticky Header

By enabling Show logo on sticky header, you can choose whether the logo is visible as the customer scrolls down.

Logo appearing on sticky header.

Enable Search

To enable the search icon at the top of the header, simply select Enable search.

Search icon enabled in the header.
Enable search.

Show Icon Labels

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.

Labels next to the header icons.
The icon labels visible in the header.

Icon Size

You can choose to edit your Icon size to make them either Small, Medium, or Large.

Icon size changing from Small, Medium, and Large.

Cart Icon

You also have the option to choose either a Shopping Bag or a Shopping Cart as your cart icon - simply select the appropriate checkbox.

Shopping bag icon.
Shopping cart icon.

โ€‹

Cart Number

You can choose to display either the Quantity of items in the cart, or the Cart total within the header.

Icon: none.
Icon: quantity.
Icon: cart total.

Show Language Selector

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:

Displaying the language selector within the header.

Currency Selector

In order display alternative languages in a dropdown menu within your header, simply select Show currency selector.

Displaying the currency selector within the header.

However, in order for this function, your languages must be set up within your Shopify admin under Settings > Payments.

To learn more about how to configure your store's payment settings, read Shopify's help pages here.โ€‹

Main Menu

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.

Editing the main menu.

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.

Top Bar Menu

This option adds a second list of navigational links to the top of your header.

This is a great place to put your 'About', 'Contact', or 'Stockists' information - this can be added by going to Top bar and Select menu, which will then allow you to choose which links to use in your header.

Editing the top bar menu.

As with the main menu option, you can Change or Remove the top bar menu for another block of links, which are edited within your Shopify admin.

To learn more about editing menus and link within your Shopify admin, click here to read Shopify's help pages.

Changing the Header Color

By default, the color for an overlaid header is white. However, you can edit this by going to Theme settings, and using the color selector next to Background.

Changing header color through the theme settings.