Categories representation on the storefront may vary depending on a skin you are using. Usually product categories are displayed as a block in the left-hand side column of the store site.

Below is how the categories block is displayed in the storefront using the X-Cart CrispWhite skin:

categories-storefront.png

In case it’s necessary to change the location of the category block on a page or to remove it completely it’s recommended to use Layout Editor.

In case you need to get a horizontal representation of categories, hide the regular categories block using Layout Editor and add categories as menus to the navigation panel.

home_1.png

To add categories to the top menu:

  1. Add your categories as menus on the Menus page (Content > Menus) in the store admin area as described in Adding new items to your store’s menus.

    menus.png

    If you want to add a link to a page within your store (e.g. a category page), you can specify it as e.g.:

    • ?target=category&category_id=4 (relative path)
    • http://www.your_store_url.com/cart.php?target=category&category_id=4 (absolute path).

    Also you can use the ‘{category_name}’ shortcut value. It will also lead to the category page.

    Make sure the category menus are enabled and ordered properly. Disable any unnecessary menus to make the menu bar more attractive.

  2. Add a submenu (optional).

    submenu.png

  3. Change the home page and default page layout on the Layout page (Look & feel > Layout) in the store back-end.

    layout.png

  4. Check your new site layout.

It is also possible to move the categories list to the horizontal bar using the X-Cart addon Horizontal Flyout Categories Menu. It’s easier in setup.