Site Navigation

Overview

The Storefront Boilerplate is built with an intuitive navigation at its core, ensuring users can quickly and easily find what they need. This system is organized into a familiar three-tiered structure: header, main menu, and footer. Each component is thoughtfully designed to streamline user journeys and enhance the overall browsing experience.

With the release of SFB 1.6.0, we’ve introduced a range of new features and enhancements to elevate the platform’s navigation capabilities. Explore the key highlights below and enjoy discovering everything the latest version has to offer.

Key Features

The header navigation sits prominently at the top of every page, acting as a central hub for essential user functions and quick access to critical information:

Search: A search bar helps users find categories, products, or pages effortlessly.
User Account: Enables users to log in, register, view order history, and manage account settings.
Wishlist: Allows users to save desired products for future purchases.
Basket: Displays a clear overview of added items and provides direct access to the checkout process.
Store Locator: Helps users quickly find nearby physical store locations. This feature is available only if the Omnichannel Add-on is enabled.
Shop Switcher: Facilitates seamless switching between regional stores on the platform.

The main menu, positioned prominently, presents a well-structured overview of your shop through the SCAYLE Navigation feature.

The footer, located at the bottom of every page, organizes essential site information and resources into clear categories. It offers quick access to:

Support and contact information.
Legal links, such as terms and conditions and privacy policies.
Additional resources to enhance the user experience.

The checkout process features a dedicated navigation system tailored for simplicity and usability. This streamlined interface includes:

Mandatory legal links to ensure compliance.
A clear display of the company logo for branding continuity.
A user-friendly layout designed to minimize friction and optimize conversions.

The Storefront Boilerplate leverages the robust SCAYLE Navigation feature to streamline and enhance user navigation across the platform. This feature is utilized for the main menu, footer, and checkout navigation, providing a consistent and customizable foundation for organizing content.

Configuration

For our Storefront Boilerplate, we’ve configured four separate navigation menus:

Header: This navigation tree is used to populate the main header
Footer: This navigation tree controls the footer
Simplified Header: This navigation tree controls the simplified header shown in the checkout funnel
Simplified Footer: This navigation tree controls the simplified footer shown in the checkout funnel

The Storefront Boilerplate fetches these navigation menus by name, so be sure to name them exactly as described above. Alternatively, you can update the call to useNavigationTreeByName

useNavigationTreeByName(
  {
    params: { treeName: 'Simplified Header' },
  },
  'simplified-header-tree',
)

Boilerplate Navigation Menus in the SCAYLE Panel

Customizable and Scalable Structure
- Supports nested menu items, making it ideal for organizing complex product hierarchies or content structures.
- Adapts to diverse use cases, such as main navigation, footer links, and checkout-specific menus.
Flexible Menu Item Options
- Menu items supported in the Storefront Boilerplate can be defined as:
  - Category Links: Mapped to your SCAYLE Navigation Tree for a consistent product category structure. These links also support filters configured for categories in SCAYLE.
  - Individual Links: Connect to standalone pages or external resources for added flexibility.
- Link Configuration: Links can be configured to open in a new tab, providing flexibility for external resources or additional content.
Enhanced Visual Features
- SVG Icons: Add icons to the main menu and footer items for a visually appealing and intuitive experience.
Visual Highlights with Custom Data
- Supports color-coded links for special design treatments (e.g., "Sale" or promotional items) to draw user attention, as well as disabled links to create non-clickable titles for organizing and labeling link groups. The setup for these features is described in the Customization Guide.
Visibility Scheduling
- Menu items can be shown or hidden based on start and end dates, making it effortless to manage promotional or time-sensitive content.
  - Example: A "Holiday Sale" link can be configured to display only during the promotional period, such as November 20 to December 31.

Components

Below is a detailed overview of the main navigation components and their functionality.

Find a Store

The Find a Store component serves as a quick link to the Store Locator page, where users can:

Locate physical stores based on their preferred location.
Save a favorite store for future reference.

On mobile devices, this link is accessible under the hamburger menu at the bottom of the screen, alongside the Shop Switcher component. More details about this functionality are available in our Omnichannel Guide.

Shop Switcher

The Shop Switcher component allows users to easily navigate between different shops. It displays shop options with the country name and shop language (if at least one of the shops is available in multiple languages).

By default, the shop switcher redirects to the homepage when changing shops. To disable this, set switchToHomePage to false on the <ShopSwitcher> component. Note that this may result in HTTP 404 Not Found errors if the current path cannot be resolved for the new shop.

<ShopSwitcher :switch-to-home-page="false"/>

Placement:

Desktop: Located in the top-right corner of the header.
Mobile: Accessible under the hamburger menu at the bottom of the screen for easy access.

Search

The Search component provides a fast way to locate products, categories, or pages. Features include:

Search Suggestions: Displayed when a user types at least 3 characters, categorized by type:
- Products
- Categories (with or without filters)
- Pages
“See All Results” Option: Always displayed to allow users to view the complete results for their query.
Pages are included in search results by enabling the “Include to Search” property in the SCAYLE Navigation.

Search Suggestion for Categories with Filters

Placement:

On desktop, prominently in the header.
On mobile, accessible under the hamburger menu, just above the main menu.

The Main Menu supports nested navigation with up to three levels, offering an organized and intuitive browsing experience:

Desktop:
- Level 0 Items: Displayed in a single row alongside the company logo.
- Hovering over a parent item reveals nested Level 1 and Level 2 items in a flyout menu.
- Level 1 Items: Organized into columns, with Level 2 Items grouped under the appropriate Level 1 parent.
- Keyboard navigation: Flyouts can be opened by clicking the arrow icon for accessibility.

Mobile:
- Level 0 links are displayed on the first screen of the expanded navigation, activated by the hamburger menu.
- Right Arrow Indicator: Highlights links with nested items. Clicking opens nested menus.
- Accordion Component: Expands Level 1 items with a “plus” button to display their Level 2 children.

Account

The Account component provides quick actions tailored to the user’s login state:

Logged-In State:
- Displays the user’s name and email address.
- Provides buttons for:
  - Order Overview
  - Account Settings
  - Subscriptions
- Includes a Log Out button.