Overview: Commerce Site Navigation
- Sarah Holst
- Jenni Buonanni
This feature is supported for: Aspenware Cloud customers only.
A new and improved Commerce Site Navigation feature for all Aspenware Cloud customers. Features of the new site navigation include:
New and improved UX wayfinding to navigate shopping categories, link to the marketing website, access shopping carts, and log in/create an account.
External linking categories to enable seamless navigation to other shopping pages
Focused categories that appear on desktop navigation
A 3.7% increase in purchase rate for mobile users with the new header (per A/B testing results).
New Feature Quick Comparison - Standard Navigation vs. Commerce Site Navigation
The following table offers a quick glimpse into the differences between how navigation features are realized currently in Commerce and contrast them with Commerce Site Navigation.
Feature | Standard Header | Commerce Site Navigation |
|---|---|---|
Shop Header | Free-form, customized to each resort that:
| Single commerce navigation header that:
|
Externally Linking Categories | Not available | Navigation and add-to-cart from a category that exists on another site (typically the resort’s marketing site). |
Focused Categories | All categories display in Category dropdown (unless hidden). All categories must be set to “Include in top menu” for the category to work. | Up to four categories can now be flagged as focused header categories that will appear in a header when viewing the shop from a desktop. If more than four categories are configured as focused header categories, the shop will append a More… link as a fifth option, and selecting this will open the sidebar navigation, where the complete set of categories can be viewed (inclusive of focused header categories). |
Add-to-Cart Notification | When a customer adds a product variant to their cart, a mini cart slides out to signify a successful add. | When a customer adds a product variant to their cart an add-to-cart notice will now appear. This cart notice will appear below the cart icon on a desktop view, and on mobile, it will fill the screen. |
Category Breadcrumbs | Parent category name is listed in the “I’m looking for” area of the “centered shop nav.” | Breadcrumbs are visible when a guest is viewing a category and shows which category they are viewling. |
New Features
Commerce Site Navigation Header
The header enables navigating shopping categories, my cart, and back to the marketing site. It also includes accurate data on the customer’s cart count and authentication status so that links to login/logout and to the customer’s My Account page (if a logged-in customer) can accurately display. This single Commerce Site Navigation will be the standard navigation used for all customers moving to Aspenware Cloud and replaces both the existing free-form header and the standard, centered shop navigation.
Guests will use Commerce Site Navigation as the primary method to navigate between shopping categories, their cart, link to log in/out of the shop (via Identity), and, for logged-in guests, access their My Account page.
Category List
Guests will use Commerce Site Navigation to navigate between shopping categories. It leverages a Category List to populate category names and enable linking to the category page, regardless of whether the category is an Aspenware Commerce category or an external category.
Customer and Cart
The login/log-out links in the Commerce Site Navigation header will prompt logging in or out of the shop based on a customer and their authentication status.
The cart icon in the header will link to a customer’s cart and the item count displayed next to the cart icon in the header represents a count of all items in the customer’s cart.
If a logged-in customer clears their cookies or browsing info, their cart will remain unchanged. However, if a customer is not logged in, their cart is associated with a guest customer and a first-party cookie, so clearing their cookies or browsing info also resets the cart.
HINT: First-party cookies, according to clearcode.com, are “cookies (that) are created by the host domain – the domain the user is visiting. These types of cookies are generally considered good; they help provide a better user experience and keep the session open. This basically means the browser is able to remember key pieces of information, such as which items you add to shopping carts.”
Additionally, if a customer is logged in, they will see a new personalized link to their shop My Account page within their menu sidebar that includes their contact picture, if an image is uploaded. They will also see the option to log out.
Externally Linking Categories
A category in the Category List can be configured as an Externally Linking Category and is configured in Aspenware Commerce Admin. These categories exist on another site (typically the resort’s marketing site).
Focused Header Categories (Desktop Only)
Up to four categories can now be flagged as focused header categories that will appear in the header when viewing the shop from a desktop. If more than four categories are configured as focused header categories, the shop will append a More… link as a fifth option, and selecting this will open the sidebar navigation, where the complete set of categories can be viewed (inclusive of focused header categories).
Add-to-Cart Notice
When a customer adds a product variant to their cart in a shop using Commerce Site Navigation, rather than the mini cart sliding out to signify a successful add, an add-to-cart notice will now appear below the cart icon on a desktop view, and on mobile it will fill the screen. This cart notice includes information about the product variant that was just added to the cart, including the product’s name, the attribute values of the added variant, and the product variant’s price. It also includes summary information about the customer’s cart, including the cart subtotal and the total number of items in the cart. The customer can choose to clear out of this notice, proceed to their cart, or proceed to checkout from the notice.
Breadcrumbs on Category and Product Pages
When a guest views a category on any device or a product page on a desktop, breadcrumbs are now visible. Because the parent category name is no longer listed in the “I’m looking for” area of the “centered shop nav,” which has been replaced by Commerce Site Navigation, this breadcrumb shows the guest which category they are viewing.
If a guest is on a category page without child categories (subcategories), the breadcrumb is not clickable but lists the name of the category.
If a guest is on a child category (subcategory) page, the breadcrumb is formatted [Parent Category]/ [Child Category]. The parent category is clickable and links to the parent category, and the child category is not clickable.
If a guest is on a product page in desktop view, then the breadcrumb is formatted [Parent Category]/ [Child category], and both the parent category and child category are clickable, linking to the appropriate categories.
NOTE: Product page breadcrumbs only appear on desktop. The mobile experience of navigating back to the category will continue to use the focused header that displays “< [Category Name]” in the upper left corner of the screen.
Additional Enhancements
In addition to the new navigation and category elements, there are several additional enhancements that come with the header.
Improved Admin access
If an Admin guest is logged in, then, within their sidebar, they will see a new Admin link to the Admin area.
Improved Access to the resort’s marketing site
Main logo
Sidebar navigation Main Site text
Sidebar navigation “mini logo” (Optional)
Minor theme changes
Integrated in place of the previous custom header (more details above)
Modernized cart icon and count appearance
Removed the “I’m looking for” banner, replacing it with the new navigation. The previous banner included shop categories and links to sign in/, my account, and the cart.
Increased content area width for category pages (desktop only)
Dynamic box moved up on the desktop product page view to encourage required attributes to be above the fold