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.
Tip: Check the extended list of options for the Header in Theme settings -> Logo and favicon.
The Unicorn theme provides six blocks to customize the Header: "Menu icons", "Badges", "Popup menu", "Image with button (Mobile)", "Featured promotion (Mobile)", and "Contacts".
Header - classic
Tip: If a layout does not come with the section, it can be added manually by pressing the "Add section" button or hovering over a space between sections to see the "+" icon and choosing it from the proposed list of sections.
Note! The transparent header works on the Home page and remains opaque on all other pages.
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 below header icons in the desktop view when hovering over them, 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 color of the account, search, and bag icons changes for all screen sizes after applying a hex code in the "Buttons" picker. 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 set in the "Text menu" and "Icons menu" selectors. Let's dive into the topic more:
Text menu
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:
Icons menu
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 selector with the list of settings related to this 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.
Type
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 activate the 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 and secondary menus, activate the "Show top separator line" option.
Here you can change the color of the elements: "Text", "Icon", "Background", "Border", "Hover text", and "Border and hover background".
The "Corner radius" scale lets you control whether to use square corners for the Icons menu or display rounded angles. Use values 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, which ranges 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 to adjust the pop-up height from 0 to 1000 pixels.
To display the dividing line between the main and secondary menus, activate the "Show top separator line" option.
Here you can change the color of the elements: "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 are visible on mobile in the slide-out pop-up when pressing the menu button in the Header section.
Header - transparent
Tip: If a layout does not come with the section, it can be added manually by pressing the "Add section" button or hovering over a space between sections to see the "+" icon and choosing it from the proposed list of sections.
Activate the "Invert colors for homepage first section" option to link the color of the Header elements, such as navigation menus, Search, Compare, Favourites, Account, and Cart icons, to the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Note! The dynamic sections include the "Invert header colors" option, which adapts the color of the Header elements for a specific section when scrolling up or down the Home page.
Enable the "Open dropdowns on click instead of hover" option to display the drop-down menu when a top menu item is clicked.
Use the "Enable option tooltips" option to display tooltips below header icons in the desktop view when hovering over them, such as Search, Account, and Cart.
Show the Header across the full width of the screen by turning on the "Enable full width" option.
Layout
In the "Desktop" drop-down, specify the Header design: "Logo left", "Logo center", "Logo and menu left", "Menu center", or "Menu and logo center".
The "Split menu after" option appears in the settings panel if the "Menu and logo center" is selected.
Enable the "Split menu after" option to reveal the corresponding scale, which ranges from 1 to 12, and defines how many top menu items appear before the logo, with the remaining items displayed after the split.
Set the logo position on mobile to "Logo center" or "Logo left" by using the "Mobile" picker.
Sticky effect
In the "Type" picker, specify whether to display or hide the sticky header when scrolling down or up a page by selecting the "Disable" or "Enable" options. This functionality only applied to the desktop.
Tick the "Enable on mobile" option to activate the sticky Header on mobile.
The "Hide when scrolling down" option disables the sticky Header on all devices when scrolling down.
Logo
Use the "Type" picker to specify which logo method to apply: "Image", "SVG", or "Text". The corresponding options appear after selecting the type:
"Image". Select the option to set up a logo in your store using an image. Specify an image in the "Logo" picker. Press the "Select" button, then choose an image from the library or upload it from your device.
"SVG". Activate the option to show the "SVG logo" input field, where you can place your SVG code.
The "Image" and "SVG" options additionaly provide the following settings to customize the Logo on desktop and mobile:
Use the "Width" slider to control the logo size in the Header from 20 to 300 pixels. This option controls the Logo size for all screen sizes.
To set width settings individually for mobile, activate the "Enable mobile width limit" option. The option enables width scaling for mobile devices.
Change the logo size on mobile from 0 to 280 pixels using the "Mobile width" scale.
"Text". This option generates the default logo text, which corresponds to the store name specified in your admin.
Text menu
Turn on the "Enable" option to display a navigation menu in the Header. Additionally, this option reveals the "Menu" source selector.
Specify a menu in the "Menu" source selector. 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.
Last updated