Horizontal Flyout Categories Menu

Learn how to enable horizontal flyout categories menu.

Seller Labs avatar
Written by Seller Labs
Updated over a week ago

The Horizontal Flyout Categories Menu add-on moves the categories list to the horizontal bar with a drop-down menu.

Follow the Installing Add-ons from X-Cart App Store guides to install the add-on.

After the installation, proceed to the add-on settings page to configure it.

The add-on settings page consists of three sections:

"Single-Column" Layout Settings

This section allows defining how many sublevels the menu will have.

  • Depth of the menu levels: The setting defines the number of category levels displayed in the top menu. If you set the value to, e.g., 1, the menu will show the root categories only.

"Multicolumn" Layout Settings

This section allows enabling the multicolumn layout and configuring the level properties.

  • Use multicolumn layout for subcategories: If enabled, the multiple column view will display subcategories of the first level only. Define the number of columns on the category settings page:

    If you set the value of the "Number of columns in multicolumn layout" option on the category settings page to 0, the system will use the default field's value from the add-on settings page.

  • Use 2 levels of subcategories in multicolumn layout: If enabled, the multiple column view will display two levels of subcategories.

  • Number of columns in multicolumn layout: The value defines the number of columns in a submenu.

    The value defined here works only if you set the same name option on the category settings page to 0. Otherwise, the system uses the value specified on the category settings page.

  • Width of the column in multicolumn layout: Set the preferred width of a submenu in pxl. The minimum required value is 180.

General Settings

This section allows configuring general layout properties.

  • Show number of products in category: If enabled, the number of products in a category is displayed next to the category's name.

  • Wrap long category names: Enabled this setting to fit long category names in the menu.

  • Show category triangles: If enabled, a tiny triangle is displayed next to the names of categories that include subcategories. Categories without subcategories will not be furnished with a triangle.

  • Show icons for categories: If enabled, the (sub)category icons are displayed before the (sub)category name starting from submenu level 1.

    You can assign an icon to a category on the category details page. The default image will display if a category has no icon set.

  • Display Home link at first position on top menu: If enabled, the Home link (following to the homepage) is added to the top menu.

    Using this setting will not result in an automatic Home link relocation. For example, if you currently have a Home link in the top head menu, this option will add another Home link at the first position and not replace or remove the current one.
    ​See more info on the menus management in Adding New Menu Items.

Be sure to save the changes when you are done. Then, to see your changes on the storefront, clear the browser widget cache.

Related pages:

Did this answer your question?