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 navigate your site visitors and highlight the most important pages you want your customers to visit. 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.
4. Click Publish.

Changing logo in the site header

To personalize your website, you can add an image or text in the header to display as your logo. When visitors click your logo, they return to your homepage.

Try to keep image dimensions within the range of 18x18px as the minimum and 3962x3962px as the maximum. Images can be in common image formats like PNG or JPG, but you can’t use the SVG format.

To change the logo of your site:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the Homepage Sections menu, click Header & Menu.
3. Near the Site logo, click Change.
4. Choose the logo type. It can be an image or text.
5. Click Change image to add your own image.
6. Click Publish.

Adding navigation menu to 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.

You can choose different layouts to display your navigation menu on the desktop. 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.
3. In the Content tab, click Navigation menu.
4. You can click on the existing link to edit it or create a new link by clicking Add Menu Item.
5. (optional) To rearrange the order of links, drag-and-drop them to the desired position.
6. Click on the menu item to customize it. In the Title field, enter the name that will make sense to customers. For example, About Us, Give Us a Call, etc.
7. 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.
8. Click Back to return to the main settings page of a section.
9. Switch to the Design tab and select the layout for the navigation menu.
10. Set up the look of the menu by choosing the custom background color and what menu items to display. 
11. Click Publish.

Adding categories menu to site header

Product categories are groups of items that you bundle to show on the same page in your store — for example, Bike accessories, Summer collection, Bestsellers. You can display the menu of your root categories, so that shoppers can quickly find the product they are looking for:

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 on your Instant Site:

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. Give the item a title that clearly communicates that here they can find categories. For example, Store.
5. Click the Action on click drop-down and select Go to store.
6. Make sure the Show categories on menu hover toggle is enabled. Turn the toggle off to hide the categories menu.
7. Click Publish.

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.