Header
The "Header" section contains settings to set up a menu at the very top of a page to match the look and feel of your store.
Last updated
The "Header" section contains settings to set up a menu at the very top of a page to match the look and feel of your store.
Last updated
Tip: Check the extended list of options for the Header in Theme settings -> Logo and favicon.
The Unicorn theme allows you to add six blocks to customize the Header: "Menu icons", "Badges", "Popup menu", "Image with button (Mobile)", "Featured promotion (Mobile)", and "Contacts".
If the "Open dropdowns on click instead of hover" option is enabled, the drop-down menu will only be available for viewing by clicking a menu item.
Activate the "Enable button tooltips" option to display tooltips that appear below icons on the desktop view when hovering over the header icons, such as Search, Account, and Cart.
Note! The described option will only work for the inline Icons menu.
Use the "Bottom line separator" drop-down to add or remove the dividing line underneath the Header on desktop and mobile:
"Hide". Select the option to hide the dividing line on both desktop and mobile.
"Show". Set the option to display the separator on all screen sizes.
"Show on desktop only". Use the provided option to display the separator on the desktop and deactivate it on mobile.
The background of the first Header line can be changed by changing the color in the "Background" picker.
The icon's color, such as account, search, and bag, on all screen sizes, will be changed once you add a hex code for the "Buttons" item. Additionally, this picker applies color to the hamburger icon on mobile.
The "Cart counter" item determines the background color for the number of products displayed next to the cart icon in the Header when items are added to the Cart. The digit color will be adapted to contrast with the selected background color. To customize the digit color, go to Theme settings -> Colors -> Contrast and use the appropriate color picker.
The theme allows displaying two menu lines that can be picked in the "Text menu" and "Icons menu" selectors. Let's dive into the topic more:
To display the text menu, turn on the "Enable" option. Once you activate the option, the related settings will be shown to customize the menu.
Here you can choose the proper menu in the "Navigation" selector. It will be placed in the first header line above the Icons menu. Press the "Select" button to use the one from the list. Confirm that the menu has been created in Shopify admin -> Content -> Menus. Read the instructions on how to add drop-down menus in the initial documentation.
Use the "Color" and "Hover color" color pickers to set up the colors of the active and inactive menu items.
This is how the "Text menu" might be displayed in your store:
Tip: To customize the "Icons menu", add the "Mega menu" sections and related blocks in the "Mega menu" section group. Read more about the "Mega menu" section in the following article.
Turn on the "Enable" option to display the corresponding menu with the list of settings related to the menu.
In the "Main navigation", choose the menu for the icons drop-down. The Main Menu will be shown by default, which you can replace with any other menu created in Shopify admin -> Content -> Menus. Read the instructions on how to add menus here.
Use the following picker to change the layout of the Icons menu on the desktop. It can be changed to display as "Inline" or "Popup". The corresponding settings for each option will be displayed after selecting the desired type.
Here are the examples of the menu types:
Inline settings:
Turn on the "Animate icon and text" option to create an animation effect that swaps the position of an icon/image with the menu item name when hovering over an icon menu. On hover, the menu item name moves to the top, and the icon/image shifts to the bottom. This feature is compatible with the Inline menu type.
To display the dividing line between the main menu and the secondary menu, activate the "Show top separator line" option.
Here you can change the color of the elements, such as "Text", "Icon", "Background", "Border", "Hover text", and "Border and hover background".
The "Corner radius" scale allows you to control whether to use square corners for the Icons menu or display rounded angles. Use from 0 to 40 pixels to set the icon menu size that meets your needs.
If you need to display a border around the icon boxes, use the "Border width" scale, whose parameters vary from 0 to 10 pixels.
Popup settings:
Align to button
Activate the option to showcase the pop-up menu beneath the "Categories" button by clicking on it. Otherwise, the pop-up will cover the button when opened.
In the following example, the option is disabled, and the pop-up overlays the "Categories" button:
Enable full width
Activate the option to display the Mega menu with the nested menu items or banners in the full width of the menu.
Activate the "Set height" option to display the "Height" scale, where you can specify the height of the pop-up, ranging from 0 to 1000 pixels.
To display the dividing line between the main menu and the secondary menu, activate the "Show top separator line" option.
Here you can change the color of the elements, such as "Text", "Icon", "Background", "Border", "Hover text", and "Border and hover background".
The color of the vertical line separator between the categories and search field in the Search bar can be modified using the "Search-categories border" color picker. This option works only for the Popup menu type.
Here is how the Header might display on a desktop and mobile:
Note! The menu items can be visible on mobile in the slide-out pop-up after pressing the menu button in the Header section.
