Adding a header

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 usually contains quick access to the user’s cart or bag.  It also helps newer customers to navigate through your store.

Setting up your rich text 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 how it looks, please refer to the drop-down menu on top and change to Mobile.

6. Inthe Navigation block, click the "Edit menu" icon to edit the menu for your header section. Eg. Home, New Arrivals and etc.

7. Use the Change menu to select another menu list or remove the current menu.

8. In Mobile navigation type, you can select the regular Menu and Drawer menu. The drawer menu style hides your navigations and the regular Menu displays all the navigation on the bottom.

9. You can change the Layout of your header in the Layout menu. Here, you can select from Logo Left, Logo center, Menu left/logo center, and Logo left/menu left to have different layout styles.

10. Here you are provided with 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:
  • 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.

11. 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 magnifier icon without the search bar.
• Search box: display both the search box and the magnifier icon.

12. Multilingual settings/multi-currency settings are useful features to help with expanding your business globally. Here, you are given the options to display the addons in the drawer menu or on the same interface alone with your menu.

Layout settings

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.

2. In the Navigation font family, you are enabled to assign fonts from THEME SETTINGS > TYPOGRAPHY.

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

4. With Edges, you can change to display all elements in Square or Round.

5. Edit the Cart icon to change your shopping icon to Shopping cart/Shopping bag.

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

7. You can Enable Ajax search to allow search results to appear on the dropdown list as customers type in the Ajax search box.  Once you are finished editing, click the Save draft button and you're done!