Aspenware Cloud UI PDP’s are now compatible with group member assignment on the PDP.
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
The item summary and cart notice show 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 selected date and quantity of items is also made more prominent.
Savings information can be added to more products and highlighted more clearly in the item summary. Customers are made more aware that advanced purchase behavior is rewarded with discounted pricing throughout the shopping experience by highlighting the savings.
Additionally, the cart notice includes information on discounts applied to the added item from coupons they have already added in their session.
Ability to add accurate savings information for non-dynamically priced products: Defining a max price for non-dynamically priced variants enables more robust discount visibility. This used to only be available for dynamically priced products using the base price entry feature.
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)
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. |   |
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. |   |
Radio Button |   |
Checkbox |  |
Item Summary |  |
Product Description |     |
Product image |     |
Add to cart button and quantity selection |       |
Related products |   |
NEW Coach messages |   |
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!) |  |