Header

The header is crucial in creating a strong and memorable brand experience for your customers.

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

  1. Open the Theme Editor, and open the Header section within the Header group.
  2. Add your Logo, and set your desired Maximum logo width. Logo height is restricted to 150px.
  3. 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.
  4. 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. 

    Tip

    When using a transparent header be sure to check that menu text and icons are legible. In the example below, an image with a shadow at the top has been chosen to ensure sufficient contrast.
    2024-08-07 12-38-17.gif
  5. 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.
  6. 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.
  7. 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.
    alchemy-menu-promotions.png
  8. The Country/Region Selector and Language Selector can be shown in the drawer menu.

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.

Alchemy's inline menu style supports full width mega menus. Select Show inline menu to show the inline layout. To create a full width menu menu ensure your menu has three nested levels. Menus are managed in Shopify's admin area Online Store > Navigation. Read How to set up drop-down menus for more. 

Tip

The menu will always revert to a menu drawer if there is insufficient space to show the links inline.

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.

Steps

  1. Expand the Header section. To add a promotion click Add menu promotion. 
    menu-promo-alchemy.png
  2. Enter the title of a Menu item to indicate where to show the promotion in, e.g. 'Shop'. Add the details, an Image, Heading, Link text, Link URL and Overlay if required.

Tip

It is recommended to add no more than one or two menu promotion images for each menu. Be sure to choose a consistent shape and check the amount of overlay text is appropriate to the image size. 

main-menu-promos.png  drawer-menu-promos.png

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 Where to show. Be sure to check the text entered in the Menu item setting matches the menu item exactly. Check for spaces or additional characters.

How do I set up the header section in versions prior to 5?

Steps

  1. Open the Theme Editor, and open the Header section.
  2. Add your Logo, and set your desired Maximum logo width. Logo height is restricted to 150px.
  3. 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.
  4. Enable Stick to top of screen on scroll. This setting determines whether the header anchors to the top of the browser on scroll.
    alchemy-sticky-header.gif
  5. In Navigation select your Main menu.
  6. 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.
  7. 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.
    alchemy-search.jpg
  8. 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.
    alchemy-navigation.jpg
  9. 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.
  10. Finally set up the Menu promotion overlay settings. Set the Background color, Opacity and Text color of your mega-menu advert promotion here.
Sign up for Shopify today for $1

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