Customizing Instant Site header

A header is the section at the top of your website that usually contains your site’s navigation or categories menu, logo, a search field, a bag icon, contact information, and a login button for customer accounts.

The header is a great place to highlight site pages, or showcase categories and brands that you sell. On your Instant Site, you can customize how the header looks and what elements to include in it.

Customizing header appearance

All elements that you add to the header, appear at the very top of every page to help visitors navigate your site. 

On mobile screens, the header is collapsed to the burger menu, so visitors have to tap the menu to see the header:

To edit the design of the header:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the Homepage Sections menu, click Header & Menu.
3. Switch to the Design tab to customize appearance:
   • Layout. Choose the looks of your header.
   • Site logo. Turn the logo on or off.
   • Background. You can make the header transparent, grayscale transparent, or choose a solid color for the background. To change the header color, select the Solid color in the dropdown and then specify the color.
   • Menu & Icons. Change font and color for all content in the header. Here, you can also specify what elements to show in the header: navigation menu, email, phone, shopping bag icon, search bar, and customer account login link.
   • Button (if you have any). Customize how the button looks like. You can hide and display the button from here by switching the Show element toggle.
4. Click Publish.

Adding navigation menu to Instant Site header

Navigation, or website menu, is a list of links that is displayed on top of your site:

A website menu makes it easier for customers to navigate while browsing your site and find what they are looking for. Each link in the navbar can redirect visitors to a specific page or section of your site or to any other page on the Internet. You can also create click-to-call or mail-to links, so that customers can reach out to you. 

To highlight a specific action in the top menu, add it as a button in the Header & Menu section instead of a regular menu item. For example, menu items can redirect visitors to site pages, while clicking the button can dial a specified number, allowing customers to quickly contact you.

Remember that when someone opens your site on a mobile device, the navigation menu is accessible through the collapsible burger menu.

To set up a navigation menu:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the menu on the left, click Header & Menu.
   To add a button instead of a menu item, click Add Button and specify its action on click.
3. Click Navigation menu, then click on the existing item to edit it or create a new link by clicking Add Menu Item. 
4. In the Title field, enter the name that will make sense to customers. For example, About Us, Give Us a Call, etc.
5. Choose the action on click:
   • Scroll to site section — redirect visitors to one of your site’s sections.
   • Go to link — enter any URL to redirect customers on that page.
   • Compose email — enter your email. After clicking the link, the default mail service on a customer’s device will open.
   • Call phone — enter your phone number. After clicking the link, a customer’s phone will dial your number.
   • Go to store — a customer will be redirected to your storefront.
   • Go to site page — choose a page on your site where a customer will be redirected to.
   • Go to store category — choose a root category that will open upon click. Switch the Show subcategories on menu hover toggle to show subcategories. When turned off, the menu item will only display the root category. 
6. Click Back to return to the list of menu items. To rearrange the order of links, drag-and-drop them to the desired position.
7. Click Back again to return to the main settings page of a section.
8. Switch to the Design tab and select the layout for the navigation menu.
9. Set up the look of the menu by choosing the custom background color and what menu items to display. 
10. Click Publish.

Adding product category menu to Instant Site header

Product categories are groups of similar items that are meant to help customers quickly find what they’re looking for based on type or brand. An example would be Summer collection, Nike shoes, Bestsellers.

You can display root categories as menu items in the top menu on your site. Each menu item can contain up to 20 subcategories in the dropdown list.

The menu item displays only second and third-level categories upon hover. For example, if you have a category with nested subcategories like Accessoires → Hats → Panamas → Classic, your top menu will display only Accessoires → Hats → Panamas:

Note that when customers open your site on mobile devices, the categories menu will be hidden beneath the collapsible burger menu.

To create a categories menu in your Instant Site editor:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the menu on the left, click Header & Menu → Navigation Menu.
3. You can edit an existing item or create a new one by clicking Add Menu Item.
4. You can enter a title for the menu item that is different from the category name in your store.
5. Click the Action on click drop-down and select Go to store category, then select the root category.
6. You can switch the Show subcategories on menu hover toggle to show subcategories. When turned off, the menu item will only display the root category.
7. Click Publish.

That’s it. Now your site visitors will have at a glance overview of brands or product categories you sell. That helps them to quickly find the product they are looking for and improves their shopping experience.

Removing an item from the navigation menu

You can delete an element from the navigation menu if you no longer need it. 

To delete an item from the navigation menu:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the menu on the left, click Header & Menu.
3. In the Content tab, click Navigation menu.
4. Click the item that you don’t want to show anymore. For example, Store.
5. Click Delete menu item at the bottom of the page.
6. Click Publish.

Related articles

Editing Instant Site logo