Overview

The Aspenware Design Team will create a theme for the resort and provide opportunity for feedback. The resort may submit change requests, which will be evaluated and implemented at Aspenware's discretion, provided they are clear and can be modified.

In order for Aspenware to begin work on the theme, the Resort Marketing Team will need to provide Aspenware with their choices for the following theme decisions as well as the required marketing collateral outlined in this document.

NOTE ON IMAGES:

The standard minimum required sizes for resort-provided images are listed below in-line with each image requested. Images must be below 400k in size to maximize site load times and it is recommended to provide image files as close to 300k as possible. It is recommended that the resort crops the images prior to sharing with Aspenware, since quality will be affected if Aspenware needs to stretch them. If the resort is unable to modify the image, Aspenware will crop the image. In order to reduce load times, Aspenware will optimize images to balance file size with quality.

Additionally, the more complex and intricate the image provided, the more noticeable the compression will be. As such, Aspenware recommends providing images that are relatively simple and do not contain large areas of complicated textures, e.g., detailed trees.

HINT: For a free tool for reducing image sizing go to https://tinypng.com. It can often be used with little to no noticeable degradation in quality to reduce an image size.

Provide Brand Assets

Asset	Spec Requirements	Image Example
#1 Header Logo	SVG file recommended. If using other file types: 400 x 400px (Minimum) for PNG file Max file size of 400kb
#2 Sidebar Logo	SVG file recommended. If using other file types: 150 x 150px (Minimum) for PNG file Max file size of 400kb
#3 Favicons	File must be in .png or .svg Provide favicons for each size: 16x16, 32x32, 48x48 Note: AW can generate the favicon file if a square svg logo is provided.
#4 Loader “Spinner” Image	SVG file recommended. If using other file types: 150 x 150px Max file size of 400kb
#5 (Optional) Checkout Logo	SVG file recommended. If using other file types: 50-100px tall Max file size of 400kb Note: AW can utilize the header logo provided, if a different logo is desired please provide.
#6 Font(s)	AW supports a maximum of two fonts. One is assigned to the Primary Font Setting and one to the Secondary Font Setting. These will automatically apply to pre-defined areas of the store. Provide either: A) AW Hosted Font Requirements The following font files are supported: TTF, OTF, WOFF, WOFF2 B) Google Font Requirements Must be accessible from the internet, provide the hosted URL
#7 Hero Image (PLP)	Provide hero image that matches the size selected in #17. Large 1920 x 550px Medium 1920 x 400 Small 1920 x 285 Note: The hero image is overlayed behind the header and scales differently based on device sizes; therefore different areas of the image will be non-visible. The focal point of the image should be centered vertically.
#8 Hero Image (My Account)	JPEG, JPG, or PNG (recommended) 1920 x 400px Max file size of 400kb
#9 Checkout Background Image	JPEG, JPG, or PNG (recommended) 1920 x 1080px Max file size of 400kb

Provide Theme Colors

Decision	Spec Requirements	Image Example
#10 Brand Colors	Provide the following three theme colors from your brand in HEX or RGB. These three colors will automatically be applied to the store’s various elements. When applicable, hover colors will override the original color’s state on hover. If a resort's brand does not include a predefined hover color, AW recommends applying a 10%-20% contrast shift. Primary Color Primary Hover Color Secondary Color Secondary Hover Color Tertiary Color Tertiary Hover Color
#11 Header Background	HEX or RGB color
#12 Header Text Color	HEX or RGB color
#13 Cart Badge Color	HEX or RGB color
#14 Sidebar Banner Color	HEX or RGB color
#15 Checkout Header Color	HEX or RGB color
#16 Checkout Footer Color	HEX or RGB color

Provide Display Options

Decision

Options

Image Example

#17 Hero Height

Large

550px

Medium

400px

Small

285px

Note: AW Recommends utilizing the Small option to optimize visibility of PLP Product Cards.

Large

Medium

Untitled (1920 x 550 px) (1920 x 400 px).png

Small

Untitled (1920 x 550 px) (1920 x 400 px) (1920 x 285 px).png

#18 Hero Display Mechanism

Dynamic

Hero changes randomly to a product card image from the active category.

Static

Hero is a static image and will not change based on different product cards in the active category.

Note: AW recommends using static images, as variations in product images often lead to inconsistent and undesirable appearances across various user devices.

Dynamic

Static

#19 Product Card Display

Option A

Price always displayed left area
Shop Now button
Meta text right of price
Lines separate the card
- Line under Product Name
- Line under Short Description
Left-aligned product title
Hard edges
No drop shadow

card-option-a (1).png

Option B

Price always displayed bottom right
No Shop Now button
Meta text left of price
No separating lines
Left aligned product title
Hard edges
Drop shadow

card-option-b (1).png

Option C

No price
Shop Now Button
No Meta Text
No separating lines
Left aligned product title
Round edges
Drop shadow

card-option-c (1).png

Option D

No Price
No Shop Now button
Centered Meta text
No separating lines
Centered product title
Round edges
No Drop Shadow

card-option-d (1).png

#20 Sub-Category Display

Tab Option A

Capital-cased
Active sub-category text is colored and underlined

image-20231025-194914 (1).png

Tab Option B

Uppercase forced
Active sub-category text is colored and underlined

image-20231025-194940 (1).png

Tab Option C

Capital-cased
Active sub-category text is highlighted in a box

image-20231025-195002 (1).png

Tab Option D

Uppercase forced
Active sub-category text is highlighted in a box

image-20231025-195015 (1).png

#21 (Optional) Category Underline Color

Categories in the header and side navigation can optionally display an underline:

Active: The underline appears on the currently active category.
Hover: The underline is displayed when hovering over a category.

Both of these options are independent of one another.

Footer Decisions

Option 1: Advanced Footer

Provide a static HTML footer that can be uploaded to your site. This method requires advanced HTML and CSS capabilities, see attachment for configuration requirements.

Custom Footer Development Guide.pdf

Option 2: Simple Footer (Recommended)

Provide the following footer details and AW can setup a simple footer that can be edited as an HTML widget.

Variable

Example Text

Image Examples

Contact Information

Pass Office: 720-123-4567,

Reservations: example@resort.com,

123 Mountain Road, Denver CO, 80205

Footer background color

Hex or RGB

Note: The logo from the Header will be used in the footer and columns are restricted to the default design displayed in the example. But the footer can be edited and further customized through HTML by any resort staff with HTML & CSS knowledge.

Marketing: Required Ecomm Theme Decisions & Assets

Overview

Provide Brand Assets

Provide Theme Colors

Provide Display Options

Footer Decisions