Configuration: Redesigned Pricing Calendar

The Commerce Site Navigation allows for theme customization. This guide will review how to set up that new theming. The configurable elements outlined below will need to be completed by an Aspenware Developer. Please consider the customization options outlined to ensure navigation is branded to integrate well with your resort’s visual theme and voice. Reach out to your Aspenware Service Agent (support@aspenware.com) to communicate your selections.

Settings

Overall Settings (New and existing) used by the Cloud UI Pricing Calendar

Setting	Description	Set to
calendarsettings.enableadvancedcalendar	See existing setting description	Must be true
calendarsettings.useposinventory	If true, color shading of calendar is based on inventory	Must be true
calendarsettings.inventorymessagethreshold	Use existing setting description	Recommended to be set if inventory is added to products with dynamic pricing
calendarsettings.lowinventorybackgroundcolor	Color used to shade calendar on low inventory dates	Recommended #F6D241
calendarsettings.lowstatustext	Key Value for low inventory dates	Define Key Value for low inventory dates
calendarsettings.soldoutstatustext	Key Value for sold out dates	Define Key Value for sold out dates
calendarsettings.pricingcountmessagethreshold	Use existing setting description	Recommended to be set if dynamic pricing strategyuses tiers
awcloud.pricescarcity.isenabled	NEW setting. If true, key for price scarcity messaging will show on pricing calendar	Define Key Value for low tier priced dates

Language Strings

New Language Strings used by the Cloud UI Pricing Calendar

Language String	Description	Default
productpricingcalendar.dateprompt	Title above the date picker on the Pricing Calendar	Choose your start date
productpricingcalendar.salestatustext	Key text that will appear on the pricing calendar if price scarcity key is enabled

Detailed Setup Guide

Determin Theme Customization for the Redesigned Calendar
Configure Price Scarcity Display

1. Determine Theme Customization for the Redesigned Calendar

There are several options for customizing your theme. See the table below to determine which elements you’d like to customize.

Element	What’s customizable	What’s not customizable
Text elements	Font families are set to your fonts for titles and body copy. Additionally, the weight and line height can be adjusted so that we can optimize the design for your fonts. Force caps option - Titles can be set to force caps or title case.	Font size will be dictated by the design system.
Color	Inventory and pricing scarcity colors - We will continue to offer the ability to configure the backgound color that appears on the calendar when inventory is scarce on a date. We are newly enabling the color that prices are displayed as if they are a “scarce price” to be configurable. We recommend a shade of green that is ADA compliant when set on white based on AB test results.	Neutral colors - We will use consistent neutral colors that are legible and look great across brands when resort primary or link colors are not used. Warning colors - The font color for these messages is determined by the design system and is optimized for the user experience.
Borders and Elevation	N/A Border radius will be configurable in 3.1 and later for all elements.	Border weight and roundedness (radius)- Rounded elements convert better than boxy elements. Our new design system puts this into practice with consistent border radii and weights for elements that have borders across themes. Elevation - Elevation is used in several places to helps users understand the relative importance and position of different elements on the screen.
Spacing	N/A	Spacing between elements is designed for consistency across the platform and will look great with every theme.

2. Configure Price Scarcity Display

If using tiers via dynamic pricing, it is recommended to indicate which dates are a “limited time deal” to users by setting the price scarcity threshold (calendarsettings.pricingcountmessagethreshold) to a value that would trigger price scarcity for many dates throughout the season, but not all dates.

This recommendation is based on A/B test results run during pre-season sales to determine if highlighting low-priced dates on the full-page calendar would improve metrics. In the case of red text, it did not, but with green text, it was a win! It was especially effective at converting first-time users, also known as “window shoppers”. This audience is particularly hard to convert and has much lower conversion rates than returning users, but when this audience saw green prices on the calendar, this segment was 6.7% more likely to purchase and revenue per visitor for this segment was up 27.5%, while overall revenue per visitor was up 19% for the overall audience presented with the green prices on the calendar,

Coloring the text of dates that have a low number left at a price is not a new feature for Cloud UI, but the ability to adjust the color of limited-time pricing dates and to customize the key messaging is new. Additionally, the design of both price and inventory scarcity on the full pricing calendar has been optimized to maximize conversions and user comprehension based on Usability Testing and AB testing results.

Config Type	Value	Description	Default/recommended value
Store-wide setting	calendarsettings.pricingcountmessagethreshold	See existing setting description	Recommended to be set if dynamic pricing strategyuses tiers
Store-wide setting	awcloud.pricescarcity.isenabled	If true, key for price scarcity messaging will show on pricing calendar	Define Key Value for low tier priced dates
Language string	productpricingcalendar.salestatustext	Key text that will appear on the pricing calendar if price scarcity key is enabled	Great value
Theme designer value (AW admin only)	Price Scarcity Text Color	Price Scarcity Text Color for the pricing calendar in Cloud UI	#28763A for ADA compliance and based on AB test results of green vs red.

Showing inventory scarcity encourages conversions

If products that use the pricing calendar have inventory added to them, it is recommended to indicate which dates have lower-than-usual availability by setting the inventory scarcity threshold. Research shows that creating a sense of urgency for inventoried products is a motivation for guests to purchase, and is proven to drive more revenue and boost conversions. Color coding low inventory dates offers the messaging that creates that sense of urgency.

One resort ran an A/B test on its lesson products for the 2023/24 season, splitting traffic 50/50, with 50% of the traffic seeing today’s calendar which only shows dates that are sold out, and 50% of traffic seeing a calendar that color-coded dates running low on inventory as yellow to drive urgency. In this test, the color-coded experience won with a 4.4% increase in lesson purchases compared to today, and $110k more in-test revenue.

Coloring the text of dates that have a low number left is not a new feature for Cloud UI, but the design of inventory scarcity on the full pricing calendar has been optimized to maximize conversions and comprehension based on Usability Testing and AB testing results.

Note: The pricing calendar will still use global thresholds and won’t use calendar template thresholds to color code dates until 3.1

Config Type	Value	Description	Default/recommended value
Store-wide setting	calendarsettings.enableadvancedcalendar	See existing setting description	Must be true
Store-wide setting	calendarsettings.useposinventory	If true, color shading of calendar is based on inventory	Must be true
Store-wide setting	calendarsettings.inventorymessagethreshold	Use existing setting description	Recommended to be set if inventory is added to products with dynamic pricing
Store-wide setting	calendarsettings.lowinventorybackgroundcolor	Color used to shade calendar on low inventory dates	Recommended #F6D241
Store-wide setting	calendarsettings.lowstatustext	Key Value for low inventory dates	Define Key Value for low inventory dates
Store-wide setting	calendarsettings.soldoutstatustext	Key Value for sold out dates	Define Key Value for sold out dates