Configuring the shop navigation

The shop navigation (main navigation) is the category navigation in the header. You create the categories in Shopware, ThemeWare® defines the display.

Step 1: Create the categories

1. Open the administration of your shop
2. Switch via the main navigation to "Catalogues" => "Categories"
3. Create your categories and subcategories
   • Category type "Page / List": a category with associated products and a layout
   • Category type "Structuring element / Entry point": only used for outlining purposes and not callable by itself
   • Category type "Link": a reference to a product, another category, a landing page or an external site
4. Make sure that all categories are set to "Active"
5. Save your categories

Step 2: Check the entry point in the Sales Channel

1. Open your Sales Channel via the main navigation
2. Switch to the tab "General"
3. Check the field "Entry point main navigation" in the card "Navigation"
4. Define with the "Navigation levels" how many category levels are loaded
5. Save the Sales Channel

Step 3: Configure the top navigation

1. Switch via the main navigation to the "theme administration" ("Content" => "Themes")
   • Note: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
2. Now click on your ThemeWare® theme to start editing
3. Switch to the tab "Header"
4. Open the block "Top navigation"
5. Select at "Top navigation" how the navigation is displayed:
   • "don't show"
   • "show list"
   • "show hamburger menu"
6. In the section "Basic configuration" you configure among others "Show home link", "Show arrows", the "Hover effect" and the "Height"
7. In the sections "Colour configuration" and "Typography" you adjust colours, font family, font size and text formatting

Step 4: Configure the submenus (flyout)

1. Open the block "Top navigation flyout"
2. Select at "Top navigation flyout" the display of the submenus:
   • "Shopware default"
   • "ThemeWare® Flyout"
   • "ThemeWare® Dropdown"
   • "ThemeWare® Flyout with cards"
   • "ThemeWare® Flyout with sidebar"
   • "ThemeWare® Flyout with teasers"
3. In the section "Basic configuration" define with the "Navigation levels" how many category levels are displayed
4. In the section "Design" you select the desired design for the "Flyout" and the "Dropdown navigation"

Step 5: Mobile navigation

You configure the mobile navigation separately:

• Tab "Content" => Block "Offcanvas navigation"

Step 6: Save and check

1. Save the theme configuration
2. Switch to the storefront and reload the page

You have now configured the shop navigation.

Further information

• Introduction: Configuring the service navigation
• Introduction: Adapting the design of the category page