Customizing Instant Site header

A header is the section at the top of your website that usually contains your brand logo, a navigation menu with links to other pages and sections of your site, a search field, a bag icon, and a login button for customer accounts. 

On your Instant Site, you can choose what elements to include in your site header and adjust their appearance for your site visitors. 

Customizing Instant Site header content

Your site header consists of different elements that you can add, change, and remove. For example, change links in the navigation menu, or add a button that leads right to your online shop.

In your Instant Site editor, you manage header content on the Content tab of the Header & Menu section. Here’s what content you can manage: 

• Site logo. A visual symbol or text-based design representing your brand. 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.
• Navigation menu. A set of links, also called menu items, at the top of your site. You can navigate visitors to different site pages and sections, or create a product categories menu where you show groups of products based on shared characteristics, like product type or brand.
• Button. You can add a button to highlight a specific action. For example, add a button that will redirect visitors to your online store, or dial a specified number, allowing customers to quickly contact you.
• Contacts. To help customers reach out to you, you can add contacts at the top of your site. Please note that adding contacts is available only on some of the header layouts.
  

  

To customize the Instant Site header’s content:

1. From your Ecwid admin, go to Website and click Edit Site.
2. In the Homepage Sections menu, click Header & Menu.
3. From the Content tab, customize the header content:
   • Logo: Add text or image.
   • Navigation menu: Manage links that you want to appear in the navigation menu.
   • Button: Change the title or action of the button. To remove a button, all you have to do is to remove its title.
   • Contacts (may be not available on some header layouts): Add phone or/and email.
   • A clickable icon that opens your social media account (may be not available on some header layouts): Select a social media platform and add a link to your account. Visitors will see the icon they can click to go to your profile.
4. Click Publish.

Learn more about customizing header content:

Editing Instant Site logo →

Favicon for Instant Site →

Creating product categories menu →

Customizing Instant Site header design

You customize the header appearance by selecting one of several header layout presets and adjusting settings like the background color and design of all elements of the header. You can also hide the search field, shop icon if you don’t need them.

In your Instant Site editor, you manage the header look on the Design tab of the Header & Menu section.

To customize the Instant Site header’s design:

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 of:
   • Header layout: Choose a layout for your header.
   • Site logo: Enable or disable the site logo.
   • Background: Make the header transparent, grayscale transparent, or select a solid color. To customize the color, choose Solid color from the dropdown, then specify your preferred color.
   • Menu & Icons: Adjust the font and color of the header content. Select which elements to display, such as the navigation menu, email, phone number, shopping bag icon, search bar, or customer account login link.
   • Button: Customize the button's appearance, if applicable. Use the Show element toggle to display or hide the button.
4. Click Publish.