How to insert the generated menu?

1. You can use the automatic replacement code by entering [MENU:shop_categories:vertical:products]
   You can fill the list of values ​​using the «Shop Categories Widget» generator.
2. You can insert the generated menu code into blocks/menus or pages.
3. Attention! If you use several menus on one page, you do not need to insert the JavaScript and CSS style again.
   By default, this JavaScript and CSS style is already embedded in the standard set of functions of your store. You can re-insert the code only if you need to change its design or functions.

The following parameters can be used in the code:

• :vertical - vertical menu
• :flexmenu — vertically flexed menu (Vertically Flex) — compact vertical menu with fixed height, containing categories and subcategories of the store. Child categories are displayed in a block with fixed height to the right of the parent category button. Additional parameters: :height-400 — height of the block, :width-300 — width of the block, :scroll-lock — scroll lock, :with-overlay — script to create an overlay block that separates submenu items from the main menu block.
  In this case, two additional parameters are available: :fix-on-top (attachment to the top of the block) and :disallow-overflow (prevents elements from overflowing beyond the bottom of the menu block).
• :horizontal - horizontal menu (You can also display inside pages as blocks with different nesting levels. An additional style to the block can be specified by specifying the ID- "hotengine-categories-lists-horizontal")
• :dropdown - dropdown menu on hover
• :megamenu — responsywne menu Mega Menu — uniwersalne rozwiązanie nawigacyjne, które po aktywacji wyświetla przycisk typu „hamburger”. Po kliknięciu otwiera się uporządkowane okno z kategoriami po lewej stronie i dynamiczną treścią po prawej. Może być umieszczone w dowolnej części witryny. W wersji mobilnej menu automatycznie przełącza się w tryb pełnoekranowy, zapewniając wygodną nawigację. Parametr dodatkowy: :multiply — aktywuje tryb rozszerzonego wyświetlania, w którym w prawym panelu wyświetlane są jednocześnie nie tylko podkategorie podrzędne, ale także ich listy zagnieżdżone, tworząc przejrzystą siatkę produktów lub sekcji.
• :full - expanded list of categories
• :list - a standard list of subcategories (displays the same list of subcategories as on the page of the main selected start-X category. When using list, only the start-X parameter is used)
• :treelevel-X - Where X is the nesting level of the category. For example, if you need to place only the main categories and their child headings without entering their subsequent subcategories, then you can use the value "2"
• :products - Show the number of products within a category
• :dataattr - Add data-markup with category information (ID, number of child categories, number of products)
• :googlenav - Add google markup (itemprop name and url)
• :imageattr – Add attribute with icon (If an icon is set for the category, a special attribute will be added — it can be used to display the icon in the menu.)
• :scroll-9999x3 - Scroll effect for categories (only in :list mode) - replaces the display with a horizontally scrollable categories block. The function is activated only if the screen width is less than the specified value. Pagination is set by the second parameter (number of dots).
  
  How to add the parameter

  The categories block will scroll according to the parameter values, for example «:scroll-9999x3», where:

  • 9999 — maximum screen width for activating the scroll;
  • 3 — number of dots in pagination (if not specified, pagination is disabled).
• :carousel - experimental owl-carousel function, scrolling with touch swipe support *
  Changing parameters

  
  

  ---

  
  By default, the window size is determined using Javascript.
  You can specify many additional parameters, the list of which is available here:Docs Options.
  To set the parameter, use the template:
  :carousel-autoplayTimeout-1000
  :carousel-autoplaySpeed-5000
  :carousel-autoplay-true
  and so on (:carousel-PARAMETER-VALUE).
  
  Alternatively, the option can be specified using the JavaScript attribute carousel -...
  data-carousel-autoplayTimeout = "1000"
  data-carousel-autoplaySpeed ​​= "250"
  data-carousel-autoplay = "true"
  and so on (data-carouserl-PARAMETER = "value")

  ---

• :add-javascript - if this parameter is not added, it will only a list of categories (no javscript and css styles that you need to insert yourself beforehand).
  This option is useful if you want to create your own style for the menu, but want the categories to be inserted automatically. Then you need to insert JavaScript, CSS code, and shortcode [MENU ...]
• :start-X - where X is the ID of the category to start with.
  This parameter is useful if you have the "Store" category first and subcategories in it. Then you can skip showing your main Store category in the menu.
• :id- - create a DIV object with the specified ID, inside which the menu will be inserted. Can be used to customize the menu