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:
Online store → Themes → Customize
Control the logo image, header features, and dimensions of the header with the following settings.
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.
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.
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.
'Logo placement' determines whether your logo is placed “Within header” or “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:
Online Store → Themes → Customize
Header → Background
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.
Display labels next to the Search, Account and Cart icons.
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.
"Quantity" shows the number of items in the cart. "Cart total" shows the value in currency. "None" shows no figure at all.
Displays or hides the Language Selector option for customer use - see below for information referring to the setup:
Displays or hides the Currency Selector option for customer use - see below for information referring to the setup:
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).
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.
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.