The header is the rectangular area that runs across the top of your store featuring your logo, navigation, cart icon, and more. It appears on every page to promote your company's brand and make it instantly recognizable to your visitors. This is a static section and cannot be repositioned.
Use the theme editor to customize general settings and header blocks to configure your header feature. Add to the announcement bar and add a mega menu by customizing the blocks.
Customize general settings
Click the Header section to open general settings for the feature.
Click Select image below Logo image to connect your logo to the header.
To feature a separate logo image for mobile devices, select a Mobile logo image.
Adjust width for the logos with the Logo max width and Mobile logo max width range finders.
Select an option from the Menu style to position the logo and menu.
The options are:
- Logo left, menu left
- Logo left, menu center
- Logo center, menu left
- Logo center, menu center
Also known as a 'fixed' header, activate Enable sticky header to keep the header visible as customers scroll down the page.
Enable Show separator line to include a solid border between header and content below. Disable to remove.
The Toolbar is the narrow and wide portion of the header positioned at the top. This can include social media icons, announcements, country selector, and language selector.
Enable Show social icons to include quick links to your brand's social media accounts.
Adjust the colors for the Toolbar by changing the Text and Background color.
Enable Show language selector to include a dropdown for customers to select their preferred language.
Enable Show country selector to include a dropdown for customers to select their country/region and view prices in their currency.
By default, the Main menu will be connected to the Navigation. To connect a different menu, select Change.
To add a Mega menu, the menu connected here requires nested/tiered links.
Customize header blocks
Click the toggle beside Header to reveal its blocks. There are block options for the Announcement bar and Mega menu.
Add to the announcement bar
The Announcement bar in Tailor's header can feature several messages at once. Customers can click arrows to view each announcement.
Add each announcement by customizing Announcement blocks.
Add Text using the provided field, then connect customers with a Link.
Add a mega menu
Click one of the preloaded Mega menu blocks to customize it.
Mega menus make use of nested navigation items in the menu assigned to the Main menu setting.
Build menus using tiers for the best results. Learn more about Nested Navigation.
Mega menu trigger
Identify the menu item in the header navigation to expand into a mega menu. For example, if you have a Women menu item with Tops, Bottoms, etc. nested below it, add Women to the Mega menu trigger field.
Enhance the mega menu's navigation items with added promotions. Combine an Image, headings, and links together to create Promotion 1 and Promotion 2.
Customize the Background and Text color using the provided color pickers.
Select a Position for each promotion to place the feature in the First column or Last column.