What is the Header section?
As the first thing a customer sees on your e-commerce site, the header is crucial to creating a strong and memorable brand experience. Alchemy will make an impact with its transparent header and modern design. Its intuitive sidebar search makes navigating the site joy.
Separate guides are available for how to set up the announcement bar.
How to set up the header section
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 to Show inline menu layout. Links will only be shown on larger screens and when they fit, otherwise the side menu link (burger menu) will be shown.
- If using an inline menu, choose to show your logo on the left or centered.
- Under SEARCH choose your Quick links menu, and heading (Are you looking for... below). These act as useful hints or search suggestions when the search is opened.
- Add your Contact information – Phone number, Email address and Social Accounts. This is 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.
Main navigation menu
Alchemy supports both a three-tier drop-down menu and a full-width mega menu to provide customers with quick and easy storefront navigation.
Here is an example of Symmetry's mega menu configuration in the Alchemy modern demo:
Additionally, here's an example of Alchemy's drop-down menu in our Alchemy clean preset:
For more information about setting up your menu items within your Shopify Admin, refer to Shopify's Help Center guide Menus and links.
How to set up menu promotions
Draw attention to linked menu items by showcasing eye-catching image promos in your navigation menu.
Steps
- Expand the Header section. To add a promotion click Add menu promotion. Promotions are shown in dropdown menus (when there is sufficient space).
- Enter the title of a Menu item to show the promotion in, e.g. 'Shop'. Add the details, an Image, Heading, Link text and Link URL. Note, the Menu promotion overlay settings are setup in Header.
FAQs
Why are my menu promotions not showing?
Make sure to enter the exact name of your top-level link, in the link name input.
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
