Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Once you take the Cloud UI 1.1 release, as an Aspenware Cloud customer, the redeigned redesigned full-page pricing calendar is available to you. You may configure use this calendar when configuring products with a pricing calendar. Configuration steps for the display of price and inventory scarcity through the use of settings as detailed below.

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

...

.

...

...

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

  1. Determin Determine Theme Customization for the Redesigned Calendar

  2. Configure Price Date Picker Language String

  3. Configure Inventory Scarcity Display

  4. Configure Pricing Scarcity Display

1. Determine Theme Customization for the Redesigned Calendar

There are several options for customizing your theme as it pertains to regarding the pricing calendar. See the table below to determine which elements you’d like to customize. To make changes to any of the following customizable elements, please reach out to your Aspenware Service Agent (support@aspenware.com), and they can quickly make changes using our Theme Designer tool.

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 continue to offer the

abiliity
  • ability to customize background color for dates when inventory is scarce. We recommend #F6D241 for ADA compliance and based on A/B test results.

  • New! You may customize the color of the price display as if

they are
  • it is a “scarce price.” We recommend

a shade of green that is ADA compliant when set on white based on AB
  • #28763A for ADA compliance and based on A/B 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. This includes the sold out state of the calendar.

  • 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.

No customization currently available.

  • 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

Not available.

  • Spacing between elements is designed for consistency across the platform and will look great with every theme.

2. Configure Date Picker Language String

Configure the copy that appears above the date picker on the Cloud UI Pricing Calendar.

...

Language String

Description

Default

productpricingcalendar.

...

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

dateprompt

Title above the date picker on the Pricing Calendar

Choose your start date

3. Configure Inventory Scarcity Display

To configure the way your calendar offers low inventory indication, update the following settings:

Setting

Description

Value

calendarsettings.enableadvancedcalendar

Turns on the Advanced Pricing Calendar.

This setting displays the legend which the user can reference to interpret color-coding on the calendar.

If TRUE, then the legend for low inventory and sold out will show on all pricing calendars. In a future release calendar template configuration can turn this legend on and off per product.

If FALSE, then the legend for low inventory and sold out won't show. So if you don't use low inventory indication on the pricing calendar at all, this legend will never show.

calendarsettings.useposinventory

If true, color shading of calendar is based on inventory. This is required for the Cloud UI Calendar if calendarsettings.enabledadvancedcalendar is set to true.

Must be TRUE if calendarsettings.enabledadvancedcalendar is set to true for Cloud UI.

calendarsettings.lowinventorybackgroundcolor

Color used to shade calendar on low inventory dates.

Recommended #F6D241

(yellow)

calendarsettings.soldoutstatustext

Legend text for sold out dates

Text

EX: UNAVAILABLE

4. Configure Pricing Scarcity Display (Optional)

To configure the manner in which the Cloud UI calendar displays pricing scarcity, follow the instructions below. We recommend enabling this feature when you are using a tiered pricing strategy.

Settings

If you would like to enable the price scarcity legend (e.g. SALE PRICE in above screenshot) on the calendar, please reach out to your Aspenware Service Agent (support@aspenware.com) to enable the feature.

To configure the way your calendar offers pricing scarcity indication, update the following settings:

Setting

Description

awcloud.pricescarcity.isenabled

If true, prices will be colored green that trigger the pricing threshold defined in this store wide setting (calendarsettings.pricingcountmessagethreshold) and a key will show that displays the text defined in the language string 'productpricingcalendar.salestatustext'

True/False

calendarsettings.pricingcountmessagethreshold

For dynamically priced products utilizing the large calendar view, if the number of products left at the current pricing tier is less than this setting number, then dates that are below the threshold will be colored green on the pricing calendar page. (will not be colored on the PDP calendar)

Integer

(number at which pricing tier indication is triggered)

Language Strings

Configure the following language string to customize what text will display on the legend for price scarcity.

...

Language String

Description

Value

productpricingcalendar.salestatustext

Legend text that will appear on the pricing calendar if price scarcity legend is enabled

Text

EX: GREAT VALUE

Price Scarcity Text Color

As mentioned above, you may customize the color of the text for prices that are triggered by the calendarsettings.pricingcountmessagethreshold. We recommend #28763A (green) for ADA compliance and based on A/B test results of green vs red. Contact your Aspenware Service Agent (support@aspenware.com) to customize this color.

...