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 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 > 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 > 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 > 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 > 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 > 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.

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

A menu item is an internal link that appears in the navigation menu of your Instant Site. You can add, edit, or remove items to customize your navigation menu.

Each menu item can perform one of the following actions when clicked:

• Scroll to one of your site’s sections.
• Open a link to any website that you specify.
• Compose an email. After clicking the link, a default mail service on a visitor’s device will open ready to send a message to an email you specify.
• Dial a number. After clicking the link, a visitor’s device will dial a number you specify.
• Open your online store.
• Open a page on your site that you specify.
• Go to a product category that you specify.
• Show a dropdown with the brands available in your store (if you have specified brands for products).

To add a menu item to a navigation menu:

1. From Retail POS, go to the Online tab > Webstore > Edit Site.
2. In the menu on the left, click Header & Menu.
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. In the Action on click, choose what action should the link perform.
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 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.

If you no longer need a link in the navigation menu, you can delete it. To delete an item from the navigation menu, go to Header & Menu > Content > Navigation menu, click the item that you don’t want to show anymore, then click Delete Menu Item at the bottom of the page and publish the changes.

Creating a dropdown menu for product categories in your Instant Site

If your products are organized into categories, you can display root categories as navigation menu items in the top menu on your site. This helps visitors find specific products easily. Each menu item can contain up to 20 subcategories in the dropdown list.

The dropdown menu displays only second and third-level categories when hovered over a root category. For example, if you have nested subcategories like Accessoires > Hats > Panamas > Classic, your top menu will display only Accessoires > Hats > Panamas.

To add a product categories menu to your site header:

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

Adding a brands dropdown to your Instant Site top menu

When you assign brands to your products in Retail POS, you can then showcase the list of those brands in your Instant Site navigation menu. When customers hover over ‘Brands’ in the menu, they will see the list of your brands. Clicking a brand will open a page with the list of all products from that brand.

The dropdown menu can include up to 30 brands, filtered in the alphabetical order. In case you have more than 30 brands, eCom will automatically display the 30 brands with the most products.

To add a brand dropdown menu to your site header:

1. Assign at least one brand to your products.
2. From Retail POS, go to the Online tab > Webstore > Edit Site.
3. In the menu on the left, click Header & Menu > Navigation Menu.
4. Click Add Menu Item or edit an existing item.
5. Click Action on click and select Show brand list. Brands will be added automatically.
6. Click Publish.

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