How to insert the generated menu?

1. You can use the auto-replacement code by entering [MENU:shop_producers:start-XX:list], where XX is the ID of the start category.
   You can fill the list of values using the generator «Store Manufacturers Widget».
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
• :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
• :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)
• :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 - carousel scrolling with touch swipe support, for example [MENU:shop_producers:start-0:list:htmlonly:carousel:carousel-margin-6] *
  Changing parameters

  
  

  ---

  
  Available parameters (:carousel-PARAMETER-VALUE):
  items (number, auto) — visible items count
  margin (px, 0) — spacing between items
  slideBy (number, =items) — items to scroll per click
  smartSpeed (ms, 250) — animation speed
  stagePadding (px, 0) — container padding
  nav (true/false, true) — prev/next buttons
  dots (true/false, false) — pagination dots
  loop (true/false, false) — infinite loop
  rewind (true/false, true) — rewind to start
  autoplay (true/false, false) — auto play
  autoplayTimeout (ms, 9000) — interval
  autoplaySpeed (ms, 250) — speed
  autoplayHoverPause (true/false, true) — pause on hover
  mouseDrag / touchDrag (true/false, true) — drag support
  freeDrag (true/false, false) — free drag mode
  center (true/false, false) — center active item
  autoWidth (true/false, true on mobile) — auto item width
  autoHeight (true/false, false) — auto height
  animateOut / animateIn (string) — CSS animation classes
  startPosition (number, 0) — start position
  
  Example: :carousel:carousel-margin-6:carousel-autoplay-true:carousel-autoplayTimeout-3000
  Parameters can also be set via data attributes: data-carousel-margin="10"

  ---

• :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 category «Manufacturers» first, with subcategories inside. In that case, you can avoid showing the main «Manufacturers» 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