Header Section

The header is one of the first elements that a visitor sees while viewing your website. It contains links to the important pages of your online store.


Change Header

You can change the header of the website to make it more attractive and appealing to your users.


1. From the Homepage, click on Edit Website.

2. Click on Add Section.

3. Click on the Header option and select any layout from the given templates.

4. Hover on any header template and click on , to get a preview of the selected template. Click on Change Header if you want to apply the template.


Please Note
This functionality is currently unavailable for mobile. You can change the header template only from your computer.

Change Color Palette

Color plays an important role when it comes to making any element of the website attractive to the user.


1. From the Homepage, click on Edit Website.

2. Click anywhere on the header section.

3. Select the color combination as per your requirement and click on Apply.

1. From the Homepage, tap on Edit Website.

2. Tap on next to the header section. The following options get displayed.

3. Tap on Background.

The following options get displayed.

4. Select Background Color and the following options get displayed.

5. Select the color as per your requirement and tap on Save.

6. Select the Color Palette option and the following options get displayed.

7. Select the color combination as per your requirement and tap on Save.

Customize Menu

You can rearrange and edit the menu layout with these options.


1. From the Homepage, click on Edit Website.

2. Click anywhere on the menu section in the header and select Manage Menu. 

3. The following slider will be displayed on the screen. You can use , to drag the menu icons to re-arrange the menu order.

4. Click on  which will display the following options.

1. Click on Edit to make changes in the menu links and name.

2. The Add Child Menu will add a sub-menu to the main menu name.

3. To delete the menu click on Remove

Child Menu & Sub-Child Menu Link

1. In order add a child menu under the parent menu, you need to first click on > Add Child Menu.

2. Under Link To slider select the option that you want to link the child menu with.

3. For example on selecting Category option, you need to select the category that is registered in your system.

4. The child menu details for that options gets displayed. You can even choose whether you want to open the child menu option either in the current window or in the new window. Click on Save.

5. The child menu gets created. Click on Save to update the changes made.


Please Note
If the parent menu has child menus, then while dragging the parent menu the child menus will also be dragged along with it.

Sub-Child Menu

You can add sub-child menus under the child menu itself by following the same process mentioned above.

The sub-child menu, once created gets displayed as shown below.

6. In case if you want to make changes on how the child and sub-child menu should appear under the parent menu, you can do so with the help of Flyout Menu and Mega Menu.

Flyout Menu

This option allows you to display the child menu first, whenever a customer hovers over a parent menu. Later, when a customer hovers over a child menu then the sub-child menu is displayed.

Mega Menu

This option allows you to display the child menu and sub-child menu together, whenever a customer hovers over a parent menu.


Important Note
In case you delete the child menu, the sub-child menu under it will become child menu to the parent menu.

 

5. Click on Settings if you want to apply this menu customization to the header and/or the foot.

6. You will have the option to display the menus either on the footer/header or on both. Click on Save to update the changes made.


Note

If you want to link a menu to a particular section such as products, enquiry forms, categories, links, etc. click on Add Menu Link.

The following option gets displayed. Select an option from the list that you want to link your menus to.

To know more about linking, click here.

Change Styling

You can also change the styling of the menu with this option.

1. From the Homepage, click on Edit Website.

2. Click anywhere on the menu section in the header. The following options will be displayed.

3. Select Change Styling. The following options will be displayed on the screen.

1. Clicking on this option, displays a drop-down with a variety of font styles that you can choose from.

2. This option can be used to change the font weight.

3. This option allows you to increase the size of the text. The button will get disabled once it reaches the maximum size.

4. This option allows you to decrease the size of the text. The button will get disabled once it reaches the smallest size.

5. This option can be used to change the text style to Bold.

6. This option can be used to change the text style to Italic.

7. You can underline the text with this option.

8. This option allows you to change the color of the text. Clicking on this option will open the color palette.  To know more about colors, click here.

9. This option helps you decide whether the text needs to be aligned to the left, right, or center. Selecting this option will display the following options.

10. Selecting this displays the following options. You can change the text to uppercase or lowercase.

11. This option allows you to delete the text section from the block

1. From the Homepage, tap on Edit Website.

2. Tap on , to open the main menu slider.

3. Tap on Edit Menu.

4. The following slider gets displayed. Here you can tap on the to drag the menu options up and down. You can even tap on  to delete the menu item.

5. Once you tap on  to delete a menu, the following pop-up gets displayed. Tap on Remove and the menu gets deleted.

6. Tap on Save, once you have made some changes under the Manage Menu section.


Note

Tapping on Add Menu Link will display the following page, from which you can add the below menus to your CMS website.

To know more about linking, tap here.

Customize Logo

The company logo plays an important part when it comes to creating a good brand image for your online store.


1. From the Homepage, click on Edit Website.

2. Click on the logo of your website. The following options will be displayed.

Go to Link: This option will take you to the page or section to which it is linked. Click here to know more linking.

Upload Logo: This option will open the following slider.

You can upload separate logos for mobile and website.

The Upload Image option opens a modal window from which, you can upload the picture.

The Add Text option enables the text option with which you can enter text in your logo.

The Clear option removes all the changes made.

Create New Logo: This option will open the following slider. Enter the Company Name and Tag Line and click on Next.

Select the Logo of your choice.

Make changes in the Logo section if you wish and click on Save once all the changes are made.

Company Name: This option displays the company name. You can make changes to the company name if you wish.

In case you have multiple outlets registered with us, you can add different names for multiple outlets.


Note

Click on Copy to All to apply the name to all your outlets.

Change Styling: Clicking on this option will display the following options.

1. This will open the Upload Logo slider.

2. You can change the font style with this option.

3. You can change the font-weight with this option. The following options will be displayed.

4. This option allows you the increase the font size.

5. This option allows you to decrease the font size.

6. You can change the text to Bold.

7. You can change the text to Italic.

8. You can Underline the text.

9. You can customize the color for the following elements.

Icon Color: You can change the color of your logo’s icon.

Text Color: You can change the text color of your logo.

Icon Background Color: This option will allow you to change the background color of the icon.

Icon Border Color: You can change the color of the logo’s border with this option.

10. Clicking on this will display the following options. You can apply borders to the logo as per your requirement.

11. You can set the image radius with this option.

12. You can define the border width with this option. The following options will be displayed.

3. If you want to improve keyword search of your store name to your customers, you can simply click on your logo and click on SEO.

4. Add meaningful text or description for your logos, which could help improve your website visibility to your customers, and click on Save.

Note

Once you have uploaded the logo image, you can edit the same by clicking on that image. The following options will be displayed.

The following editing options will be available.

1. This option will allow you to move the image around.

2. This option will flip the image horizontally.

3. This option will flip the image vertically.

4. This option will rotate the image at a 90-degree angle in a clockwise direction.

5. This will reset the image to the default position.

6. This option will delete the image.

You can also edit the text on the logo by clicking on it. The following options will be displayed.

1. Clicking on this will display the following options.

Font Type: You can change the font of the text with the options displayed.

Font Style: You can change the font style with the options displayed.

2. You can increase the font size with this option.

3. You can decrease the font size with this option.

4. You can change the text to Bold.

5. You can change the text to Italic.

6. This option allows you to change the color of the text.

7. You can change the alignment of the text with the following options.

8. You can move the text with this option.

9. This option deletes the text.

1. From the Homepage, tap on Edit Website.

2. Tap on , and select the Logo option.

The following options get displayed.

Upload Logo: This option opens a modal window from which, you can select the required image as your logo.

Gallery: You can upload the image from your device.

Camera: You can click a picture from your device camera and upload the logo. Once you have uploaded the image you can rotate or crop it as per your requirement.

3. Tap on Save once you have made all the changes.

Company Name: This option displays the company name. You can make changes to the company name if you wish.

In case you have multiple outlets registered with us, you can add different names for multiple outlets.

4. Tap on Copy to All to apply the company name to all the outlets.

Logo Color: This option will display the following color palette. Select the color as per your requirement and tap on Save.

Change Font: You can change the font and the font style with these options.

Tapping on Font will display the following font options.

Tap on Font Style to define the font-weight.

5. Tap on Save once you have made all the changes.

Update Company Name

The company name is the identity of your online store.


1. From the Homepage, click on Edit Website.

2. Click on the logo of your website. The following options will be displayed.

3. Click on Company Name and the names of all your outlets get displayed.

4. Click on the Copy to All option if you want to apply the name to all your outlets.

5. Click on Save once all the changes are made.

1. From the Homepage, tap on Edit Website.

2. Tap on , and select the Logo option.

3. Tap on Company Name.

The names of all your outlets get displayed.

4. Tap on the Copy to All option if you want to apply the name to all your outlets.

5. Tap on Save once all the changes are made.

Add / Update Social Links

Social Media plays a very important role when it comes to creating brand awareness. You can add your links to your social media pages with this option.


1. From the Homepage, click on Edit Website.

2. Click on the social media icons on the header. The following options will be displayed.

Go To Link: This option will take you to the page to which it is linked.

Edit Social Links: This option will open the following slider. You can enter the links to your social media pages here.

Click on Settings to display these social media links on Header and/or Footer.

Click on Save to apply the changes made.

Change Styling: This allows you to customize the social media icons. The following options are displayed.

1. This option allows you to change the color of the icons.

2. You can remove the icon with this option.


Please Note
This functionality is currently unavailable for mobile. You can edit social media icons, present on the header only from your computer.

Change Search Input Placeholder

You can customize the search box input placeholder text, change its color and styling as per your liking.


1. From the Homepage, click on Edit Website.

2. Hover over the Search bar and click on Edit.

The following options get displayed.

3. Search Product: This allows you to search products that are present on your website.

4. Edit Search Text and Change Styling: Enables you to change the text and styling elements present on the search bar.

5. Search Settings: Enables you to display the Price, Net Weight / Content, and Add to Cart Button option while searching a product on the search bar.

6. If you want to remove the search bar from your website, simply hover over over the search bar and click on Edit > Delete.

1. From the Homepage, tap on Edit Website.

2. Tap on  > Customise Search option.

The following options get displayed.

Edit Search Text: Enables you to change the text present on the search bar.

Change Font: Enables you to change the font style.

Color: Enables you to modify the color scheme of the search bar. Here you can change the text and color styling as you want. You can see the preview on the spot.

Search Settings: Enables you to customize the search settings. Here you can enable the barcode option, express shopping list option, search option via voice, as well as choose the search styling option as per your wish.

On enabling the Search Product by Voice option, your customers can search the products by speaking onto the microphone.

By enabling the Express Shopping Listing option, your customers can search for the products more conveniently.


Please Note

Express Shopping Listing option is only available for grocery-related accounts.

If you want to display the search option in the form of an icon, you can do so by selecting the Search Icon option.

The search bar gets replaced with an icon displayed on the website header.

Delete: Enables you to delete the search bar itself.

3. Tap on the Save tab on the bottom right corner of your screen, to save changes on your website.

Was this Article Helpful?
Yes
No
Glad We Could Help You!

6 thoughts on “Header Section”

  1. how to link my facebook page | how to link my linkedin page | how to link my twitter page | how to link my instagram page | how to link my pinterest page | how to link my social media accounts | how to update my social media links on website ~ #addupdatesociallinks

  2. how to change the header on my website | how to setup my website header | how to add a hero image to my website ~ #changeheader

  3. how to design my company logo | how to make logo with no design skills | how to create my own logo | how to make a unique logo | how to design a custom logo | how to display a different logo for website and mobile ~ #customizelogo

  4. how to customize header menu style on website | how to manage header menu on website | how to change the navigation menu on website | how to design a custom navigation menu~ #customizemenu

  5. how to change the header color | how to change the header menu color | how to change the color of the page header ~ changecolorpaletter

  6. how to change search input placeholder | how to remove the search bar from my website header ~ #changesearchinputplaceholder

Comments are closed.