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.

Text size: Controls the size of the text. Available options: Small, Normal, Large.

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.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.

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.

Text size: Controls the size of the text. Available options: Small, Normal, Large.

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.

Text size: Controls the size of the text. Available options: Small, Normal, Large.

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.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Features

The header’s Features section is a limited version of the Features section. It has a few settings:

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.

Text size: Controls the size of the text. Available options: Extra Small, Small, Normal, Large.

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 give you the option to adjust the top & bottom section spacing values (padding) separately for the desktop and mobile.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.

Feature block

The Features 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. Select “Custom icon” to select your own image.

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.

Fullwidth navigation: Applies only to the “Alternative” header layout.

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.

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

Navigation font size: Applies to all navigation menus. It will still be affected from the global font size scale setting.

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.

Make menu items center aligned: Only applies in alternative header layout and if a secondary menu is not set.

Enable inline submenu expansion (desktop): When enabled, the main menu’s 3rd-level items will displayed inline along with the 2nd-level menu items, instead of creating another pop-out layer. Only affects desktop navigation.

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.

Account

A customer account icon is displayed on the header, that allows customers to log in and access their accounts. You can toggle the visibility of the customer account icon by going to Settings > Customer accounts, and enable or disable the Show sign-in links setting.

Customer account menu: Set the menu displayed on the account component when clicked. The menu “Customer account main menu” is selected by default, which you can edit via Content > Menus.

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

Search display: Control how search is displayed on the header:

• Show: Displays the search inline with the header (default).
• Hide: Hide the search completely.
• Show as icon: Displays the search as a button icon that expands on click.

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.

Custom action icon

Show custom action: When enabled, a custom icon will be displayed along with the rest of the action icons (e.g. account, minicart).

Label: Provide a written description of the action. This text is used for accessibility reasons and is not visible on page.

Link: Set the URL that the action will link to.

Icon: Select an icon from the predefined list, or choose Custom icon to use your own file.

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.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

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.