It is important to have a header section on every page of your store. Not only does the header serve as the compass for your customers. The Header section is also the primary way of interacting with them, helping them find what they need, and ultimately generating conversions.
The header section usually contains quick access to the shopping cart, which is an important factor in speeding up the customer checkout process. A well-managed header menu also helps newer customers to navigate through your store. Here is an example of setting up the header section in Nova 2022.
Creating a header section
1. From your Shoplazza Admin, go to Online store > Themes > And click the Customize button.
2. Once in the theme editor, click the default Header section and customize your configurations.
3. Here, you can assign a logo to this block by clicking Select image.
4. Here, you can use the Desktop logo width slider to adjust the size of your logos (measured in pixels).
5. For mobile devices, you may edit separately via Mobile logo and Mobile logo width.
To preview your settings on mobile devices, please refer to the drop-down menu on top and change to Mobile.
6. In the Navigation block, click the "Edit menu" icon to edit your header menu in your Shoplazza Admin > Online store > Navigation.
7. Use the Change drop-down menu to select another menu list or remove the current menu.
8. To optimize the user experience on mobile devices, you may make changes to the mobile header layout settings by displaying your header with the drawer menu or regular menu.
9. The layout menu provides customizable options for your header. You can modify the look of your header and change how your logo interacts with other elements.
Other header settings
1. Here you are provided with more options to manage your header settings:
- Show first product in mega menus:
- Your first product photo will be shown on the header menu.
- Enable sticky header:
- A sticky header, also known as a fixed header, is a feature that keeps the header section on top when customers scroll down the page.
- Enable mobile sticky header:
- You can also enable this feature for mobile customers.
- Show first product in mega menus:
To display the first product image, a cover photo for this collection must be included before this setup.
2. Under Search style, you are given 3 layout styles to implement a search bar.
- None: This setting will disable the search feature and functions.
- Icon: display the magnifier icon without the search bar.
- Search box: display both the search box and the magnifier icon.
3. Multilingual settings/multi-currency settings are useful features to help with expanding your business globally. Here, you are given the option to display it along with other menus or hide it with the drawer menu.
Multilingual Settings/Multi-currency settings extensions must be installed in advance to show in the theme editor. Please refer to your Shoplazza Admin > Apps > Visit App store to download the APP first.
Global options Background
1. In THEME SETTINGS (located on the bottom left hand corner of your window), you can use the color palette to customize your Header background.
1. In the Navigation font family, you are enabled to assign fonts you've configured from THEME SETTINGS > TYPOGRAPHY.
2. The Navigation font family menu will correspond to the font you've set up under TYPOGRAPHY.
3. Enabling the Capitalize option will change all of your menu text to uppercase.
Other global settings
1. With Edges, you can change to display all elements in Square or Round shapes.
2. Personalize your shopping icon with two types of display:
- Shopping cart
- Shopping bag
3. You may also change how add-to-cart interacts with customers when they click on the icon. There are 3 default styles you can choose from:
- Cart popup: When adding an item to your cart, a notification will be displayed in a separate window on the top right.
- Cart: When adding an item to your cart, customers will be redirected to the shopping cart page.
- Drawer: When adding an item to your cart, a shopping cart menu will pop up on the right side of your screen.
4. You can Enable Ajax search to allow search results to appear on the drop-down list as customers type in the Ajax search box. Once you are finished editing, click the Save draft button, and you're done!
For more information about enabling Ajax search in your store, please see here.
A header menu is an essential component of a well-designed website or application. It can help with navigation, organization, and consistency, all of which contribute to a better user experience.