Header

The header section group controls the Announcement bar, the Top bar, the Rotating text bar, the Features and the master Header sections of your shop.

Announcement bar

Section settings

Text + Link: Optionally add a brief label of text to be displayed on the left area of the announcement bar. It supports an optional link where the text will be linked to.

Menu: Optionally add a helper menu to be displayed on the right area of the announcement bar.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Remove bottom border: Toggles the visibility of the bottom border of the announcement bar.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values (padding) in rems.

Top bar

Section settings

Left menu: Select a menu that will appear on the left side of the top bar. This is optional.

Right menu: Select a menu that will appear on the right side of the top bar. This is optional.

Language & country selectors

Control the visibility of the language and country selectors. Please note that these settings will need configuration in your store’s language and payment settings respectively.

You can read about setting up multiple languages and selling across multiple currencies in the Shopify documentation.

Social media icons

Show social media icons: Control the visibility of your social media icons in the announcement bar. You can read more about how to set up social media icons here.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Remove bottom border: Toggles the visibility of the bottom border.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values (padding) in rems.

Rotating text bar

Section settings

Auto-rotate slides: When enabled, allows the text slides within the bar to automatically transition at a set interval.

Rotate every: Specify the duration in seconds for how long each text slide should remain visible before rotating to the next one.

Show arrow navigation: Optionally display arrows for manual navigation through the text slides, enhancing user interaction.

Remove bottom border: Toggle this setting to remove the bottom border of the text bar for a cleaner appearance.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values (padding) in rems.

Features

The header’s Features section is a limited version of the Features section. It has one important setting:

Stack on mobile: Choose whether the features will stack on mobile (one after the other) or be presented in a slider mode where your customers will scroll through them.

The section consists of up to four feature blocks with the following settings:

Icon: Set an icon for the feature box (optional). For example, if you want to create a support card, typically you would want to choose the “Phone” icon.

Image: If an icon is not desired you can optionally upload your own image for the feature box. Recommended size for best viewing is 80×80.

Heading: The title of the feature box. In the previous example of the support card it could be your phone number or an email.

Header section

Layout

Layout: Choose between the “Normal” and “Alternative” header layout. In the Alternative layout, the main navigation of your store splits into its own bar below the main header. This affects various settings below such as colors and the secondary menu.

Enable sticky header: Make your shop’s header appear when scrolling up. Please note: This feature is disabled in the designer mode for practicality, it will be enabled in your actual shop pages.

Sticky header always on: When the store’s sticky header is enabled, the header will remain visible at the top of the viewport permanently (i.e. not just when your customer scrolls up).

Logo

Image: Upload the image file of your logo in this area to set it globally on the header of every page.

Custom width: Adjust the maximum width of your logo.

Position: Choose the position of the logo on the header (Left, or Center). This will adapt the layout of your header’s top section.

Contact details

Using this area you can provide additional information about your store in a prominent place on the header.

Icon: Optionally choose an icon that will pair your text. Selecting the first blank option will remove the icon entirely.

Heading: The heading of the contact area.

Sub-heading: The sub-heading of the contact area.

Description: You can enter a short textual description here. It will appear as dropdown content of the contact details area.

Navigation

Capitalize menu links: Select whether you want your header menu items to be uppercased or not.

Main Menu: The main menu of your shop.

Menu link highlight: Enter a first-level menu item to highlight it using a distinct color. Note that the names are case sensitive, i.e. if you want to highlight a menu item with the label of “Boards”, you must type “Boards” in this setting.

Menu link highlight color: Select the color of the highlighted menu item.

Secondary menu: The secondary menu of your shop. This will be displayed as a button that opens up a mega menu drawer on the left hand side of the viewport which contains your secondary menu. Very helpful if you have a long list of collections. Read more about setting up your secondary menu. Note: On the “Alternative” header layout this becomes a secondary menu at the end of the main navigation.

Secondary menu button label: Override the default label of your secondary menu’s button trigger. Applies only on the “Alternative” header layout.

Highlight first submenu items: If enabled the first navigation item of each sub-menu will be highlighted.

Side item image, Side item heading, Side item text, and Side item link: Optionally add a call to action item in your secondary menu, containing an image, heading, text and a link. It will be positioned at the bottom of the first level drawer of the menu. Applies only on the “Alternative” header layout.

Mobile navigation

Mobile menu: Optionally you can override the Main Menu as the menu that mobile users will see. Helpful in case you want your mobile menu to be simpler or different. It is highly recommended that you leave this empty and use the Main Menu instead for SEO purposes, since Google predominantly uses the mobile version for indexing. More info on this here.

Mobile sub-menus expand on arrow click: This controls how your mobile menu’s submenus will open. If left unchecked the entire top level menu item will be clickable and expand its submenu. If checked, only the arrow will expand its submenu, and the menu item will navigate to its link.

Menus should use the font from: Choose whether you want the font family of the body or headings for your menus. This applies to both mobile and desktop menus.

Language & country selectors

Control the visibility of the language and country selectors. Please note that these settings will need configuration in your store’s language and payment settings respectively. The settings here apply to the mobile menu. To set up language & country selectors for desktop, refer to the “Top bar” section above or the Footer section.

You can read about setting up multiple languages and selling across multiple currencies in the Shopify documentation.

Mini cart

Redirect to cart page after adding a product to cart: Enable the redirection of the customer to the cart page instead of opening the mini cart after adding a product.

Search

Popular searches: Simply enter a comma separated list of words or phrases to display a list of predefined popular searches under the search bar on your header. When your customers click on these links they will immediately be taken to the search page with the word or phrase defined as the search term.

Colors

You can choose your preferred color scheme for the Header, Sub-menus and Mobile navigation.

Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom header spacing values (padding) in rems.

How to set up a mega menu on the primary (main) menu

Adding one or more mega menus to your main navigation is simple. Under the Header section click on “Add Mega menu”. (Please note that this feature is separate from the “Secondary menu” and applies only to the Main menu).

Click on the Mega menu item and enter the exact name of the first level menu item you would like to transform to a mega menu.

For example: Your main navigation consists of the “Boards”, “Components”, “Tools” and “Deals” menu items. If you wanted to have “Components” and its sub-menus to be the mega menu you would type “Components” in the Menu item field.

Now every sub-menu of the “Components” menu item will be displayed as a list of menu items with a heading.

Please note: For a mega menu to make sense, your top level mega menu item should have two more levels of items.

You can also add a Side item with an Image, Heading, a brief description (Text) and a Link to point to. The side item of your mega menu will always be displayed as the last item in the menu.

Navigation “Badge” block

Since Tokyo’s version 1.2 there is an additional block for the header called the “Badge“. Using it, you can add badges on top of first-level menu items on the main menu.

Settings

Menu item: Enter the menu item you want the badge to appear over. Case sensitive.

Badge label: The text you want the badge to display.

Text color / Background color: The custom colors you wish the badge to have.