Header Section

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.

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:

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

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.

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.

Fonts

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!