Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Header

The Header appears at the top of each page so customers can navigate your store with ease. Choose from multiple styles and layouts, add Mega navigation menus for large catalogs, enable a transparent header, and more.

Header on Stiletto chic demo
Header on Stiletto chic demo

Set up your main menu

By default, the header menu is set to the Main menu found in your Shopify Admin. If you created a separate menu, go to the theme editor (Customize) to change the selected menu for your Header.

Steps

In the theme editor (Customize):

  1. Click the Header section to open the settings.

  2. Under the Main menu section, click Change and Change menu.

    Main menu used for the header

    The main menu works best for catalog and product links.

  3. Select a Secondary menu to display at the top of the header.

    Secondary menu in header
    Secondary menu in header

    The secondary menu works best for links to pages about your store, policies, contact information, and other additional information.

  4. Choose the menu you want to use and click Select.

Select a different menu

If you created a new menu, instead of the Main menu, go to the theme editor (Customize) to change the selected menu:

  1. Click the Header section to open the settings.

  2. Under the Main menu section, click Change and Change menu.

    Main menu used for the header
  3. Choose the menu you want to use and click Select.

  4. Click Save.

Logo image

Replace the store title with a custom logo image. We recommend a logo image with a transparent background and a minimum width of 50px in PNG format.

Tip: Looking to design your own logo? Give Shopify's Hatchful logo creator a try.

Steps

In your theme editor (Customize):

  1. Click on the Header section to open the section settings.

    Header logo settings
    Header logo settings
  2. Under Logo, click Select image and use the file selector to select or upload your logo file.

    We recommend using a logo with a transparent background (PNG format).

  3. Use the Logo width slider to make your logo larger or smaller on either desktop or mobile.

    We recommend using the original pixel width of your uploaded image.

  4. Click Save.

Layout options

Match the look of your brand by changing the style and layout of your Header menu and store title.

Steps

In your theme editor (Customize):

  1. Click on the Header section to open the section settings.

    Header layout settings
    Header layout settings
  2. Set the Layout to Logo center, menu below, Logo left, menu left, Logo center, menu left, or Logo left, menu below.

    Header menu layouts
    Header menu layouts
  3. Choose whether to Enable sticky header to fix the Header to the top of the screen or window when customers scroll down the page.

    If disabled, the Header remains at the top of the page.

  4. Select a Separator style: No border, Thin border, Thick border.

  5. Choose how nested or mega nav menus open: either when customers Hover over or Click on the parent link.

  6. Click Save.

Mega navigation menus

A Mega navigation menu opens your menu links in multiple columns so customers can browse large catalogs quickly and easily. Add multiple sub-menus along with a featured image, text, and links to customize your mega nav.

Mega navigation menu on Chic demo
Mega navigation menu on Chic demo

1. Create a nested menu list

The mega navigation menu uses the Main menu selected in the Header section settings. For the mega navigation, you will need to create a nested menu links with 3 levels in the Shopify admin.

We will look at our Stiletto Chic demo as an example:

Chic demo mega nav with 3 link levels
Chic demo mega nav with 3 link levels

In the Stiletto Chic demo, the top-level link is "Footwear" with two nested sub-menus. Hover over the Footwear link opens the mega navigation menu.

The 2nd-level links ("Shop by type" and "Shop by color") display as titles for each column and contains the 3rd-level links to collections.

Here's what the Main menu looks like for the Stiletto demo in the Shopify admin with the three nested link levels:

Footer menu with 3 link levels in Shopify admin
Footer menu with 3 link levels in Shopify admin

Steps

Go to the Shopify admin to edit your main menu:

  1. Click Navigation under Online Store in the admin panel.

    Online store panel in Shopify admin
    Online store panel in Shopify admin
  2. Select the Main menu or the menu you want to edit.

  3. Add a top-level link (for example: "Footwear") in your Main menu that will open the mega nav and contain the nested sub-menus.

  4. Add your 2nd-level menu links and use the drag handles ⋮⋮ to move them under the top-level link.

    Drag and drop menu links in navigation
    Drag and drop menu links in navigation

    In the Stiletto demo, the 2nd-level links are "Shop by type" and "Shop by color".

  5. Add your 3nd-level menu links and use the drag handles ⋮⋮ to move them under the 2nd-level links.

    In the Stiletto demo, the 3rd level links are collections.

  6. Click Save.

2. Add mega nav menus

Once you have created your nested menus, you can now add the mega nav and customize how it looks.

Steps

In your theme editor (Customize):

  1. Click the arrow beside the Header section.

    Header content dropdown to add a mega nav

  2. Click the Add mega nav button and choose either the Compact mega menu or Full width mega menu.

  3. Enter the exact name of the top-level link (e.g. "Footwear") in the Dropdown parent link field.

  4. Use the Column count display your menu lists in 1, 2, 3, or 4 columns.

  5. (For Compact menu.) Use the Total column width slider to expand the total width of the mega nav and the space between the menu lists and image.

  6. Choose whether to show Column dividers.

  7. Click Save.

3. Add promo content

Display a feature image, promo text, and call-to-action button within the mega nav menu.

Promo content in mega nav
Promo content in mega nav

Steps

  1. Make sure Show promo is enabled.

  2. Select or upload a Image to display inside the mega navigation menu. This image is not displayed on mobile.

  3. Use the Promo width and Height sliders to change the shape and size of your promo image.

  4. Set the Promo position to the Left or Right side of the mega nav.

  5. Select the Image focal point to control what part of the image to center within the block.

    Use the focal point to make sure the key part of your image won't be cropped when it overflows the size of the block.

  6. (Optional.) Add Promo text as a title on your image.

  7. Select or paste a URL for the Button link.

  8. Enter text for the Button label.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  9. Select a Text position (above) to position your headings (and button) in one of 9 areas of the grid block.

  10. Use the color selectors to customize the Text color.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  11. Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and slide image.

    These settings help make your text clear and readable.

    Set the Opacity to 100% to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.

  12. (Optional) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

    You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.

  13. Click Save.

Transparent header

Make your store's header transparent on your Home page to display the full height of your Slideshow, Image hero, or Video hero.

Transparent header with alternate logo

Steps

In your theme editor (Customize):

  1. Click the Header section and scroll down the the Transparent header settings.

    Transparent header settings
    Transparent header settings
  2. Check the Enable on home page checkbox to turn on the transparent header.

    Ensure that you have a Slideshow, Video hero, or Image hero section as the first section on your homepage.

  3. Check the Enable on collection pages checkbox to turn on the transparent header on collection pages.

    This setting requires that you have Collection images and have enabled full-width within your Collection pages Section.

  4. Add a Logo image to be used specifically with the transparent header.

    Use an edited logo image with alternate colors to contrast with your images or video. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos.

  5. Set the Text color and Cart count text color to look good opposite the colors of your images or video.

    Use light colors for darker images and dark colors for lighter images to make sure they are clear and readable.

  6. Click Save.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.