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 eCom (E-Series) 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 hide search bar, shop icon, customers’ account login button, or navigation menu, go to the Design tab > Menu & Icons of the Header section and switch the corresponding toggles.

To customize the Instant Site header’s content:

1. From Retail POS, go to the Online tab > Webstore (or Website) > 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.

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 or 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 Retail POS, go to the Online tab > Webstore (or Website) > 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.

Editing Instant Site logo

To personalize your Instant Site, you can add a logo that represents your brand. The logo appears in the site header at the top. When visitors click your logo, they return to your homepage. You can add an image or text as your logo.

When you add your custom logo, 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 Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the Homepage Sections menu, select Header & Menu.
3. Near the Site logo, click Change. If you don't have a logo, click Add Logo.
4. Choose the logo type. It can be an image or text.
5. Click Change image to upload your own image. For a text logo, enter the desired word or phrase.
6. Click Publish.

After you add a logo, you can temporarily hide it from your site so that it is not shown at the top menu. To hide a logo from your site, go to Header & Menu > Design tab > Site logo and turn off the Show element toggle, then publish the changes. 

To make the logo visible to site visitors again, turn on the Show element toggle, then publish the changes.

Adding contacts to Instant Site header

On Instant Site, you can add your phone number and/or email to the site header to make it easier for customers to reach out to you.

To add contact to the header of your Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the menu on the left, click Header & Menu.

3. Click Contact Information.

   If you don’t see the Contact Information button, try to choose another header layout on the Design tab. The header on your Instant Site has several pre-designed layouts, but only some support adding contacts.

4. In the Phone field, specify your phone number.
5. In the Email field, specify your email.
6. Click Publish.

To remove contacts from the header of your Instant Site, go to Header & Menu > Contact Information and remove the phone or email from the corresponding fields, then publish the changes.

Adding a button to Instant Site header

On Instant Site, you can add a button to the header to highlight a specific action. For example, you can add a button that will redirect visitors to your online store, or dial a specified number, allowing customers to quickly contact you. You can customize the text on the button, its appearance, and where it leads.

A button that you add to your site header can perform different actions:

• Scroll to a specific site section
• Navigate to any website
• Open your online store or any other page of your site.
• Dial a phone number that you specify
• Open a visitor’s email client to compose a message.

You can add only one button to your header.

To add a button to the header of your Instant Site:

1. From Retail POS, go to the Online tab > Webstore (or Website) > Edit Site.
2. In the menu on the left, click Header & Menu.

3. Click Add Button.

   If you don’t see the Add Button button, try to choose another header layout on the Design tab.

4. In the Title field, specify the text on the button. For example, Shop Online, or Call Us.
5. In the Action on click, select what action should the button perform when visitors click it.
6. (optional) Switch to the Design tab and click Button to customize the button’s look: change font, size, shape, etc.
7. Click Publish.

To remove a button from the Instant Site header, go to Header & Menu > Button and remove the button name from the Title field, then publish the changes.

Adjusting navigation menu of your Instant Site

A navigation menu is a list of links displayed at the top of your site, helping visitors easily explore your website. The menu serves as the starting point for visitors to move around your site. On mobile devices, the navigation bar is usually placed on your website’s top left or right corner and looks like a hamburger or, as typically referred to – a hamburger menu button.

Learn how you can adjust the navigation menu on Lightspeed eCom site →