Site header

Note: Colors for the header are configured in Theme settings/colors.

For information on how to structure your navigation menu in Shopify to work with the theme, see our Navigation documentation.

Settings

Logo image

Upload your store logo as an image. If there is no image uploaded, your store name will show here in heading font.

Logo width

How wide in pixels the logo should be.

Logo width (mobile)

How wide in pixels the logo should be on mobile screens.

Design options

Logo position in header

There are three options for the header layout. All of these are for desktop. The mobile layout is the same for all three options.

Middle left

Middle center

Top center

Enable sticky header

When this box is checked, the header will animate off screen when the customer scrolls down the page, and then will animate back in to show at the top of the screen as a customer scrolls up on the page.

Transparent header

Make header transparent on home page

Check this box to lay the header on top of the first section of the homepage without its background color. The transparent header is only available on the homepage. Example:

Logo for transparent header

If you decide to make the logo transparent on the homepage, you can upload a different version of the logo (like in a different color) that will be shown when the header is transparent. If no image is uploaded here, the original logo image will display on a transparent header.

Transparent header font color

Choose a color for the navigation links and button icons that will stand out on the background of the first section of the homepage when the header is transparent.

Main menu options

Menu

Choose a menu from Navigation to be the site navigation. This defaults to "Main menu". See our Navigation documentation on how the structure of the navigation works in the header with dropdown links, top level links, etc.

Show search icon link

Disable this to remove the search icon and search options from the header.

Show cart icon link

(Whisk 11.0.4 and greater)

Disable this to remove the cart icon and link in the header. This is only recommended if you do not sell products in the traditional way on your store. Removing this removes the only built in way for customers to get to the cart, and then to checkout through Shopify.

Header font style

Choose a font style for the main navigation links.

Header text size

Choose a font size for the main navigation links.

Make header text bold

Make the font for the menu links in the header bold.

Dropdown menu options

Top level menu items are the first ones that appear when you click open the dropdown. They can either be a freestanding link, or have sub links. In the example below, "Blog" has sub links that will display when the "Blog" linked is clicked.

Top level menu items font style

Choose a font style for the top level links when the menu item has a simple dropdown.

Top level menu items text size

Choose a font size for the top level links.

Make top level menu items bold

Make the font for the top level links bold.

All secondary level links will default to the body copy at it's default size (medium)

Mega menu options

Top level menu items font style

Choose a font style for the top level links when the menu item is a mega menu.