Theme documentation

653 views 😃1

Header menus

dominicht

You can display the main menu and a secondary menu, when space is permitted, additionally to the action menu (cart, language, currency, etc.).

It is recommended not to have too menu items on the first line of your menu. When too many items are on the same level, it can be confusing for the user resulting in poor conversion rate. Furthermore, it can break the layout on smaller devices.

Main menu

You can include a few different elements in your main menu. You can add any of the following elements in the menu elements slots found in the setting section:

  • Categories dropdown menu: This option will display a button in your menu toggling a dropdown menu containing your product categories.
  • Categories list (inline): This option will display the list of your categories as menu items. Your subcategories can be displayed in a simple submenu or megamenu based on your preferences. It is preferable not to have too many items at the first level for this option.
  • Brands: This option will display a link to the page displaying a list of your brands.
  • Navigation links: You can display miscellaneous links using this method. To add navigation links to your menu, visit Design > Navigation and click on the default menu with the key main. You’ll be able to add links from there.
  • CTA blocks: This option will display a submenu with up to 4 calls to action items with text in it. You can upload images any size you want, but if you want all images to be the same size, please make sure they are before you upload them. The recommended image/photo size for CTA items is 750px (width) by ?px (height).
  • Blog: This option will display link(s) to your blog(s).

Secondary menu

You can display a secondary menu in some header layouts. To do so, simply visit Design > Navigation > Add menu and create a menu called “Secondary” so that the key of the menu becomes secondary. Then simply add menu items in it to display a secondary menu. This menu is usually located in the header in the top right corner.

Was this helpful?