What is the header?
As the first thing a customer sees on your e-commerce site, the header is crucial to creating a strong and memorable brand experience.
How to set up the header section
Steps
- Open the Theme Editor, and open the Header section within the Header group.
- There is the option to Enable sticky header. This setting determines whether the header anchors to the top of the browser on scroll. It can be combined with Shrink on scroll to ensure the sticky header does not take up too much screen space.
- Add your Logo, and set your desired Maximum logo width. Logo height is restricted to 150px. The logo will be centered. When using the inline menu, it can be left aligned using the setting Align left when inline menu visible.
- For a striking homepage, Enable transparent header. This can work well with a full width image section such as a slideshow. Upload an Alternative logo in a contrasting color. Make sure to match the main logo size. Choose an alternative Text and icons color.
- In Navigation select your menu and choose the menu layout. The theme includes two menu layouts - a drawer menu and a traditional inline layout. Select Show inline menu to show the inline layout.
Note - The menu will always revert to a menu drawer if there is insufficient space to show the links. - In Customer accounts, choose a Customer account menu - usually the preselected Customer account main menu which shows buttons for customer orders and the customer account profile.
- Under Search drawer choose your Quick links menu, and Quick links heading (e.g. Are you looking for... ). These quick links can be used to direct the customer when the search is opened. The Search icon in the header is controlled in Theme settings > Search > Enable search.
- Add Contact information – Phone number, Email address and social icons. These are shown in the drawer menu and can be shown at the bottom of any inline mega menu using the setting Show in mega menus. Be sure to set up your social accounts in Theme settings > Social media.
- The Country/Region Selector and Language Selector can be shown in the drawer menu.
Tip
How to set up a mega menu
A mega menu is a navigation menu that neatly organizes many links and categories and is a great way to organize complicated menu structures. Using the correct menu layout will allow your customers to easily find the desired products or collections and should help with conversions. Refer to our mega menu guide for more information about mega menus.
How to set up menu promotions
Draw attention to linked menu items by showcasing eye-catching images in your navigation menu. Menu promotions are shown in the menu drawer and in the inline menu. Refer to our mega menu guide for more information about menu promotions.
FAQs
How to position the logo
The logo in Alchemy is usually positioned in the center of the header. When an inline menu is used it can be aligned to the left using the setting Align left when inline menu visible. The Maximum logo width and Font size (inline menu) can be used to control the space required for the menu and inline links.
How do I set up the header section in versions prior to 5?
Changes were made to the Header section in version 5. The steps below describe the previous header settings.
Steps
- Open the Theme Editor, and open the Header section.
- Add your Logo, and set your desired Maximum logo width. Logo height is restricted to 150px.
- For a striking homepage, Enable transparent header. Ensure a full-width image section is at the top, like a slideshow, and upload a contrasting logo. Make sure to match your main logo size.
- Enable Stick to top of screen on scroll. This setting determines whether the header anchors to the top of the browser on scroll.
- In Navigation select your Main menu.
- Choose the menu layout. The theme includes a burger layout and inline layout (only for larger screens) Select Show inline menu to show the inline layout. Links will only be shown on larger screens and when they fit, otherwise the side menu link (burger menu) will be shown.
- Under Search choose your Quick links menu, and Quick links heading (e.g. Are you looking for... ). These quick links act as useful hints or search suggestions when the search is opened.
- Add your Contact information – Phone number, Email address and Social accounts. These are shown at the bottom of the mega-menu and at the bottom of the mobile navigation. Be sure to set up your social accounts in Theme settings > Social media.
- The Country/Region Selector and Language Selector can also be set. For the correct information to be shown here, the Languages and Markets need to be set up in the Shopify admin area. These are only shown in the side menu (burger menu). On desktop, they feature in the Footer.
- Finally set up the Menu promotion overlay settings. Set the Background color, Opacity and Text color of your mega-menu advert promotion here.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us