Header

The header section group controls the announcement bar, the auxiliary announcement 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.

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.

Auxiliary Announcement bar

Section settings

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

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.

Header section

How to set up the secondary menu (Browse by category)

Maranello’s secondary menu location is built to display a mega menu style navigation and aid with category browsing. To take advantage of this feature you need to create a nested navigation menu for your product categories. On this menu, each top level menu item needs to have two nested level menus.

For example: Your secondary menu consists of the “Tires”, “Wheels”, “Batteries” and “Car Accessories” top level menu items. The “Tires” menu items has the “Types”, “Popular Brands”, “Services” and “Guides” second level menu items. Each second level menu item contains links to a corresponding product collection. The top level and second level menu items aid with categorization and they don’t need to link to any particular page.

Once the secondary menu is created, navigate to Online Store > Themes in your Shopify admin, select the Maranello theme and click Customize.

In the theme customization page click on the Header section and scroll to Navigation in the block settings area. Under Secondary menu click Select menu and select the menu you have just created as your online store’s secondary menu.

How to set up a mega menu on the primary menu

Adding a mega menu 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 “Tires”, “Wheels”, “Batteries” and “Car accessories” menu items. If you wanted to have “Tires” and its sub-menu to be the mega menu you would type “Tires” in the Menu item field.

Now every sub-menu of the “Tires” 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.

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.

Navigation

Main Menu: The main menu of your shop.

Main menu position: Choose whether to have the menu on the left, center or right.

Secondary menu: The secondary menu of your shop. This will be displayed as a button that opens up a mega menu which contains your secondary menu. Very helpful if you have a long list of collections. Read more about setting up your secondary menu.

Secondary menu button label: Override the default label of your secondary menu’s button trigger.

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 take up the space of one column.

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.

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.

Mini cart

Mini cart icon: Choose from different icons for your mini cart drawer toggle.

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.

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).

Colors

You can choose your preferred color scheme for the Header, Sub-menu 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.

Remove the header’s border: Toggles the visibility of the header’s border.

Section spacing

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

Mega menu

Adding a mega menu 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 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 “Tires”, “Wheels”, “Batteries”, “Car Accessories”. If you wanted to have “Shop by category” and its sub-menu to be the mega menu you would type “Shop by category” in the Menu item field.

Now every sub-menu on that menu item will be turned into a list of menu items.

Please note: For a mega menu to make sense, your mega menu top level 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.

Features

The header features section is the same as the global Features section. It consists of multiple feature blocks with the following settings:

1. 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.
2. 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.
3. Heading: The title of the feature box. In the previous example of the support card it could be your phone number or an email.
4. Text: A brief description of the feature.

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.