Configuration: Commerce Site Navigation Theme

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.

Detailed Setup Guide

  1. Determine Text for Customizable Content

  2. Submit Logo Files for Navigation

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

Customizable Content Diagram

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)

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)

Details

Examples (Click to expand)

Navigation bar background color

 

Navigation bar font colors

Details

Examples (Click to expand)

Details

Examples (Click to expand)

Top Navigation font color

 

Side navigation bar font colors

Details

Examples (Click to expand)

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

NOTE: Font and text size will be inherited from the overall theme fonts.