Overview: Cloud UI Product Detail Page (PDP)
- Jenni Buonanni
- Jenni Buonanni (Deactivated)
- Sarah Holst
- Marty Niessen (Deactivated)
This feature is supported for Aspenware Cloud Customers Only. It requires using Aspenware Theme Designer for setting theme values on Cloud UI pages.
IMPORTANT: While Cloud UI is supported for most product detail pages, some features and configuration options are not yet supported in Cloud UI. These configurations will continue to work as usual if loaded on the Legacy pages. See section 1 in the Cloud UI PDP Configuration Guide for a detailed list of incompatible configurations.
Feature Description
This new PDP is part of Cloud UI, which is the user interface that is separated from the nopCommerce backend and able to be independently deployed.
Cloud UI also brings in modern design and development practices. It uses a design system and component libraries for all the shopping pages in the application, making it faster to release new features and ensuring a consistent look and feel across the application as it gets updated.
Some fundamental concepts we’ve kept as the cornerstone of this redesign effort include:
Data-driven design. All newly redesigned elements have been extensively tested in usability studies and A/B testing.
Information hierarchy. A cleaner design and a more predictable information structure reduce clutter and scrolling in the shopping process, particularly on mobile devices. This is done by having linear attribute selection - removing the right-oriented dynamic box for desktop, minimizing but still enabling easy access to the product description, including a more intuitive and detailed item summary, having CTAs and quantity selections remain sticky across desktop and mobile, and improving the ability to explain attribute selections to guests with both a title and optional description. A/B tests and usability studies have shown that excessive clutter and mandatory options below the visible screen on shopping pages hinder mobile users from adding items to their cart, leading to lower mobile conversions.
Leverages theme designer and a design system. With the introduction of a design system, we’ve also more clearly defined rules around what is and is not customizable. These rules make new theme development and changes easier, move closer to ADA compliance, and create a more consistently improved user experience across all resort sites. Theme changes to these pages can be made on the fly with your Aspenware Service Agent and do not require waiting for a code deployment.
Key Terms
Item Summary
The item summary shows an itemized detailed list of what the user is adding to cart, clearly listing out the core product variant and add-on product variants with their unique prices and names. The item’s selected date and quantity are now more prominent in the summary.
Variant Name (formerly called an “Attribute Combination”)
A variant name is given to a discrete product, or specific option, being added to cart and purchased from a PDP. To illustrate, let's consider a scenario where the PDP is for purchasing a ski resort lift ticket, and it offers the option to include equipment rental. If a guest decides to add a "1-day adult ticket" to their cart and also adds a "1-day ski rental," these are considered two separate variants. Each variant has a distinct name, such as '1-day adult ticket' and '1-day ski rental,' to differentiate them in shopping.
Max Price
A max price is the highest price for which a variant can be offered. It is a price is entered in Admin during product setup to enable highlighting of discounted pricing throughout the shopping experience to encourage advance-purchase behavior. Guests rarely, if ever, pay this price. Max price has previously only been supported at the variant level for dynamically priced variants. Now, with Cloud UI, max price can be defined in Admin and used to display savings for non-dynamically priced product variants and add-ons.
Attribute Title and Description
Cloud customers can define an attribute title and description in separate fields in the attribute editor, which will be used and displayed above the respective attributes in the Cloud UI PDP. The title helps anchor the guest and describe the option at a high level. The description is optional but can be used to provide clarifying details helpful in making option selections.
Cart Notice
After an item has been added to cart, a pull out drawer on desktop and modal on mobile summarizes the item just added to cart, clearly listing out the core product variant and add-on product variants with their unique prices and names. The item’s selected date and quantity are now more prominent in the summary. Additionally, the cart notice includes information on discounts applied to the added item from coupons they have already added in their session.
Feature Highlights
The new PDP offers many updates and optimizations that boost conversion and greatly enhance the guest experience.
Improved Add-to-Cart Experience
The Cloud UI PDP improves the way you add items to your cart with a new and user-friendly interface that remains “sticky” and always visible as users scroll through options, but is now simplified to only include the call to action and consistent quantity selection for mobile. For desktop, the add-to-cart CTA, quantity selection, and item summary all remain “sticky” together. These improvements were based on the winning variation results of both mobile and desktop-focused A/B tests.
During the test, we compared the new simplified 'add-to-cart' CTA on mobile devices with the existing method. We also added a 'fixed' summary for better clarity. We ran this test for 1.5 months at two large resorts, involving more than 15,000 users.
The results were impressive. With the new method, we saw an increase in the number of people adding items to their cart by between 9.5% to 16% compared to the old way. Additionally, there was a 1% to 4% boost in revenue per visitor.
Improved Item Summary and Cart Notice with Clear Savings Information
Item Summary
The item summary provides a detailed breakdown of what the user is adding to their cart, listing the core product variant and any selected add-on product variants along with their respective prices and names. The selected date and quantity of items are also prominently displayed.
The design of the Cloud UI Item Summary has been refreshed to enhance clarity and consistency in presenting price and savings information. Savings details are now displayed in a "badge" format, making them more noticeable.
Savings badge information can be applied across more products, making it easier for customers to recognize discounted pricing and understand how advanced purchase behavior leads to savings. A tooltip further clarifies that savings are calculated off walk-up (list) prices.
As part of transitioning from a text-based savings message to a badge, the language string for savings information has been updated in the item summary and add-ons where applicable. The new language string, publicui.product.savings, truncates after 13 characters, with a default value of “{0}% OFF.” The badge color and text can be customized in Theme Designer.
Cart Notice
The cart notice continues to provide a detailed summary of the item being added, including the savings badge and itemized display. It also accounts for any discounts applied through coupons already added during the session.
Expanded Savings Visibility
Defining a max price for non-dynamically priced variants now enables more comprehensive discount visibility. Previously, this was only available for dynamically priced products using the base price entry feature. This capability has now been extended to a wider range of pricing configurations, allowing resorts to highlight savings more effectively across various product types:
Simple Products (no attribute combinations): Define ‘Old Price’ to show savings.
Attributed Non-Dynamically Priced Products: Define Max Price in the new variant editor section.
Simple Add-ons: Define ‘Old Price’ on the add-on product.
Attributed Add-ons: Define Max Price in the new variant editor section on the add-on product.
Attributed Dynamically Priced Add-on Products: Define Base Price in dynamic pricing on the add-on product.
Attributed Dynamically Priced Products: Define Base Price in dynamic pricing.
Tool Tips Next to Savings Badge
Cloud UI supports tool tips that clarify that savings badges represent discounts off the window rate. These tool tips appear when users hover over the "i" next to the badge.
Button Group Control Type
The button group control type is now available for the Cloud UI PDP. This modernized selection element enables guests to see various attribute value options without having to scroll, enabling informed decision-making with reduced cognitive load. The Button Groups can be configured vertically or horizontally depending on the number of choices and content requirements.
Button Groups:
Present options in a simplified and visually digestible format, that helps users quickly evaluate choices, reducing decision complexity and minimizing buyer fatigue
Offer larger touch targets than traditional radio buttons, particularly beneficial for mobile devices, enhancing user experience
Offers efficient use of vertical space with the option for including helpful content to aid decision-making (vertical chips)
Include a visually appealing design with intuitive left-to-right scrolling (horizontal)
Coach Messaging
Coach messages are used to prompt users to select product attributes that have not yet been set. The appearance of coach messages is determined by the selection status of the attribute values.
If an attribute has a selected value (either pre-selected or chosen by the user), the coach message does not appear.
If an attribute does not have a selected value, the coach message appears to prompt selection.
If the attribute is required, the coach message displays: "Select Option (Required)".
If the attribute is optional, the coach message displays: "Select Option (Optional)".
Note: Start Date attributes should always be set to be required, even they are set as optional in admin, the UI will require a date to add to cart
Optimized Components and Screen Real Estate
We’ve introduced easy-to-use control types and components that require less vertical real estate, are more mobile friendly, and ensure the information that is presented is easily consumable and improves add-to-cart rates.
Control Type/Component | Example |
|---|---|
Dropdown (aka Select) | 
|
Inline Date Picker Choose this date picker to best enable the ability to easily make attribute selection changes and see how date availability changes as variants change. |  Without scarcity
 With scarcity
|
Select Date Picker
Choose this date picker to optimize for mobile devices. This dropdown selector takes up less vertical space so it’s easier to scan on mobile devices. |  Without scarcity
 With scarcity
|
Radio Button |  without icons
 with icons
|
Checkbox |  selected  de-selected
|
Item Summary | 
|
Product Description | 
 Desktop short and long description  Mobile short description  Mobile short and long description
|
Product image |  Desktop not hovered over image multiple images  Desktop hovered over image multiple images
 Mobile before scroll with multiple images  Mobile when scrolled with multiple images
|
Add to cart button and quantity selection |  Desktop Add to Cart with quantity  Desktop Add to Cart without quantity  Mobile sticky add to cart with quantity, not scrolled to item summary
 Mobile sticky add to cart without quantity - not scrolled to item summary  Mobile sticky add to cart with quantity scrolled to item summary
|
Related products |  Desktop related products
|
NEW Coach messages |  Coach messaging when an attribute selection is required to enable add to cart  Coach messaging when an attribute selection is optional and not required to enable add to cart Coach messaging dissapears |
Cart Notice | Without discounts 
With discounts 
|
Edit Cart mode (Only for products that have Enhanced Cart enabled) | Desktop PDP in edit cart mode 
Cart notice when an item that was added to cart successfully changes 
|
Button Group (NEW for Cloud UI!)
|  Horizontal orientation on mobile- if vertical scroll is required, one chip should always appear in partial view  Horizontal orientation on desktop -notice button chips stack rather than remain horizontally scrollable  horizontal button chip with icons (note that for icons to display, all options must have an icon added)  vertical button chip display with icon  What a pre-selected button chip display looks like that is an add on attribute value
|