Commerce Site Navigation Theme Questions

Owned by Jacob Tschirhart
Last updated: Jun 01, 2023 by Jenni Buonanni
4 min read

NEW PROCESS:

Step 1. Identify Resort. Capture URL for marketing site that we can use for reference. Gather current theme for populating mockup .

Step 2. Ask Mike SnowSki to mock up based on existing theme choices, to prepare sample theme, and assess for any obvious accessibility issues.

Step 3. Present to customer - limit changes to applying second option - no opportunity to introduce new colors, fonts, etc.

Step 4. What is needed ( resources, detail, instructions, samples) to write up JIRA card for a dev to be able to create the theme based on Mike’s mockup?

ACTION ITEMS

Trish follow up with Snoski

Trish Follow up with MK on #4 ( done)

DannyK followup with Jenni on timeline/who get’s this

HEADER 2.0 acceptable name?

Header

  • Which hex color should the header background be?

(Set background. White is default setting, unless doesn't work with links, logo color, etc.)

(primary or secondary, would be mapped from commerce)

  • Which logo should be placed in the header?

(images (hero, logo) hopefully included in theme designer)

Top Categories

  • Default State

    • Should text be upper case, lower case, title case or kept as entered in admin?

(Mirror brand site - check main brand site.)

  • Which hex color should the text be? (generally pull from brand site)

  • Hover State - when a user hovers over the category. (brand site again, but if significant usability issue do not repeat them on our site)

    • Which at hex color should the text background be?

    • (primary or secondary, would be mapped from commerce)

  • Focus State - when a user navigates to the category link via keyboard

    • Which hex color should the text background be?

    • (primary or secondary, would be mapped from commerce)

  • Active State - when a category is selected and user is on the category page for that category

    • Which hex color should the text be?

    • (primary or secondary, would be mapped from commerce)

Subcategories

  • Which hex color should the subcategory drawer background be?

  • (primary or secondary, would be mapped from commerce)

  • Should the category drawer have a box shadow (option A) or be flat (option B)?

  • (primary or secondary, would be mapped from commerce)

     

Option A

Option B

 

  • Default

    • Which hex color should the text be?

  • Focus

    • Which hex color should the text background be?

  • Hover

    • Which hex color should the text background be?

  • Active State - when a category is selected and user is on the category page for that category

    • Text color is same as active state of top categories

Cart and Menu Buttons - we use the color of links from navigation will be primary color in your header.

  • Which hex color should the cart count badge be?

  • Which hex color should the cart icon be?

  • Which hex color should the cart icon background be hover and focus?

  • Which hex color should hamburger menu button be?

  • Which hex color should the menu button background be on hover and focus?

Navigation Sidebar

Top Banner

  • Which hex color should the background be?

  • Which hex color should the links and close button be?

  • Which hex color should the background of the links and close button be on hover?

  • Should text be upper case, lower case, title case or kept as entered in admin?

  • Which logo should be placed on the left here or should there be no logo?

  •  

Categories + Login/Logout Links

  • Note: Background below the banner is always white

  • Default State

    • Should text be upper case, lower case, title case or kept as entered in admin?

    • Which hex color should the text be?

    •  

  • Active State is shared with top nav categories

  • Hover State

    • Which hex color should the text background be?

    •  

  • Focus State

    • Which hex color should the text background be?

    •