Navigation

Overview

With the navigation, you can create menus with multiple levels for your front end. Individual menu items can be linked to individual links, shop categories, or pages. You can set each menu item as temporary. You can also add images for menu items.

Supported types:

• Pages
• External links
• Categories

Create navigation

1. Go to Shops > Shop > Storefront > Navigation.
2. Click + New Navigation.
3. Assign a Menu Name.
4. Click + New Menu Item.
5. Fill in the mandatory fields: Name and Target URL for the landing page that the menu item is referencing to. As a target, you can set an Individual link, a Page, or a Category. The type individual link allows you to enter anything without validation.
6. Optionally, set the Visibility.
   For Visibility you can pick a start/end date. The menu item will only be visible within this period.
7. Optionally, set the Assets.
   Upload an image in SVG format.
8. Click Add Item.

Add submenus

1. Use the + button below each menu item to add submenus.
   You can change the order and the hierarchy level of your menu via drag and drop.

Global level settings

On the global level, you can set:

• Navigation Menu
• Duplicate Navigation Menu
• Navigation Tree
• Navigation Item
• Target Type
• Target Value
• Visibility: "visible from" and "visible to"

Country level settings

On the country level, you can set:

• Translation for the navigation item
• Duplicate Navigation Menu (no changes to the name or the structure can be made): One Shop can have multiple navigations (e.g. “Top-Navigation”, “Footer Navigation")
• Target Value
• Visibility: "visible from" and "visible to"

Navigation Items

Set navigation items:

• inactive/active per country
• different link types (relative: /sale or external URL:https://example.com)
• valid from-to datetime per country
• to be created/updated/deleted via import for an existing navigation
• to be translated per locale

Translate Navigation Items

First create a global navigation (with All Countries selected).

To translate the navigation, you then switch to the shop-level and override the global configuration with the preferred translations. Shop level translations are added as follows:

1. Switch to the shop-level (top left under the shop name).
2. Select the translations icon for a menu item (on the right side beside the edit icon).
3. Add the translation.

Visibility

Set the visibility of a menu item:

• Upon the creation of the menu item
• Set dates for a menu item so that is is visible for a certain time period
• Set visibility of a menu item to include in search

Set dates for a menu item

1. Go to Shops > Shop > Storefront > Navigation.
2. Click the clock icon to set the period in which the menu item shall be visible.
3. Enter a Start date and End date.
4. Click Save.

Include Navigation Items in Search

As our search is category-based, you'll need to manually add pages such as Shipping, FAQs, Article pages, SEO pages to make them searchable.

Find out how to add them in the Search documentation.

Custom data

Once enabled in the Settings > Custom data > Navigation item, you can set custom navigation item according to the configuration.

Global shop level

You can create or edit a navigation item on a global shop level under Shops > Storefront > Navigation.

Country shop level

You cannot create or edit new custom navigation items on the country shop level.

Use cases

Menu item for seasonal articles

SCAYLE allows you to create a menu item visible only for a limited time period. Additionally, you can highlight this temporary menu item with an icon.

We'll add Easter category running to the /home/accessories category.

1. Navigate to Shops > Shop > Storefront > Navigation.
2. Select the menu you want to edit.
3. Use the + button below the menu item where you want the menu to appear.
4. Add a name for your menu item: in our case 'Easter'.
5. In the Target, select Category from the dropdown. You can only add to an existing category.
6. In the Add Criterion dropdown, select Product IDs to add individual products.
7. Set the Visibility: pick a start/end date.
8. Assets: Upload an SVG icon to make the menu item stand out.
9. Finally, click ADD ITEM.

Custom menu for a local shop

Navigation is created on a global level, however, you can override it to create a custom menu for a specific locale.