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. |
...
Detailed Setup Guide
Determine Text for Customizable Content
Submit Logo Files for Navigation
Determine Colors for Navigation Bars
1. Determine Text for Customizable Content
The customizable elements are described below. Refer to the customizable content diagram of the default content.
The customizable text includes:
Shop: Side navigation, defaulted to ‘Shop’
Main Site: Side navigation, defaulted to ‘Main Site’, limited to 16 characters. Note that this is coded to inherit the same URL as the main logo link.
My Account Button Label: Defaulted to ‘My Account’
My Account Button Subtext: Default leaves the subtext blank
...
2. Submit Logo Files for Navigation
Determine the logos that you would like to use for the following navigation options:
...
Details
...
Recommended Image Sizes for Best Image Quality
...
Examples (Click to expand)
...
The logo that appears in the navigation in the navigation bar
...
50-100px tall
...
(Optional) A mini logo that appears in the side navigation (drawer) next to Shop and Main site links
...
MUST be a 150px by 150px square with a max file size of 150kb
...
3. Determine Colors for Navigation Bars
There are many opportunities within the integrated shop navigation header to determine color and font choices.
Navigation bar background colors
...
Details
...
Examples (Click to expand)
...
Navigation bar background color
...
Navigation bar font colors
...
Details
...
Examples (Click to expand)
...
Top Navigation font color
...
Side navigation bar font colors
...
Details
...
Examples (Click to expand)
...
Side navigation top area background color (We recommend matching the color of the navigation bar background color.)
...
...
Side navigation top area font color (We recommend matching the color of the top navigation text when the background is colored.)
...
| Info |
|---|
NOTE: Font and text size will be inherited from the overall theme fonts. |
...
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
Configure Price Scarcity Display
1. 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 |
...