Header
Last updated
Last updated
The header is a global section available on all pages of the theme. This section can not be moved or hidden. The main purpose of this section is to provide the users with the ability to easily browse through the site. It is quite functional and have number of features.
Below are part of the settings with some additional details.
This setting is used for changing the position of the logo and the header layout in general. The options are:
Top - Above navigation
When this variation is used, you'll see the contact links in the upper left corner. These are the contact links controlled through Customize > Theme settings > Global.
There are settings for choosing the logo. It could be an image like a simple JPG or PNG, or it can also be a SVG.
In order to set the SVG you need to copy-paste the code from your logo SVG file. To do so, you need to open the SVG with any text or code editor, then copy the code and paste it in the Logo SVG Code field. The code should start with <svg .... and should end with </svg>.
The menu option is used to choose the navigation you want to show in your header. You can learn more about the navigations here: https://help.shopify.com/en/manual/online-store/menus-and-links.
The different menus in your site are probably located in yourdomain.com/admin/menus.
The only setting available here is to be turned on or off.
If it's turned ON - once you start typing a search term in the search field you'll see some suggestions listed below. These are based on Shopify's algorithm for searching through the store.
Example:
If it's turned OFF - you won't see any suggestions while you're typing into the search field. Instead, you'll have to hit the enter button of the keyboard and you'll be redirected to the search results page which will show the desired results.
Enabling this option will make the header transparent on the homepage. The available settings are:
"Transparent on Home page" - enabling/disabling the transparent header
Logo and Logo SVG - picking a logo for the transparent header (for example it could be a logo in a different color for the transparent version of the header)
Links and text color - picking a color for the transparent version of the header. For example when transparent, you might need the header items to have a different color and this setting will allow you to set that accordingly.
Sticky header is enabled by default. However, you can turn this OFF by unchecking the setting called "Enable sticky header":
With the setting called "Enable first level links dropdown arrow" you can enable/disable the arrows shown in the top navigation level:
Note: the arrows in the dropdowns will always work no matter what you choose for the first level dropdowns.
Setting in the admin:
To enable the megamenu for a specific item from the main menu you need to add a megamenu block by clicking on Add Megamenu here:
This will create a new block under the Header section. Then, within the new block in the first field called Link Level 1 you should enter the text of the link from the first level menu that you want to attach the megamenu to. For example, if you have navigation like Home, Shop, Contact us and you want to attach it to Shop you need to add the text Shop in this Link Level 1 field.
Within one megamenu there are 3 predefined featured items that will take place here:
For each of the featured items you have the very same settings: image, heading, subheading, link. Heading and subheading are shown on hover.
NOTE: you don't have to fill all of the three featured items if you don't need them.
IMPORTANT: Please be aware that if you have a lot of 2nd level menu items and you use 2 or 3 of the featured items - the megamenu might get flattened.
