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:
Within your Shopify admin, go to Online Store > Themes.
Click your theme, and select Customize.
On the left-hand menu, select Header.
Under Content, you will have the option to configure a Mega menu.
To learn more, please read our comprehensive guide:
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.
By selecting Overlay header on homepage, your header background will fade until your cursor hovers over the header space.
Before uploading a logo, your header will automatically display the text of your store's name as set through your Shopify admin.
Alternatively, you can replace this text with an image of your logo by going to Logo image > Select image.
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).
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.
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.
With the Preferred width slider, you can choose to set the width of your header to a value between 50 and 350 pixels.
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.
By enabling Show logo on sticky header, you can choose whether the logo is visible as the customer scrolls down.
To enable the search icon at the top of the header, simply select Enable search.
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.
You can choose to edit your Icon size to make them either Small, Medium, or Large.
You also have the option to choose either a Shopping Bag or a Shopping Cart as your cart icon - simply select the appropriate checkbox.
You can choose to display either the Quantity of items in the cart, or the Cart total within the header.
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:
In order display alternative languages in a dropdown menu within your header, simply select Show currency selector.
However, in order for this function, your languages must be set up within your Shopify admin under Settings > Payments.
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.
You have the option to Change or Remove the main menu for another block of links, which are created within your Shopify admin.
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.
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.
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.