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

Header

The Header appears at the top of each page with customizable menu links, logo, colors, and styles. You can add a Mega navigation for large catalogs and enable a transparent header on the home page and about pages.

Transparent header with inline links
Transparent header with inline links

On mobile devices and when the Menu icon header style is enabled, the header displays as a drawer menu:

Drawer menu
Drawer menu

Set up your main menu

By default, the Header displays links included in your Main menu as set up in your Shopify Admin. To create or edit your menus, go to Navigation under Online store.

Navigation under Online Store in Shopify Admin
Navigation under Online Store in Shopify Admin

The navigation is a Shopify feature. To learn about menus and links, see Shopify's guide about your online store navigation.

Select your main menu

To select a different menu for your header, open your theme editor (Customize):

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

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

  3. Click Save.

Customize the header style

Match the look of your brand by changing the style and layout of your Header menu and store title. Change the position of your menu links or display them in a drawer menu that can be opened by clicking a Menu icon ().

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

  2. Set the Header style to display your main menu as Inline links or show a Menu icon () to place your links in a drawer.

    Drawer menu
    Drawer menu

    To customize colors for drawers, go to your theme settings and open the Color tab.

  3. Choose an Alignment for your header on desktop. Either Left or Right.

    Left-aligned header style
    Left-aligned header style
    Center-aligned header style
    Center-aligned header style
  4. (Optional.) Use the Logo image file selector to select or upload your logo file.

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

  5. (Optional.) If you added a logo, use the Custom logo width slider to change size of the logo in the header.

  6. (Optional.) Select a Sticky header logo image to appear in the header when the page is scrolled down.

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

  7. Click Save.

Header settings

Context's header has the following settings:

Configuration Settings

Header style

Choose a header style: either Menu icon (☰) or Inline links. Inline links displays your menu as a traditional list of menu items, while Menu icon displays the mobile icon to trigger the drawer menu.

Alignment

Choose between left or center. Left aligns your logo and menu along the left side, and Center aligns them to the center.

Note that this only applies to the Inline links header style.

Logo image

Select or upload an image to be used as the logo in the header.

If you don't upload a logo, the name of your store appears instead.

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

Logo max width

Select the display width, in pixels, of your logo image.

Your logo height is scaled to match the width. You can use this setting to make the logo super tiny or super huge.

Sticky header logo image

Select or upload an image to be used as the logo in the header as you scroll.

If you don't upload a logo, the space appears blank.

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

Because the sticky style of the header is smaller, we recommend using a smaller logo or icon for this spot.

If your menu is longer (more than 5 items), you may not want to use a logo here, because the menu items could overlap the logo space.

Select a menu to be displayed in the header.

Menus are a Shopify feature. See Shopify's Menus and links to learn more about them.

Enable transparent header

Make your store's header transparent to reveal a full-height slideshow or video hero at the top of the Home or About page.

Context's header (left) and transparent header(right)
Context's header (left) and transparent header(right)
A header with the transparent header setting enabled
A header with the transparent header setting enabled

Set up the transparent header

In the theme editor (Customize):

  1. Click on the Header section.

  2. Scroll down to the Transparent header section of the header settings.

    Transperent header settings
    Transperent header settings
  3. Check the Enable on home page checkbox to turn on the transparent header feature.

  4. Check the Enable on about page checkbox to turn on the transparent header feature using the About page template.

    Learn more about the about page template.

  5. Choose the Text color and Border color of the header when the transparent header is enabled.

  6. Set the Border opacity for the borders, where 0% is invisible and 100% is completely opaque.

  7. (Recommended.) Upload a Transparent logo image to replace the original logo image when the transparent header is enabled..

    For example, upload a light-colored logo for the transparent header to look good on dark-colored backgrounds, if the original header logo is dark-colored to look good on a light background.

  8. Click Save.

Transparent header settings

The transparent header has the following settings:

Configuration Settings

Enable on home page

Use the transparent header on the home page.

Enable on about page

Use the transparent header on the about page.

Text color

Select a color to be used for all text in your header.

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

Border color

Select a color to be used for all of the borders and lines in Context's header layout.

Border opacity

Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.

Transparent logo image

Select or upload a logo image to be used on the transparent header.

This logo is only used when the header is shown as a transparent header. Scroll up to the top of the header settings to upload a default logo image.

Set up a mega navigation menu

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

Context's mega nav
Context's mega nav

The mega navigation menu makes use of your existing Main menu. You can nest sub-menus inside of your menus, which is what makes mega navigation menus so mega.

Create a nested menu list

The mega navigation menu makes use of your existing Main menu. You will need to create three levels of nested menu links.

In the Context Chic demo, the top-level link is "Shop" with three nested sub-menus. The second-level links ("Collections", "Type", and "Everything") contain the third-level links displayed as three columns:

Mega nav menu in the Chic demo
Mega nav menu in the Chic demo

Here's what the Main menu looks like for the chic demo with nested menus:

Nested menu for the Chic demo mega nav
Nested menu for the Chic demo mega nav

To create a three-level nested menu for the mega nav:

  1. Go to Online Store > Navigation in the Shopify Admin and open your menu list.

  2. Choose a top-level link (for example: "Shop") in your Main menu that will contain the nested sub-menus for your mega navigation.

    This is the Dropdown parent link that will appear in the header and will open the mega nav when clicked on.

  3. Click and drag your menu items below the top-level link to add up to 3 second-level links.

    In the Chic demo, the second-level links are "Collections", "Type", and "Everything".

  4. Click and drag all the third-level links that you need under the second-level links. See example below.

Home
Shop
Collections
Naomi
Pandora
Helix
...
Type
Messenger
Evening
Tote
Crossbody
Everything
New releases
Summer
Winter
Sale
About
Blog
Theme

Add a mega nav menu

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

Add mega nav settings in theme editor
Add mega nav settings in theme editor

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.

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

  4. (Optional.) Select or upload a Mega nav featured image to display inside the mega navigation menu. This image is not displayed on mobile.

    Mega nav with featured image
    Mega nav with featured image
  5. (Optional.) Underneath the featured image, add a Featured image heading, a Featured image link and link text. The caption and link are not displayed on mobile.

  6. Remember to click Save.

Mega nav menu settings

For each mega navigation you add, the following settings are available:

Configuration Settings

The exact name of the top-level link in your main menu.

When clicked, this top-level link activates the mega nav with sub-menus populated below.

A feature image display within the mega nav menu.

If the image is taller or wider than 4:3 (width:height), it is center-cropped and displayed as a 4:3 image.

Text displayed as a caption below the featured image.

We recommend keeping this to just a few words long.

Clickable link text displayed below the featured image and caption.

The page or URL used for the link text below the featured image and caption.

Multiple currencies, languages, and customer accounts

If your your offers multiple languages or sells in multiple currencies, customers can switch languages and currency from the drawer menu. If you have customer accounts enabled, customers can also register or log in from the drawer menu.

Accounts are a Shopify feature. See Shopify's Customer accounts documentation for more information.

You can learn more about offering your store in multiple languages by reading Shopify's Selling in multiple languages guide.

You can learn more about offering your store with multiple currencies from Shopify's Sell in multiple currencies with Shopify Payments documentation.

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.