101 0 6 SiteGenesisWireframe

Demandware: The SiteGenesis Annotated Wireframes
Release 101.0.6
January 2016
Copyright © 2016 Demandware, Inc. All Rights Reserved

Demandware: SiteGenesis Application Annotated Wireframes ii
This document and the information herein is confidential and proprietary information of Demandware, Inc.
(“Demandware”). This document and information cannot be used for any purpose without the express written
permission of Demandware or pursuant to a valid Demandware Master Subscription and Services Agreement.
January 2016 Copyright © 2016 Demandware, Inc. All Rights Reserved 800x600 (744x540) viewable; 1:1 scale) 1024x768 (968x720 viewable; 1:1 scale)
Demandware: SiteGenesis Application Annotated Wireframes iii
Contents
In-store pickup - enter zip code/select store .................................... 57 Shipping method with shipping promotion and product shipping promotion
In-store pickup - cart page................................................................ 58 86
Header | global navigation | footer.......................................... 1 In-store pickup - shipping addresses ............................................... 59 Shipping method with fixed price shipping ....................................... 86
Header | global navigation | footer ..................................................... 2 In-store pickup - shipping method page ........................................... 60 Shipping method with fixed price shipping and other items in shipment
Category navigation ........................................................................... 3 In-store pickup - billing page ............................................................ 61 86
In-store pickup - place order page.................................................... 62 Shipping promotions......................................................................... 86
Homepage ................................................................................. 4 In-store pickup - order receipt .......................................................... 63 Checkout - step 2 billing/payment method page - logged in ............ 87
Homepage .......................................................................................... 5 In-store pickup - order history page.................................................. 64 Checkout - step 2 billing/payment method page ............................. 88
In-store pickup - order summary page ............................................. 65 Checkout - step 3 place order - user logged In ................................ 89
Search suggestion ................................................................... 6 In-store pickup - single-shipping page ............................................. 66 Checkout - receipt page ................................................................... 90
Search suggestion.............................................................................. 7 In-store pickup - single-shipping with only in-store pickup ............... 67 Checkout - order receipt confirmation email..................................... 91
Search results page - enhanced search suggestion .......................... 8 Mini-cart................................................................................... 68 Checkout - guest checkout.................................................... 92
Search results ........................................................................... 9 Mini-cart............................................................................................ 69 Checkout - step 1 shipping address/method page - guest ............... 93
Search results breadcrumbs ............................................................ 10 Checkout - step 2 billing/payment method page - guest .................. 94
Search results page ......................................................................... 11
Cart .......................................................................................... 70 Checkout - step 3 place order - guest .............................................. 95
Search results page containing articles ........................................... 12 Cart page.......................................................................................... 71 Checkout - receipt page - guest ....................................................... 96
View all articles................................................................................. 13 Cart - with bundle ............................................................................. 72
Article full .......................................................................................... 14
Order summary - costs and discounts details .................... 97
Search results page - articles only ................................................... 15 Cart - pricing and promotions ............................................... 73 Order summary - costs and discounts details .................................. 98
Search results page - articles only list .............................................. 16 List price - single item....................................................................... 74
Search results page - sort and pagination ....................................... 17 List price - multiple items .................................................................. 74 Other payment methods ........................................................ 99
Product tiles...................................................................................... 18 List price and sale price - single item ............................................... 74 Other payment methods - PayPal .................................................. 100
Product tiles - pricing ........................................................................ 19 List price and sale price - multiple items .......................................... 74 Other payment methods - Bill Me Later.......................................... 101
Search results page - no results....................................................... 20 List price and promo price - single item............................................ 74
List price and sale/promo price - single item .................................... 74 Checkout - multiple shipping addresses ........................... 102
Results refinement ................................................................. 21 Cart - pricing and promotions ........................................................... 74 Checkout - multiple shipping - step 1 shipping ............................... 103
Search results refinement ................................................................ 22 Single promotion - multiple items ..................................................... 75 Checkout - multiple shipping - step 1 shipping addresses ............. 104
Size refinement ................................................................................ 24 Sale price and single promotion - multiple items .............................. 75 Checkout - multiple shipping - step 2 shipping methods ................ 105
Color refinement ............................................................................... 25 List price and multiple promotions - single item ............................... 75 Checkout - multiple shipping - step 3 billing ................................... 106
Sale price and multiple promotions - single item .............................. 75 Checkout - multiple shipping - step 4 place order .......................... 107
Category landing page ........................................................... 26 Sale price and multiple promotions - multiple items ......................... 75 Checkout - multiple shipping - order receipt ................................... 108
Category landing page ..................................................................... 27 Cart - pricing and promotions ........................................................... 75
Category results grid display ............................................................ 28 Single promotion - limited application............................................... 76 Purchasing gift certificates ................................................ 109
Multiple promotions - limited application .......................................... 76 Purchasing gift certificates ............................................................. 110
Compare products.................................................................. 30 Multiple promotions - no maximum application ................................ 76 Gift certificates only in cart .............................................................111
Compare bucket ............................................................................... 31 Surcharge and option pricing ........................................................... 76 Gift certificates only in cart - checkout billing ................................. 112
Compare products ............................................................................ 32 Cart - pricing and promotions ........................................................... 76 Gift certificates only - place order ................................................... 113
Cart - coupons .................................................................................. 77 Gift certificates only receipt ............................................................ 114
Product details........................................................................ 33 Qualifying product and associated bonus product ........................... 78 Gift certificates - cart multiple products .......................................... 115
Product details - standard product ................................................... 34 Qualifying products and associated bonus products ........................ 78
Product details - product single variation ......................................... 35 Cart - bonus products ....................................................................... 78 My Account ............................................................................116
Product details - variation product .................................................... 36 Cart - promotions: choice of bonus products ................................... 79 My Account - login .......................................................................... 117
Product details - variation product with options ................................ 37 Cart - alert on approaching discounts .............................................. 80 My Account - landing page - returning customer ............................ 118
Product details - product set............................................................. 38 Checkout - returning customer ............................................. 81 My Account - personal data ............................................................ 119
Product details - product bundle ...................................................... 39 My Account - addresses ................................................................. 120
Product details - page markup ......................................................... 40 Checkout login.................................................................................. 82 My Account - add/edit address window .......................................... 121
Product details - product imagery..................................................... 41 Checkout - step 1 shipping/method page - logged in user ............... 83 My Account - payment methods ..................................................... 122
Product details - recommendation scroll carousel............................ 42 Checkout - step 1 shipping/method page - multiple countries ......... 84 My Account - add credit card information window .......................... 123
Product details - pricing and promotions .......................................... 43 Shipment cost only ........................................................................... 85 My Account - left navigation ........................................................... 124
Product details - color and size selections ...................................... 44 Shipment cost and fixed product shipping cost ................................ 85
Product details - add to cart ............................................................. 46 No shipment cost, but 2 fixed product shipping costs ...................... 85 Create an account ................................................................ 125
Product details - tabs........................................................................ 47 Shipment cost plus product surcharges ........................................... 85 My Account - personal data - new user .......................................... 126
Cost for the shipment, plus a (surcharge) cost for each video game.85
Limited inventory - product details....................................... 48 Unselected shipment cost with a shipping promotion ...................... 85 Reset password .................................................................... 127
Limited inventory - product details.................................................... 49 Shipment cost with a shipping promotion ......................................... 85 Password recovery ......................................................................... 128
Shipment cost with a shipping promotion plus product surcharge ... 85
Quickview ................................................................................ 50 Product-level shipping promotion ..................................................... 85 Order history ......................................................................... 129
Shipment cost and product-level shipping promotion ...................... 85
Quickview - standard/single variation product .................................. 51 Shipment cost with a shipping promotion and product-level shipping promotion 85 My Account - order history.............................................................. 130
Quickview - variation product ........................................................... 52 Shipping promotions......................................................................... 85 My Account - order details .............................................................. 131
Quickview - product set .................................................................... 53 Shipment cost only .......................................................................... 86 My Account - order details - multiple shipping ................................ 132
In-store pickup ........................................................................ 54 Shipping method with shipping promotion and excluded products . 86 Wishlist .................................................................................. 133
Shipping method with excluded products and surcharge ................. 86
In-store pickup - product details ....................................................... 55 Shipping method with shipping promotion and surcharge ............... 86 Wishlist - unauthenticated user ...................................................... 134
In-store pickup - Quickview .............................................................. 56 Shipping method with product shipping promotion .......................... 86 Wishlist - search results ................................................................. 135
Demandware: SiteGenesis Application Annotated Wireframes iv
Wishlist - public view ...................................................................... 136 Purchasing gift certificates ............................................................. 200
Wishlist - authenticated user - no items ......................................... 137 User profile - returning customer....................................................
r 201
Wishlist - authenticated user .......................................................... 138 User profile - landing page - returning customerr ............................ 202
User profile - personal data ............................................................ 203
Gift registry ........................................................................... 139 User profile - addresses/payment methods/order history .............. 204
Gift registry - unauthenticated user ................................................ 140 User profile - order details .............................................................. 205
Gift registry - user’s registries ........................................................ 141 Wishlist - unauthenticated userr ...................................................... 206
Gift registry - creation - event/participants...................................... 142 Wishlist - authenticated userr .......................................................... 207
Gift registry - creation - shipping .................................................... 143 Wishlist - search results/public view ............................................... 208
Gift registry - confirmation .............................................................. 144 Gift registry - unauthenticated userr ................................................ 209
Gift registry - registrant(s) view ...................................................... 145 Gift registry - authenticated userr .................................................... 210
Gift registry - registrant(s) view - tabs ............................................ 146 Gift registry - creation - event/participants...................................... 211
Gift registry - registrant(s) view - purchases................................... 147 Gift registry - creation - shipping .................................................... 212
Gift registry - search results ........................................................... 148 Gift registry - registrant(s) view ...................................................... 213
Gift registry - shopper’s view .......................................................... 149 Gift registry - search results ........................................................... 214
Gift registry - shopper's view .......................................................... 215
Store locator ......................................................................... 150 Store locatorr ................................................................................... 216
Store locator ................................................................................... 151 Site content .................................................................................... 217
Store locator - results ..................................................................... 152
Store details window ...................................................................... 153
Customer service ................................................................. 154
Customer service ........................................................................... 155
Customer service - left navigation .................................................. 156
Contact us ............................................................................. 157
Contact us - confirmation ............................................................... 158
Tooltips and confirmation windows ................................... 159
Tooltips ........................................................................................... 160
Error messages .................................................................... 161
Errors - disabled cookies or JavaScript .......................................... 162
Errors - client side on focus validation............................................ 163
Errors - client side required field..................................................... 164
Errors - server side invalid data...................................................... 165
Errors - coupons ............................................................................. 166
Errors - credit card submissions ..................................................... 167
Errors - coupon codes .................................................................... 168
Errors - Bill Me Later ...................................................................... 169
Errors - confirm email address ....................................................... 170
Errors - purchasing gift certificates ................................................. 171
Error - login form cart ..................................................................... 172
Error - my account login ................................................................. 173
404 - missing page ......................................................................... 174
General error page ......................................................................... 175
Responsive web design ....................................................... 176
Home page ..................................................................................... 177
Navigation ...................................................................................... 178
Search suggestion.......................................................................... 179
Search results breadcrumbs .......................................................... 180
Search results page ....................................................................... 181
Search results page - full article ..................................................... 182
Category landing page ................................................................... 183
Unsupported features ..................................................................... 184
Product details................................................................................ 185
Cart page........................................................................................ 186
Checkout - login ............................................................................. 187
Cart - with bundle ........................................................................... 188
Cart - promotions - choice of bonus products ................................ 189
Checkout - step 1 shipping/method page ....................................... 190
Checkout - step 2 billing/payment method page ............................ 191
Checkout - step 3 place order ........................................................ 192
Checkout - receipt page ................................................................. 193
Checkout - multiple shipping - step 1 shipping ............................... 194
Checkout - multiple shipping - step 1 shipping addresses ............. 195
Checkout - multiple shipping - step 2 shipping methods ................ 196
Checkout - multiple shipping - step 3 billing ................................... 197
Checkout - multiple shipping - step 4 place order .......................... 198
Checkout - multiple shipping - order receipt ................................... 199
Demandware: SiteGenesis Application Annotated Wireframes 1
Header | global navigation | footer
Global Slot: header-banner Country A 6 Header | global navigation | footer

1 2 Enter Keyword or Item # 3 4 5 Reference Resource
7 5
ISML files header.isml*, footer.isml*
CSS containers h1#logo, .header_
banner,
8 .generalnav, .sitesearch,
LOGIN/REGISTER
Login .userinfo
9 | CATEGORY-1 CATEGORY-N TOP SELLER
NEW ARRIVALS Register * items included
within
FOLLOW US
NEW ARRIVALS 1. Company logo
Sub-Category-1 PROD GET SPECIAL OFFERS & NEWS 2. Search box

- Sub-Sub Category 1A IMG ON THE LATEST STYLES When a customer places the cursor in the Search box, the text disappears. When
- Sub-Sub Category 1B
the customer enters text into the Search box and clicks the Search icon, they are
- Sub-Sub Category 1A Enter Your Email returned to the search results page and the text displays in the search box.
The customer can press Enter instead of clicking the Search icon, which also returns
Sub-Category-2
them to the search results page. The search box has search suggestions enabled (see
- Sub-Sub Category 2A
Wireframe: Search suggestion).
Continent 1 6 3. Stores icon
- Sub-Sub Category 3A
Country A The customer clicks this icon to navigate to the Store Locator page.
4. Login icon
Country B
The customer clicks this icon to open the My Account page where they can create or
edit an account. When a logged in customer hovers their mouse over this icon, the
Continent 2
user name displays in a tooltip.
Country C 5. Cart icon
The item number increases as the customer adds items to the cart.
6. Country selector
Displays the available countries, but only on the home page. The customer can select
a different country, which changes the locale that displays (if a localized version of
SiteGenesis is available) and the currency.
Note: The locals/countries must be enabled in Business Manager.

7. Header Global slot
The Global slot is specified in the Business Manager: header-banner.
8. LOGIN /REGISTER window
The customer can select Login or Register, can access social media, specials, and
offers, and can enter an email.
9. Tabular category navigation and menus
See the Wireframe: Category navigation.
10. Email address
This displays an entry field for a customer email address. The merchant can use this
address to send promotional material.
ACCOUNT CUSTOMER SERVICE ABOUT
FOLLOW US 11 11. Persistent footer
MY ACCOUNT CONTACT US ABOUT US
CHECK ORDER HELP PRIVACY The footer remains persistent throughout the site. Each link points to either content
WISHLIST GIFT CERTIFICATES TERMS
GET SPECIAL OFFERS & NEWS GIFT REGISTRY SITE MAP JOBS
assets (set up within the Business Manager) or a specific pipeline. Each content asset
ON LATEST STYLES uses its literal name as its naming convention.
© 2004 - 2016 Demandware or its affiliates. All rights reserved.
For example, Terms will be terms. The content asset for the persistent footer is called
This is a demo store only. Orders made WILL NOT be processed. footer-copy.
10 Email Address
Category navigation
Reference Resource
ISML file categoryTree.isml
Header ISML included header.isml
1 within
CSS container .categorymenu
NEW ARRIVALS | CATEGORY-1 CATEGORY-N
1. Tabular category navigation
The application determines which of the root level child categories are sorted within
Sub-Category-1 Business Manager. The tabular navigation is built using the online sorted list of child
- Sub-Sub Category-1A 2 categories at the root level. Child categories of the root that are online are displayed
3 - Sub-Sub Category-1B PROD using the showInMenu custom attribute in the tabular navigation. A category that is
- Sub-Sub Category-1A IMG offline, regardless of sort order, does not display. Unsorted categories can be linked
- Sub-Sub Category-1B to within content assets, etc., as needed. When a customer clicks a tab, they are
Sub-Category-2 navigated to that category.
- Sub-Sub Category-2A
- Sub-Sub Category-2B 2. Category menu
- Sub-Sub Category-3A When the customer mouses over a top-level category, a menu displays showing the
Sub-Category-3 subcategories of the top level categories and a content asset.
3. Sub-categories
Any sub-sub-categories within a sub-category display indented below the parent, with
the parent listed vertically or horizontally. When the customer clicks a menu option, the
CATEGORY-1 menu closes and the customer is navigated to the subcategory landing page that they
selected.
4. Content assets
Sub-Category-1
The content asset, visually represented by a graphic or HTML, can link to a category
Sub-Category-2 or sub-category page, product detail page, or a static page, for example, Gift
PROD
IMG 4 Certificates.
Sub-Category-3
Sub-Category-4
Sub-Category-5
CATEGORY-N
Sub-Category-1 Sub-Category-2
- Sub-Sub Category 1A - Sub-Sub Category 2A 3
- Sub-Sub Category 1B - Sub-Sub Category 2B
- Sub-Sub Category 1C - Sub-Sub Category 2C
Content slot 4
Homepage
Homepage
Reference Resource
ISML pages homepage.isml, footer.
Header isml
CSS containers .homepage, .footer_links,
.copyright
1. Global slot homepage main

1 This is the HTML slot for Flash content, maintained in Business Manager.
The content asset and global slot name is home-main.
2. Global slot homepage left/right/center
This slot contains a content asset that is configured in Business Manager.
The content asset and global slot name is home-bottom-left.
3. Email Address
The customer can enter an email address to opt-into a newsletter or other email
notification.
2 2 2
GET SPECIAL OFFERS & NEWS ON LATEST STYLES 3 Email Address
Persistent Footer
Search suggestion
Search suggestion
Header Enter Key Word or Item # 3 Reference Resource

1
ISML files suggestions.isml (simple)
suggestionsbeta.isml
2 Looking for these brands? Search for "shirt"? (enhanced)
NEW ARRIVALS CATEGORY-1 CATEGORY-N Sierra Striped shirt
prod
img 3 CSS containers .suggestions
Categories from: $40.00
Search for: Shoes Dress Shirts
Shoes in Accessories prod Paisley Shirt
img
Dress Shirts in Clothing from: $43.00
prod
Striped Shirt
img from: $40.00
Search suggestion is a dynamic search list that displays automatically as the

customer enters a search term into the search box. The list of search suggestions
returned depends on the catalog data and the search indexes. Merchants can add
and remove custom suggestions in Business Manager.
This wireframe shows the enhanced search suggestion feature. You can also use
simple search suggestion functionality that was supported prior to Release 14.3.
1. Search input
As the customer enters a search term, suggestions display after three characters have
been entered. You can change this number in your application. Suggestions display
after a configured delay to handle fast customer entry. (Note: Both are configured via
searchsuggestion.js)
2. Search suggestion display
For enhanced search suggest (shown to the left), information displays based on
product, brand, category, and content data that you configured in Business Manager.
This includes matches based on configured synonyms and hypernyms, for example.
The right pane lists product matches, while the left pane lists other suggested search
Persistent footer matches. Products display with a thumbnail graphic. Search term suggestions can
display with one or two panes depending on potential matches. For example, some
search terms only result in product matches, so the left pane does not display. Also,
the left pane does not display if it only contains one entry that also displays in the right
pane.
For simple search suggestions, the list of search suggestions automatically display
in descending order of product hits for the suggested search phrase. The number of
suggestions that display can be configured (via APIs). The default is 10.
3. Search suggestion mouseover
For enhanced search suggestions, when the customer performs a mouseover on a
search suggestion link, the link is activated. The customer can click the link to open the
suggestion's search results page.
For simple search suggestions, when a customer performs a mouseover on a search
suggestion, the suggestion is highlighted. When the customer selects a suggestion
from the list, the suggestion's search results page opens.
Search results page - enhanced search suggestion

Header 1. Breadcrumbs when enhanced search suggestion is enabled
On the search results page, when enhanced search suggestion is
enabled, the breadcrumbs shows the search phrase entered and the
Your search phrase was "wrong search phrase" - Showing results for "corrected search phrase". 1 actual phrase used.
See the Enhanced search suggestion documentation.
Best Matches 12 Showing 1 - 12 of 20 Results 1 2
Product Product Product

Tile Tile Tile
Search
Navigation

Tile Tile Tile

Tile Tile Tile

Tile Tile Tile
Persistent footer
Search results
Search results breadcrumbs
Reference Resource
ISML files productsearchbread-
crumbs.isml
Header CSS containers .breadcrumbs
1
Sorted by Top Sellers
2
Your search results for “keyword term” in Category > Refinement
Women's > Jewelry > Sorted by Top Sellers
1
REFINE SEARCH > Your search results for Keyword
Your search results for “keyword”
˅ CATEGORY
2 3 4 5
u New Arrivals Your search results for “keyword” in Womens > Refined by Color Blue x , Green x , Brown x
1. Search results message
and Size 7.5 x , 8.5 x
u Womens (View All) The “Your search results for” message displays followed by the <keyword term> that
was entered into the search box. The keyword is linked to the original search. Clicking
u Mens the link removes any further refinements made by the customer and the original
Your search results for “keyword” in Womens > Refined by Price $20.00 to $39.99 x , and color Blue x ,
Green x , Black x , Tan x , Brown x and size 7.5 x , 8 x , 8.5 x , 9 x , 9.5 x results page reopens.
˅ COLOR 6 2. Sorted by message
The "Sorted by" message displays for search results based on fake categories such
Clear as Top Sellers, which is not a category with assigned products. It is a product search
Your search results for “keyword”
sorted by Top Sellers.
3. Category Refinement
Category refinements are linked to the category landing pages. Clicking a category
˅ PRICE refinement link removes all refinements, including the searched on term.
4. Refined search message
Clear This element displays “refined by <Refinement attribute(s)>”.
$50 - $99.99 5. Refinements
$100 - $499.99 The refinements breadcrumb is formed as additional attributes are selected. The
specific refinements display as a label for each attribute (for example, “color Blue x”).
The text “and” separates specific refinement where applicable (for example, Color and
˅ BY BRAND Size). Specific values within these refinements are separated with a comma.
6. Refinement values
Clear
Each refinement value displays as text with an icon to its right. Clicking the x removes
Apple that refinement from the breadcrumb and causes the search results to relax. The page
is then refreshed with the updated refinement breadcrumb.
Arlene
7. Breadcrumb wrapped
Atari This shows how the breadcrumb would display if it were long enough to enable
wrapping. Wrapping is handled naturally as floating text, by expanding the height of
Creative
the containing breadcrumb div.
Persistent footer
Search results page

Header
Reference Resource
ISML files productgrid.isml,
product_searchrefine.
1 Search results banner slot isml, pt_product-
searchresults.isml
CSS containers .search, .productresult-
sarea, .search_refine,
Your search results for “keyword term” .search_refinements
2
41 Results 1
Search
Navigation
Product Product Product 1. Search results banner slot
Tile Tile Tile
This is the default global slot with static HTML content, such as a banner, that only
displays if the keyword search results are not refined by a category. The slot name is
search-results-banner.
The banner that displays can also be triggered by the search term. If the search term
matches the content asset ID, the platform displays that banner instead of the banner
assigned in the global slot. See the Infocenter for details.
2. Product grid dimensions
Tile Tile Tile
The product grid defaults to 12 items (4 X 3) per page, but the customer can optionally
view a different number of items per page. The containing div for the search results
contains the category name that enables customers to change the layout of the results
per category, as follows:
<div class=”search-results <categoryname>”>
Product Product Product The sort order depends on the sort configuration settings in Business Manager (for
Tile Tile Tile product results). See Wireframe: Search results page containing articles, for content
results.
The search refinement navigation effects the product grid. The default refinements that
display on the Search Results page are set at the root level of the storefront catalog; in
this example Category, Color, Size and Price. See Wireframe: Product grid display.
3. Changes the grid view to a row layout.
Product Product Product This is done via CSS.
Tile Tile Tile
4. Infinite scrolling
When infinite scrolling is enabled (via a Business Manager preference), when the
product grid displays, and the customer scrolls down to the bottom of the page, a new
page is automatically appended after the existing page. The product grid no longer
Best Matches 12 Showing 1 - 12 of 20 Results 1 2 displays navigation aids such as the sort by option or the number of items per page
option. You can still change the number of products that display horizontally (3 or 1);
beside which you will see the number of results.
Persistent footer
Search results page containing articles
Header Reference Resource

ISML files toptcontenthits.isml
CSS containers .relatedarticles, .articles
Search results banner
Jump down to: Products Found | Articles Found 1
Products Found (7)
Best Matches 12 Showing 1 - 7 of 7 Results
Assume that products are online and searchable.

Note: An article is a content asset.
Product Product Product Product
Tile Tile Tile Tile 1. Articles anchorlink
The customer clicks the Articles Found link and is navigated to the “Articles found”
content.
2. Related articles
This displays all articles associated with keyword entered by the customer, sorted by
the most recent best match. This displays at the bottom of the search results page
Product Product Product whenever a related article is found. A maximum of 6 articles display at the bottom
Search Tile Tile Tile of the product search results. If more than 6 articles are returned, the customer can
Navigation
click the View All Articles link to view them. Related articles display on every search
results page, independent of any paging or refinement.
3. Individual article
Best Matches 12 Showing 1 - 7 of 7 Results Each article displays with its name in bold and linked to the article, with the first two
lines of the article’s description (set within the CSS) displaying beside the name. The
customer can also click the Read More link to navigate to the article.
4. View all articles
This displays the text “View all articles” along with the number of articles returned from
the search result. Clicking the button navigates the customer to the View all articles
2 Articles Found (4) results page (see Wireframe: View all articles).
• Article 1 Article description: Read More • Article 2 Article description: Read More
3
>> >>
• Article 3 Article description: Read More • Article 4 Article description: Read More
>> >>
View All Articles 4
Persistent footer
View all articles
Reference Resource
ISML files pt_contentsearchresult.
Header isml, foldercontenthits.
isml
CSS containers ..relatedarticles, .articles
REFINE SEARCH
Your search found 4 Article(s)
<< Back to Product Results 1
CUSTOMER SERVICE
4 Results
u Customer Service Why shoes 3
2 Shoes are important for several reasons: Read more
Shoes online
What do you need to know about buying shoes online: Read more
This page opens when the customer clicks the View all articles link (see Wireframe: Search
results page containing articles) or if a search resulted in just articles (no products). In this
Why leather shoes
case, there is no link to “Back to product results”.
Why buy expensive leather shoes: Read more
Wearing high heels 1. Back to product results
How to wear and walk in high heel shows without pain and blistering: Read more This returns the customer to the previous Search Results page (see Wireframe:
Search results page containing articles). If a search results with no products found, the
<< Back to Product Results message “Your search for “<keyword>” resulted in no products” displays.
4 Results 2. Content search refinements

The product search refinements have been replaced with content search refinements,
which display in the same default styling as for the product search refinements (see
Wireframe: Results refinement).
3. Articles
The articles display in descending order of the most recent best match from left to
right, then continuing below. For example, the first article to the left will be the most
recent article, followed by the article to its immediate right. The third most recent article
Persistent footer is the article below the first article on the left, and so forth. The display is controlled via
the CSS of each article’s containing div.
Article full
Header 1. Breadcrumb
The article name as defined in Business Manager displays in the breadcrumb.
2. Back to Results
Your search results for "keyword term" 1 Click the Back button to return to the previous page.
3. Article Body
REFINE SEARCH << Back to Results 2 The content asset body displays here. Styling can be done within the HTML editor in
Business Manager.
2
Article Body as defined in Business Manager 3
4. Content Search Refinements Folders
CUSTOMER SERVICE
This navigation is set by the library folder structure as defined in Business Manager.
It acts the same as category navigation. In this case, the Customer service content
u Customer Service 4
folders display.
Persistent footer
Search results page - articles only
The following elements can occur when there are only articles for search results:
Header
1. Articles found
The number of articles displays as a link. Clicking this navigates the customer to the
Search Results for “demandware” Articles list page.
2. Try again
REFINE SEARCH Search Results This content asset, maintained in Business Manager, is intended to instruct the
customer on how to obtain better search results.
The content asset is noresults-help.
u New Arrivals 3. Search box
WE'RE SORRY, NO PRODUCTS WERE FOUND FOR YOUR SEARCH: DEMANDWARE
u Womens The standard search box displays, allowing the customer to enter another search
term if the list of articles does not meet their search needs. The customer clicks Go to
u Mens initiate the search.
u Electronics We’ve found 7 Article(s) 1 4. No results informational content

This content asset, maintained in Business Manager, provides the customer with
u Gift Certificates Try your search again using these tips: 2
the appropriate business information when the search did not locate what they were
u Sale • Double check the spelling. Try varying the spelling.
looking for.
• Limit the search to one or two words. The content asset is noresults-bottom.
• Be less specific in your wording. Sometimes a more general term will lead you to the similar products.
Try a new search:
Go 3
If you cannot find what you are looking for, why not let our trained staff recommend something?
4
Our Customer Service Representatives are available now to help. Email us or call 800-555-1212.
Persistent footer
Search results page - articles only list

The following elements can occur when there are only articles for search results.
Header This page opens either when the customer clicks the View all articles link (see
Wireframe: Search results page containing articles) or if a search resulted in just
articles (no products). In this case, there is no link to “Back to product results”.
REFINE SEARCH Your search found 4 Article(s) 1. Back to product results
Your search for “demandware” resulted in no products. 1 This returns the customer to the previous Search Results page (see Wireframe: Search
FOLDER results page containing articles). If a search results with no products found, the message
“Your search for “<keyword>” resulted in no products” displays.
Our Story Showing 1 - 4 of 4 Results
u About Demandware With Demandware Contact Us Details 2. Content search refinements
ecommerce, they’re spend- Interested in getting more
u Customer Service 2 information about Demand- The product search refinements have been replaced with content search refinements,
ing more time leading which display in the same default styling as for the product search refinements (see
with merchandising and ware and our On-Demand
marketing. They’re in eCommerce solution? Here is
complete control over their information on office locations 3. Articles
site, making changes and and directions to our locations.
The articles display in descending order of the most recent best match from left to right,
launching new storefronts Read more
then continuing below. For example, the first article to the left will be the most recent
whenever they like. They’re 3 article, followed by the article to its immediate right. The third most recent article is the
spending more time develop- About Us article below the first article on the left, and so forth. The display is controlled via the CSS
ing their own proprietary It all started with a series of
of each article’s containing div.
innovations (versus building observations: eCommerce
commodity functionality). merchandising and marketing 4. Paging
They receive new software innovation is what generates Paging is handled the same as for search results (see Wireframe: Search results page -
upgrades from Demandware the revenue, yet most opera- pagination).The content asset is noresults-bottom.
continuously. And they tions are spending 80% of
never-ever-worry about their budgets simply maintain-
site uptime, availability and ing current infrastructure.
security. Read more The pace of ecommerce
accelerates daily, yet most
Managing An Account operations are scrambling
Your email address serves to stand still. Merchandisers
as a convenient way to and marketers are supremely
receive important informa- frustrated, spending more time
tion about your order and chasing outsourced providers
serves as your Demandware and internal IT organizations,
account identification. Your than actually merchandis-
account stores information ing and marketing their own
such as order history and businesses. There had to be a
your billing and shipping better way. Read more
address. It also offers you
the ability to track your
order(s). The password
assures that only you have
access to your account
information Read more
Your search for “demandware” resulted in no products.
Showing 1 - 4 of 4 Results 4
Persistent footer
Search results page - sort and pagination
Reference Resource
ISML files pagingbar.isml, product-
Header sortingoptions.isml,
paginginformation.isml
1 CSS containers .searchresultsheader,

.sortby, .itemsperpage,
Your search results for “suits” .results_hits, .pagination
7 5
2 Best Matches 12 Showing 1 - 7 of 7 Results 1 2 6
Best Matches 4 1 2 3 4 5 6 > >>

3 Price High To Low
Price Low To High 1. Search results header for keyword
<< < 4 5 6 7 8 > >>
Product Name A-Z
This displays “Search results for “[keyword]”.”
Product Name Z-A
<< < 11 12 13 14 15
Brand 2. Sort by drop down
Search
Most Popular
Navigation 1 2 3 Clicking the drop down icon causes Best Matches (default configured in Business
Top Sellers
Product Product Pro
Product
od
ducuc
u t Manager) to display sorted by Name, Price, and Brand in ascending and descending
Tile Tile Tile
Til
ille order.
3. Sort selection
12 Selecting a sort option from the drop down list refreshes the product grid based on
12 the selection (for example, Product Name [A-Z] sorts products in ascending order by
24 8 product name within the grid). This sort is persistent as the customer pages through
36 the results or adds more refinements, but returns to the default if a new search occurs.
48 Changing the sort order causes the first results page to open.
Tile Tile Tile
60 4. Paging links
When the customer clicks the page number, they are navigated to the selected
12 page. Clicking Previous navigates the customer to the previous page. Clicking
Next navigates the customer to next page. Clicking the first page icon navigates the
12
customer to first page of the results. Clicking the last page icon returns the customer
24
Product Product Product to the last page of results. When navigating to a results page within page ranges that
36
Tile Tile Tile do not include the first or last page, the selected page opens in the center, allowing for
VIEW ALL (43)
easy navigation to the two previous and two next pages.
5. Item results
The default is 12 items per page. For less than 12 items, this displays as “Showing 1-X
items”. For more than 12 items, this displays as “Showing 1-12 of X results”, where X
represents the total number of products returned.
6. Paging
Tile Tile Tile
This displays a maximum of 5 pages, with previous, next, first page, and last page
icons, as appropriate based on position in the results set.
7. Items per page drop down
Best Matches 12 Showing 1 - 12 of 20 Results 1 2 Selecting this causes the appropriate number of items to display on the product grid.
8. Items per page selection
Selecting a number refreshes the number of products in the grid. For example, if a
search returns 27 products, 12, 24 and View All (27) display in the drop down list. If
less than 12 products the page bar is disabled and the drop down list is not shown.
If more than 60 products result, View All is removed from the list. This selection is
persistent as the customer paginates through the results or adds more refinements,
Persistent footer but returns to the default for a new search.
Product tiles
Reference Resource
ISML files producttitle.isml, product-
grid.isml
2
CSS containers .productresultarea,
.productlighting, .product
PROD PROD PROD
IMG IMG IMG
Product name Product name Product name
3 Pricing Pricing Pricing

This wireframe represents product thumbnail layouts and the functionality within a
Promotional message search result grid and a category landing grid.
4 Promotional message Promotional message
1. Color swatches
Compare 5 1a Compare 1bView All Colors (23) Compare View All Colors ((23))
a. Swatches only display for variation products that have defined color custom attributes.
Hovering over a color swatch changes the product thumbnail Image. Selecting a
1c swatch opens the product detail page with the color of the swatch selected.
b. If a product has more than 5 colors associated with it, the swatches are replaced with
the View all colors (X) link.
c. When a customer clicks the link, a <div> displays with all the color swatches loaded
into it. Only color variations based on the actual search result display, with the first
MAXIMUM PRODUCT PRESENTATION MINIMUM PRODUCT PRESENTATION color swatch pre-selected. The link can also navigate directly to the product details
page.
2. Product thumbnail
The thumbnail image is returned from the thumbnail attribute assigned to the product.
7 For search results, the product thumbnail represents the actual product returned. For
variation master products, the master product Image displays as a default. For product
masters having a color variation, the image of the first color variation (configured in
PROD PROD Business Manager) displays.
6 Quickview
IMG IMG 3. Pricing
Pricing for search results is handled the same way as in Wireframe: Product grid
display: pricing.
4. Promotional messaging
Promotional messaging displays for products (that have actual promotions) returned
in a search result. Promotional messaging is configured in Business Manager as the
Product name Product name callout message of a promotion. If multiple promotions are active, only one promotion
displays; based on exclusivity, rank and other promotion related attributes. If no
Pricing Pricing promotion is active, the reviews area displays beneath the pricing.
on the product type (variation, standard or product set). 5. Compare

Promotional message Promotional message
See Wireframe: Quickview. This enables the customer to compare similar products when locating a product via
Compare Compare 7. Width and height of the product container guided search (see Wireframe: Compare products). Compare only displays on the
Category grid page.
The width and height for the product container is fixed
and the overflow hidden with the style sheet to assure 6. Quickview
that the grid will always display properly. When a customer hovers a cursor over a product thumbnail, the Quickview icon
displays. If they click this icon, navigation returns to the Quickview module depending
Product tiles - pricing
Reference Resource
ISML files producttilepricing.isml
STANDARD/SINGLE VARIATION PRODUCT STANDARD PRODUCT SALE/PROMOTION CSS containers .pricing

VARIATION MASTER
PROD PROD PROD

IMG IMG IMG
This wireframe represents the product search results display of pricing. All products
are online and in stock.
1. Standard product
Product name Product name Product name This shows the list price.
2. Standard product sale/promotion
$XX.XX $XX.XX $XX.XX $XX.XX to $XX.XX
1 2 3 This shows the list price and the promotion price side by side. The list price has a
strike through.
3. Variation master
1 For a variation master, a “from - to price” range displays. The price range reflects only
the variants that match the search criteria. If all matching variants have the same
price, only one price displays. Variation promotions are not accounted for in the price
display.
OPTION PRODUCT PRODUCT SET PRODUCT BUNDLE 4. Product set
Product sets do not have rates and reviews. Assume products are online, searchable,
and at least one product is in stock. Product set images represent the standard image
that displays for the product set.
a. Product set name
A product set displays like a standard product. To indicate that a product is a set, it is
named as follows:
PROD PROD PROD
IMG IMG IMG [product name] set
b. Product set price

Prices do not display for product sets. Instead, the following text displays:
“Buy All or One”
5. Product bundle
Product bundles display just like standard products. The product bundle image
Product name 4a
Product name set Product name bundle represents a product bundle image, the standard image that displays for the product
bundle.
$XX.XX 4 Buy4bAll or One 5 $XX.XX
Search results page - no results
Header The following elements can occur when there are no search results:
1. Misspelled words
The search term entered by the customer in the search box was misspelled.
Your search results for "bouts" 2. Did You Mean
The application uses the spelling index to find a suggested spelling for the misspelled
word. Clicking this word causes the search results for the word selected to be refreshed.
Search Results Only one suggested word displays.
REFINE SEARCH
We're sorry, no products were found for your search results: bouts 1 3. No results content
u New Arrivals This content asset, maintained in Business Manager, is intended to instruct the customer
Did you mean: coats ? 2
on how to obtain better search results.
u Womens
The content asset is noresults-help.
Try your search again using these tips: 3
u Mens 4. Search box
u Electronics • Double check the spelling. Try varying the spelling. The standard search box displays, enabling the customer to enter a search term if the
• Limit the search to one or two words. Did You Mean recommendation does not meet their search needs.
Gift Certificates • Be less specific in your wording. Sometimes a more general term will lead you to the similar products.
5. No results informational content
Sale
Try a new search: This content asset, maintained in Business Manager, provides the customer with the
appropriate business information when no search results occur. This links to other
Go 4
existing content assets.
The content asset is noresults-bottom.
1
If you cannot find what you are looking for, why not let our trained staff recommend something? 5
Our Customer Service Representatives are available now to help. Email us or call 800-555-1212.
Persistent footer
Results refinement
“suit” Search results refinement: by category

Customer refines suit by clicking through the two category levels:
1. Customer receives search results for “suits” 2. Customer refines search results by category “Mens” 3. Customer refines search results by categories “Mens, Clothing, Suits”
BREADCRUMB BREADCRUMB BREADCRUMB

Main breadcrumb shows the search term.
Your search results for “suits” Your search results for “suits” in Mens Your search results for “suits” in Mens > Clothing
RESULTS DISPLAY Results display shows results for search on the right
RESULTS DISPLAY RESULTS DISPLAY
side of the results header and footer.
Showing 1-12 of 105 results Showing 1-12 of 52 results Showing 1-12 of 14 results
NAV COLUMN NAV COLUMN NAV COLUMN

The category refinement displays as
After the customer selects a top level
the first refinement. Only categories As the customer navigates the catalog
REFINE SEARCH REFINE SEARCH category, the “Category” label changes
based on the current (possibly refined)
to the name of the top level category REFINE SEARCH tree, categories remain expanded
search result display. Available revealing the category path up to
to which the results are refined. Sub-
˅ CATEGORY
categories are sorted according to the Mens (View All) categories containing products as part Mens (View All)
the top level category. All categories
sort order configured in the Business that are part of this category path are
of the search result are listed below.
Manager. Other categories with no highlighted.
resulting products in the search result Clothing An icon displays for all categories,
Clothing
u New Arrivals Accessories indicating that it is possible to refine
do not display.
further to additional sub-categories >> Suits Clicking “Mens” causes the search
result to be refined by the top level
u Womens below.
category “Mens”, removing the
refinement for “suits” in “Clothing.”
u Mens Clicking View All returns the customer
Color refinements, as configured ˅ COLOR
to all the top-level categories.
˅ COLOR
in Business Manager display the
available color swatches.
Some refinements, such as category Refinements display based on the
and price, are inherited by sub- current selected refinement category
categories of the category that defines as defined in Business Manager. Some
the refinement. refinements, such as category and
price, are inherited by sub-categories
of the category that defines the
refinement.
Price refinement displays with

configured price ranges as the
second refinement below the category
˅ PRICE
˅ PRICE refinement. Price refinements are
configured in Business Manager. Clear
$XX - $XX.XX Note: When multi-currency is enabled $XX - $XX.XX
and the customer changes the
$XXX - $XXX.XX currency, the price refinement buckets $XXX - $XXX.XX
can also change. See the Wireframe:
Header | global navigation | footer.
Search results refinement
Depending on selections in other Refinements for search results display based on the deepest category in the
Brand refinement displays with all
˅ SIZE refinements, refinement values may catalog tree that all products in the search result have in common. For example,
˅ BY BRAND
brands based on the (possibly refined)
search result.
become deactivated indicating that
the current refined search result
if there are products categorized in multiple top-level categories, refinement
does not contain products having this options display based on the catalog root. If the search results only contains
Brand A p By default, the list of available 36 38 39 40
refinement value set. Deactivated products categorized in multiple subcategories of the “Mens” refinement, options
_ refinement values of a refinement
values do not display in the value list. display based on the “Mens” category.
Brand B _ displays as a regular list. If the 41 42 43 44
_ number of refinement values exceed By default, all refinements display as simple value lists. Certain refinements,
Brand C a configured default number of 5 such as color and size, display with swatches using CSS to render them. This
(configured in Business Manager), a
46 48 50
custom logic is handled in a template. Each refinement is expandable and
Brand D scroll box with a fixed height contains
all refinement values. collapsible, causing only the refinement option to display or hide. By default, all
Brand E refinements are expanded.
“Pants” Search results refinement: by attributes

Customer refines search by size and price:
1. Customer receives search results for “pants” and clicks “Men,” and then “Price: $50 - 2. Customer receives search results for “pants” and clicks “Men,” and then 3. Customer clicks Clear Size.
$99.99.” “Price: $50 - $99.99,” and then refines by three sizes
BREADCRUMB
BREADCRUMB BREADCRUMB Your search results for “pants” in Mens > Refined by Price $xx.xx - $xxx.xx x
Your search results for “pants” in Mens > Refined by Price $xx.xx - $xxx.xx x Your search results for “pants” in Mens > Refined by Price $xx.xx - $xxx x and
The breadcrumb gives feedback about the current selected refinement Size A x , C x , D x 3 size values that have been selected and 1 price RESULTS DISPLAY Reference to the “Size” refinement is removed when
RESULTS DISPLAY values. refinement display in the breadcrumb. Showing 1-12 of 85 Results customer clicks Clear.
Showing 1-12 of 85 Results RESULTS DISPLAY
Results display shows results for search on the right side of the results Showing 1-12 of 75 Results The “X” box in the breadcrumb performs the same
header and footer. NAV COLUMN function.
NAV COLUMN
NAV COLUMN Note: Removing just one “Size” value will refine
REFINE SEARCH the results based on the remaining selected size
refinements, but will not remove all sizes from
REFINE SEARCH
the breadcrumb. Only Clear removes the size
REFINE SEARCH Mens (View All) refinement completely.
Mens (View All)
Mens (View All) Clothing
Clothing
Clothing
Once a refinement has been made, other Three color refinement values display
˅ COLOR refinements are updated and only available ˅ COLOR disabled, because they are no longer
available based on other refinements,
˅ COLOR
refinement values are selectable. Refinement
values that are not available based on such as size.
the current search result are disabled and
dimmed.
The selected price range displays selected. One price refinement displays
˅ PRICE Only one price range selection is supported.
˅ PRICE selected.
˅
Once the search results is refined by a value,
the refinement displays a Clear link, which
Clear Clear Clear
causes the selection of this refinement to relax.
$XX - $XX.XX $XX - $XX.XX $XX - $XX.XX
All attribute refinements, except category Three size refinement values display All size values are cleared.
˅ SIZE and price, support multi-selections.
˅ SIZE selected.
˅ SIZE
Clear Clear
36 38 39 40
36 38 39 40 36 38 39 40
41 42 43 44
41 42 43 44 41 42 43 44
46 48 50
46 48 50 46 48 50
Size refinement
Header Reference Resource

ISML files productsearchrefinebar.
isml
CSS containers .search_refine,
.navgroup, .refine-
Banner slot ment_attributes
Your search results for “xxx” in Category

˅ SIZE
Clear
These refinement displays are controlled by appending CSS styles to the contain-
2 ing div. If a size does not apply to the search results, it will not display as possible
Product Product 3 3.5 Product
4 4.5 5Product
refinement.
Tile Tile Tile Tile
1. Size refinement selection
5.5 6 6.5 7 7.5
If a size refinement value is selected, only products having this size (online and
in stock) display in the search results. Size refinement displays using swatches.
8 8.5 9 9.5 10 Swatches can have three possible states: selectable, selected and not selectable.
3 2. Selectable sizes
Product Product10.5
4 11 Product
11.5 12 Product
10
12.5 Selectable sizes based on search results (and enabled) display with the size number
Tile Tile Tile Tile in solid text. If a size is not selectable, it does not display. Selectable sizes only include
the sizes of online products that are currently in stock.
˅ SIZE
13 13.5 14 15 16 3. Selecting sizes
3 3.5 4 4.5 5
After a customer selects an available size, the size swatch shows a blue border,
for example, indicating that the size has been selected. The product grid refreshes,
5.5 6 6.5 7 7.5 showing the products that match the size refinement. When the customer hovers their
1 mouse, the size swatch tooltip displays.
8 8.5 9 9.5 10
4. Selected sizes
10.5 11 11.5 12 12.5 Tile Tile Tile Tile
Multiple selected sizes display in bold. When the customer selects multiple sizes, only
10
13 13.5 14 15 16 those products having one of those sizes display in the product grid. For example,
if the customer selects 10, 11, 12.5 and 15, all shoes with sizes 10, 11, 12.5 or 15
display in the product grid when the page is refreshed.
Persistent footer
Color refinement
Header
Reference Resource
ISML files propertysearchrefinebar.
isml
Banner slot CSS containers .search_refine,

.refinement_attributes
Your search results for “xxx” in Category
˅ COLOR
Product Product
Clear Product Product
Tile Tile Tile Tile
These refinement displays are controlled by appending CSS styles to the contain-
˅ COLOR 4 2 ing div. The color refinement functionally behaves in a manner similar to the size
refinement.
Clear 1. Selectable colors

Selectable colors based on the search results display as color swatches, using CSS to
Product 1 Product Product Product render the actual swatches. A specific color swatch will have its own CSS style, which
Tile Tile Tile Tile is referenced dynamically. A default CSS style is used so that colors can be rendered
3 even if they do not have a specific CSS style (for example, new refinement colors in
Green the catalog).
Green
2. Selected colors
Multiple selected colors display with a highlighted box that is controlled by the CSS.
Customers can select multiple colors, which display only for products having one of
Product Product Product Product these colors in the product grid. For example, when the customer selects blue, green,
Tile Tile Tile Tile and black, all products that come in blue, green, or black display in the product grid.
3. Mousing over selectable color
When the customer mouses over selectable colors, the color swatches are enlarged
by the CSS. After the customer selects a color swatch, a box displays around the
color.
4. Not selectable colors
Colors that are not selectable because they are not contained in the search result or
due to other refinements, display as white swatches with a small color drop. This is
handled via CSS.
Persistent footer
Category landing page

The category landing page opens when a customer navigates the categories with
Header either no other result refinements selected or no category specific slot is defined
through a rendering template for this category.
1. Category landing slot
This category-specific slot displays at the top of the Category landing page. The slot
name is cat-landing-slotbanner. The slot rendering template displays a category-
specific banner that is defined as static HTML at the slot in Business Manager. A
default banner displays if there is no banner defined for a category (configured in
Business Manager).
Note: Page templates support as many slots as required.
2. Category search refinements
2
The search refinements are created at the category level within Business Manager
(see Wireframe: Results refinement).
Category navigation 1 Category landing slot: cat-landing-slotbanner
Persistent footer
Category results grid display

The template displaying the grid of products contained in a category must be
defined as the rendering template for each category. If no rendering template is
Header defined, the default product grid template is used. See Wireframe: Product grid
display.
1. Category slot banner
Your search results for “xxx” Refined by Price $100 - $400.99 x and Color A x and Brand Y x This category-specific slot displays at the top of the category product grid. The
slot name is cat-banner. It is defined in the category’s rendering template. The slot
rendering template displays a category-specific banner defined as static HTML at
the slot in Business Manager. If there no banner is defined for the category, a default
1 Banner slot banner displays, if defined. If not the product grid displays.
2. Search refinements
5 4 Search refinements are configured at the category level in Business Manager (see
Best Matches 12 Showing 1 - 12 of 24 Results 1 2 6
3. Sort By drop down
The sort drop down list provides the same functionality as in the search results product
grid (see Wireframe: Search results).
4. Item results
2 Navigation Product Product Product Product
For less than 12 items, “Showing 1-X items” displays. For more than 12 items,
Tile Tile Tile Tile
“Showing 1-12 of X Results” displays, where X represents the total number of products
returned in the result. See Wireframe: Product grid display.
5. Items per page drop down
The items per page drop down list provides the same functionality as in the search
results product grid (see Wireframe: Search results).
Product Product Product Product 6. Paging
Tile Tile Tile Tile
The paging bar provides the same functionality as in the search results product grid
(see Wireframe: Search results).

Tile Tile Tile Tile
Persistent footer
Men’s footwear: nav refinement flow

Customer refines footwear by clicking on category “Boots” and an attribute.
1. Customer clicks to Men’s top level category page. 2. Customer selects Mens sub-category Clothing. 3. Customer selects Mens > Clothing sub-category Jackets & Coats
BREADCRUMB BREADCRUMB BREADCRUMB

Mens Mens > Clothing Mens > Clothing > Jackets & Coats
CATEGORY LANDING SLOT CATEGORY SLOT CATEGORY SLOT

Mens: cat-landing-slotbanner Clothing: cat-banner Clothing: cat-banner
NAV COLUMN NAV COLUMN NAV COLUMN
The top level category of the current Once a customer selects a sub If a selected category has no sub categories,
selected category is highlighted at the category to a top level category, the category is merely highlighted, indicating
SHOP MENs SHOP MENs SHOP MENs
top of the left navigation. the category is highlighted and the that no sub categories exist below the current
search results are refreshed according selection.
u Clothing u Clothing to the current selected category. If
u Clothing
the selected category has any sub
u Accessories >> Suite categories, these categories display
>> Suite
below the selected category.
>> Jackets & Coats >> Jackets & Coats
Additional search refinements
˅ COLOR available for the current selected >> Dress Shirts >> Dress Shirts
category displays below the category
refinement. >> Pants >> Pants
>> Shorts >> Shorts
u Accessories u Accessories
˅ COLOR ˅ COLOR
˅ PRICE
$XX - $XX.XX
$XXX - $XXX.XX
Note: See Wireframe: Search results
refinement pages for full search
refinement behavior.
˅ PRICE ˅ PRICE
$XX - $XX.XX $XX - $XX.XX

$XXX - $XXX.XX
Compare products
Compare bucket
Reference Resource
ISML Files
Header CSS Containers
Search results for “xxx” in Category
Banner slot

2
COMPARE UP TO 6 PRODUCTS:
3
1 Image Image 3 4 5 6 Compare Items Clear All
The compare functionality enables the merchant to display a compare bucket within
the search results, showing the items that are already being compared and how
Search many more items can be added to the bucket. The compare bucket only displays
Navigation after the customer has added an item to the compare bucket list. Customers
can remove a product from the compare grid by clicking the check box again, or
Product Product Product Product mousing over the product in the compare list where an x displays, and clicking the
Tile Tile Tile Tile thumbnail. Product sets and bundles are not comparable.
4 1. Product thumbnail
These are thumbnail images of the products selected to compare.
2. Partial comparison grid
Numbered squares display for each of the potential comparison products, if less
than the compare maximum has been reached, indicating the number of items to be
compared. If there are no products in the compare list, the list does not display. If one
product is added, the list displays with that product and five numbered squares.
3. Compare items buttons
Header The button displays with the label Compare Item(s) when the customer selects at
least one compare checkbox from category product grid. The button is disabled until
Search results for “xxx” in Category at least two products are added. There can be a maximum of six comparison items,
as noted by the numbered squares. When the customer clicks the Compare Items(s)
Banner slot button, the Product comparison page opens as on the Wireframe: Compare products,
showing all the products in a comparison window. If the compare bucket already
has six items and the customer adds another, a message displays confirming that
Best Matches 12 Showing 1 - 12 of 12 Results 1 2 the addition of another item removes the first product added. The Clear All button
removes all items from the compare list.
COMPARE UP TO 6 PRODUCTS: 4. Compare check box
Image Image Image Image Image Image Compare Items Clear All 5 When the customer selects the check box, a product is added to the Comparison Grid,
increasing the item count of the compare button. Deselecting the check box removes
the product from the Comparison Grid. Clicking the word Compare selects the box,
Search adding the product to the compare list. Both master products and variants can be
Navigation compared; based on what product displays when the product is added to the compare
bucket.
Tile Tile Tile Tile 5. Full Comparison Grid
Six products have been added for the customer to compare. If more than six products
are added to the comparison grid, the application removes the first product added to
the compare bucket and adds the most recent item.
Compare products
<< back to results 2 Print
Customers can select up to six products to compare.
Other Compare Items
1. Compare bucket select box
Digital Camera This is the select box used to toggle the different active compare categories. These
PROD PROD PROD PROD PROD PROD
IMG IMG IMG IMG IMG categories are created in Business Manager. If a customer selects one product or
IMG
1 products that all follow the same category path (for example, Catalog > Category >
Subcategory), the select box does not display.
Product name Product name Product name Product name Product name Product name 2. Print button
Price Price Price Price Price Price
Promo Promo Promo Promo Promo When the customer clicks the Print button, the Product Comparison is formatted into a
Promo
3 0.0 0.0 0.0 0.0 0.0 0.0 printable version. The print view is controlled via a CSS print style sheet.
4 3. Product rating
ADD TO CART ADD TO CART ADD TO CART ADD TO CART ADD TO CART ADD TO CART This element shows the customer ratings average for the product. The customer
Add to Wishlist Add to Wishlist Add to Wishlist Add to Wishlist Add to Wishlist Add to Wishlist cannot rate an item on this page.
Add to Gift Registry Add to Gift Registry Add to Gift Registry Add to Gift Registry Add to Gift Registry Add to Gift Registry 4. Color swatch
Remove Remove 5 Remove Remove Remove Remove
This shows the active colors attributes for this product if it is a master. If it is a variant,
it shows the applicable color or colors. These swatches do not enable the customer to
Height: - 2.1 inches 4.5 inches - 2.1 inches change the color of the item displayed, but to view the available colors.
5. Remove Item
Width: - 3.4 inches 2.1 inches - 3.4 inches
6 Clicking Remove Item removes an item from the compare list and replaces the
Depth: - 9 inches 3 inches - 8 inches product with a blank column. This remove functionality does not perform a full page
reload.
Display Size: - 2.5 inches 3 inches - 2.5 inches 6. Comparable attributes
This element shows the attributes of the product that are to be compared. The
category attributes are defined in Business Manager at a category level. If the attribute
<< back to results
7 does not apply for the product, the comparison displays as a “-”.
Other Compare Items 7. Responsive compare slots
Digital Camera Comparing items in a product search grid is responsive to the number of compare
items selected. Only the items being compared are shown, and span the width of the
PROD PROD PROD PROD window. When there are less than six items, each item expands to take up more width.
IMG IMG IMG IMG
8. Quickview
8 Quick View When the customer mouses over the product image, the Quickview mouseover
Product name Product name Product name Product name displays (see Wireframe: Search results: product grid display). When the customer
Price Price Price Price clicks the product image, they are navigated to the Quickview module window (see
Promo Promo Promo Promo Wireframe: Quickview).
0.0 0.0 0.0 0.0
9. Add to Cart
When the customer clicks the Add to Cart button, they are navigated to the Quickview
9 ADD TO CART ADD TO CART ADD TO CART ADD TO CART
module window (see Wireframe: Quickview).
Add to Wishlist Add to Wishlist Add to Wishlist Add to Wishlist
Add to Gift Registry Add to Gift Registry Add to Gift Registry Add to Gift Registry
Remove Remove Remove Remove
-
Height: 2.1 inches 4.5 inches - 2 inches
-
Width: 3.4 inches 2.1 inches - 3 inches
-
Depth: 9 inches 3 inches - 9 inches
-
Display Size: 2.5 inches 3 inches - 2.5 inches
Product details
Product details - standard product
The product details page for a standard product has the same functionality as the
product details page for a variation product, except that with a standard product,
Header only the main attributes display below the pricing.
Category > Sub-category > Product name See also Wireframe: Product details: product single variation and Wireframe:
Product details - tabs.
1 1. Product name
Product name
PROD PROD The product display name is defined in Business Manager and controlled via CSS to
Item# TGXXX 2 IMG IMG assure the length and height fit within the area.
3 2. Item number
<< prev >> next The product display ID (sku) is defined in Business Manager.
$X,XXX.XX $XXX.XX 3. Pricing
PROD
See Wireframe: Product details: pricing and promotions.
IMG SELECT COLOR 4
4. Main attributes
BLUE These are standard attributes designated to display within this area of the page. They
display with the standard metadata. No customization is required.
SELECT SIZE
3 3.5 4 4.5 5
5. Promotion details
This is a tooltip that upon hover opens the promotion details configured in Business
Size Chart Manager.
6. Product thumbnail images
SPECIAL Buy any jacket and get a free tie Details
5
OFFER If a product has more then a single image associated with it, those thumbnails display
below the large image. When the customer clicks a thumbnail, the large image
ALT ALT 6 changes to the thumbnail that was clicked.
IMG IMG AVAILABILITY 7
7. Availability messaging
Select Styles for Availability
If a product is on backorder, availability messaging shows the date if it is known;
QTY 1 ADD TO CART otherwise it will only state “Backorder”. If it is out of stock, it will not display.
8. Social media
This is an integration with various social media applications. When the customer clicks
8 Add to Wishlist Add to Gift Registry
the mail icon, a window opens, showing a selection of mail applications.
Add this product to Wishlist
Ad 9 9. Tooltips
The customer hovers their mouse over the social media icons, and the Add this
You Might Like Description Product Details Attributes Reviews
product to the Wishlist and Add this product to Gift Registry icons, and the respective
tooltip displays.
PROD PROD
IMG IMG >
Product Product
Price Price
Persistent footer
Product details - product single variation

Header
Category > Sub-category > Product name The product details page for a standard product has the same functionality as the
product details page for a variation product, except that a customer cannot change
the color, size, or other variation of the product. The color and size display as for the
Product name 2 standard product with a special rendering. All other visible attributes display here
PROD PROD (see Wireframe: Product detail page makeup).
3 IMG IMG
Item# TGXXX 1. Product images
If a product has more then one image associated with it, those thumbnails display
below the large image. If a customer clicks the thumbnail, the large image changes to
<< prev >> next
1 4 the thumbnail that was clicked.
$XXX.XX
PROD 2. Product name
IMG SELECT COLOR The product display name is defined in Business Manager. Product name display is
controlled via CSS to ensure that the length and height fit within the area.
Purple 5
3. Item number
The product display ID (sku) is defined in Business Manager.
4. Pricing
AVAILABILITY 6
In Stock See Wireframe: Product details: pricing and promotions.
1 ADD TO CART 5. Single variation attributes

QTY
These attributes for size and color are designated as variation attributes, but only have
a single variation. This enables merchants to customization the look.
ALT ALT
1 6. Availability messaging
IMG IMG Add to Wishlist Add to Gift Registry
If a product is on backorder, availability messaging shows the date if it is known;
otherwise it will only state “Backorder”. If it is out of stock, it will not display.
You Might Like Description Product Details Attributes Reviews
PROD PROD
IMG IMG >
Product Product
Price Price
Persistent footer
Product details - variation product

Header
Reference Resource
Category > Sub-category > Product name ISML Files product.isml, variations.isml,
pricing.isml
CSS Containers .product_details
Product name
Item# TGXXX PROD PROD
IMG IMG
1
$XXX.XX | $XXX.XX << prev >> next
PROD
IMG SPECIAL 20% off on pants category Details
2
OFFER
SELECT COLOR A product is either a master product or a variant (as configured in Business Manag-
er). If the product is a master, no variation attributes are pre-selected. If the product
3 is a variant, the variation attribute values for that variant are pre-selected. No other
Purple
information to pre-select variation attributes can be passed (for example, color). If
SELECT SIZE the product is a master, then the image defined as the master image displays. See
Wireframe: Product details - product imagery.
S M L XL S 4 (SIZE CHART) 5
1. Quantity based pricing
ALT ALT This displays the pricing options for different quantities. It is identified in Business
IMG IMG AVAILABILITY Manager at the pricebook level (see Wireframe: Product details: pricing and
6
In Stock promotions).
2. Promotions
QTY 1 ADD TO CART This shows any promotion that is applicable to the product. The message that displays
here is the Promotional Call Out message. If multiple promotions are available, the
standard Business Manager ranking is applied. The promotion is reflected in the
discount pricing (see Wireframe: Product details: pricing and promotions).
Add to Wishlist Add to Gift Registry
3. Color selection
This is populated with available colors, with the selected color indicated.
You Might Like Description Product Details Reviews 4. Size selection
This is populated with the available sizes. For products with a large number of sizes,
the size boxes wraps to the next line.
PROD PROD 5. Size chart

IMG IMG > This links to a window that shows a size chart. The size chart is stored as a content
asset. The content asset ID is retrieved from a product’s primary category attribute,
sizeChart. If it is not defined, a fallback to the parent category occurs.
6. Availability messaging
Product Product
Price Price If a product is on backorder, the date displays, if known; otherwise it only states
Backorder. As a default, no messaging displays until the customer selects a color/
size combination that is online and in stock. This messaging only displays once a valid
Persistent footer variation is configured.
Product details - variation product with options
Header All option and variation selections update the product information without a full page
refresh.
1. Default variation display
Category > Sub-category > Product name
If no custom display is defined for a variation attribute, the variation displays as a
Product name standard select box. When a customer selects a variation, the server is updated and
Item# TGXXX PROD PROD the product displays without a full page refresh. If nothing is selected, the default text
IMG IMG is:
“Select <Attribute Name>“.
$XXX.XX << prev >> next 2. Product option display

Options display as a standard select box. Selecting an option here updates the price
PROD without a full page refresh. When the page opens, the default option is preselected on
IMG SELECT COLOR page open.
Purple 1
LENGTH:
[$10.00] 10 inch sterling silver chain 2
AVAILABILITY
In Stock
ALT ALT
IMG IMG QTY 1 ADD TO CART
You Might Like Description Product Details Reviews
PROD PROD
IMG IMG >
Product
Price
Product
Price
Persistent footer
Product details - product set

Header
Individual product names are clickable and will navigate the customer to that
Category > Sub-category > Product name product’s detail page.
1. Product set image
Product set name A larger image of the entire product set displays to the left of the individual items within
the product set.
Item# TGXXX
2. Product thumbnail
This shows a thumbnail of the product along with the product name and appropriate
Product A variations for the product.
PROD Item Number
IMG 3. Product variations
PROD 2
IMG $XX.XX This shows available variations for the product, such as multiple sizes and colors.
From this page, the customer can select the desired product variations before adding
SELECT COLOR the entire product set to the cart. When he or she mouses over the swatches, the
product image changes to the corresponding color, the color text changes to the
selected color, and the color displays in the tool-tip. When entering the page, the
Purple 3
master for all products displays.
1
SELECT SIZE 4. Add to cart
S M L XL S An Add to Cart button along with a price provide the customer with the option to buy
each piece separately based on the variations selected.
3
Size Chart 5. Set individual product pricing
AVAILABILITY Standard pricing and promotional pricing display (see Wireframe: Product details:
ALT ALT
IMG IMG pricing and promotions).
In Stock
6. Add All to Cart
QTY 1 Add to Cart 4 The Add All to Cart button and an overall price for the product set display so the
customer can purchase the entire outfit based on the variations selected. This button
is only enabled if all products have valid variations selected. Otherwise, a hint asking
the customer to select the valid variation for the products displays. The ability to add
Product B the entire outfit to the cart and the price are not enabled/displayed until the customer
Item Number configures all variations.
PROD
IMG $xx.xx | $xx.xx 5
SELECT COLOR
Purple
AVAILABILITY
In Stock
QTY 1 Add to Cart
BUY ALL FOR $XXX.XX
ADD ALL TO CART 6
Product details - product bundle

Header
A product bundle follows the same layout and behavior as a product set, except for
the price and Add To Cart functionality. The customer can also add a bundle to a
Category > Sub-category > Product name wishlist or registry. Product names are clickable and will navigate the customer to
that product’s detail page. Products not in the current catalog are not clickable.
Product bundle name 1. Price

Item# TGXXX This is the price for the entire bundle. It uses standard pricing and promotional display
1 (see Wireframe: Product Details: Pricing and Promotions).
2. Add to Cart
Product A
Item Number Add to cart is enabled for all variations selected for the bundle, enabling customers to
PROD add the product to the cart.
PROD IMG $xx.xx
IMG Quantity: 1
GAMING SYSTEM: Model
OPTION: Choice 1
Bundled Product A
Item Number
PROD 3
IMG $xx.xx
Quantity: 1
ALT ALT
IMG IMG
Bundled Product B
Item Number
PROD
IMG $xx.xx
Quantity: 1
BUY ALL FOR $xxx.xx 1
ADD TO CART 2
Persistent footer
Product details - page markup

Header
The product detail page includes the following components:
Category > Sub-category > Product name • Product main Image
• Product alternate images
• Product name
Product name • Item number
PROD PROD • Visible attributes (attributes assigned to MainAttributes)
Item# TGXXX IMG IMG • Similar product images (Previous and Next)
• Pricing
TV Type: DLP << prev >> next • Promotional callout message (defined in Business Manager)
SIZE: 61 inches • Color swatches (colors the product comes in, regardless of availability)
RESOLUTION: 1920 x 1080 • Size (sizes the product is available in, regardless of availability)
PROD • Other variants for products, for example, Show width.
IMG $X,XXX.XX $XXX.XX • Product availability
• Quantity
SPECIAL 10% off on televisions Details • Add to Cart button
OFFER • Social media icons
• Add to Wishlist
• Add to Gift Registry
• Recommended items (cross-sells defined in Business Manager)
• Product tabs
EXTENDED WARRANTY: [$0.00] None
These attributes are assigned to the MainAttributes attribute group. All other attri-
bute groups display on the product details tab.
ALT ALT
AVAILABILITY
IMG IMG
In Stock
Reference Resource
1 ADD TO CART
QTY ISML files product.isml
CSS containers .product
.productimage
.price
PROD PROD
IMG IMG >
Product Product
Price Price
Persistent footer
Product details - product imagery
Reference Resource
Header ISML files image_large.isml,
image_medium.isml,
image_thumbnail.isml
Category > Sub-category > Product name CSS containers .productimage, .product-
thumbnail
Product name
PROD PROD
IMG IMG 1
Item# TGXXX
TV Type: DLP << prev >> next

SIZE: 61 inches
RESOLUTION: 1920 x 1080 1. Previous and Next product
PROD
IMG 2 $X XXX XX $XXX.XX
$X,XXX.XX A thumbnail image can be stored within Business Manager as a thumbnail image.
This image represents the previous product in the category or search result or the
next product in the category or search result. If the product is the first product in the
SPECIAL 10% off on televisions Details
list, only Next displays. If the product is the second product in the list, only Previous
OFFER
displays. Clicking Previous or Next returns the customer to the previous or next
product in the result. If there is no next or previous product to navigate to, the area to
display the next or previous product displays blank.
4
2. Product main image
EXTENDED WARRANTY: [$0.00] None
The Main image stored within Business Manager as a standard image.
3. Alternate image
ALT ALT An alternate image can be stored within Business Manager as a custom attribute for
4
AVAILABILITY
IMG IMG 3 an alternate image. When the customer clicks the alternate image, the alternate image
In Stock replaces the product main image.
4. Image display for multiple variations
1 ADD TO CART
QTY When you specify images in Business Manager using a combination of two or
more variation attributes, the product details page changes the large image and the
alternate views based on the combinations of related image variation attributes. If
Add to Wishlist Add to Gift Registry a combination is not found, the Demandware platform falls back to the first image
variation attribute. For example, if the image variation attributes are color and fabric,
and the currently selected product variations are white and leather, the application
displays the image assigned to white and leather if found; and if not found, displays
the image assigned to white.
PROD PROD
IMG IMG >
Product Product
Price Price
Persistent footer
Product details - recommendation scroll carousel
Reference Resource
ISML files recommendations.isml
Add to Wishlist Add to Gift Registry CSS containers .recommendations_cross-

sell, .recommendations_
minidetail
PROD PROD
IMG IMG > 1
This is a customer-controllable display based on the same code that controls the
Product Product carousel/scroller on the homepage. How many products display and how they
Price Price display is customizable.
Three products display at once by default; but the display can hold as many product
recommendations as configured in Business Manager.
1. Navigation arrow
When the customer clicks the arrow, the product image shifts over one space. All
images represent thumbnail images of the recommended product.
URL and image names are stored as attributes in the recommendation object within
the Business Manager. The recommendation will be a Cross Sell type: Cross-Sell.
When the customer clicks the product thumbnail or product name, they are returned to
the product detail page of the selected product.
2. Tool Tip
y If the customer mouses over the product display, a Tool Tip displays with a more
2 detailed product display for that product, as seen to the left (see Wireframe: Tooltips).
Product name
Price You Might Like Description Product Details Reviews
Description
Product description
PROD PROD
IMG IMG >
Product Product
Price Price
Product name PRODUCT, SET/OPTION/BUNDLE PRODUCT

Product name Item # xxxxxx
$XX.XX
Item# XXXXXXXX 1 $xx.xx
SELECT COLOR Purple
Price PRODUCT SALE/PROMOTION
Tiered pricing $XX.XX | $XX.XX
Product name VARIATION MASTER

$XX.XX to $XX.XX
Item # xxxxxx
2 $xx.xx | $xx.xx
SELECT COLOR Purple
5a [€0.00] 2 Year Warranty
SPECIAL Promotional callout message Details [€0.00] 2 Year Warranty

OFFER
[€20.00] 5 Year Warranty
Product name [€30.00] 7 Year Warranty
Item # xxxxxx
$xx.xx | $xx.xx
[$0.00] 2 Year Warranty
Tiered Pricing
[$0.00] 2 Year Warranty 5b
3
[$10.00] 5 Year Warranty
SELECT COLOR Purple
Bonus product
6
Product name You are eligible for a bonus product

Item # xxxxxx
$xx.xx | $xx.xx Buy a piece of jewelry and get a bracelet for free Details
SPECIAL Promotional callout message Details Select Bonus Product(s) No Thanks

4
OFFER
SELECT COLOR Purple
Product details - pricing and promotions

1. Standard price display promotion price. If this behavior is not supported, then the value displays as “X-X Items currency, then that option does not display in the dropdown. If an entire set of options (or
10% off” with no price. prices for an entire set of options) is not defined for a selected currency, then the entire
If a product has no sales price or promotions, the price displays as shown, with the price
visual display handled within the CSS (for example, red text or strike through). This is the option dropdown does not display for that currency.
4. Promotion message
lowest price book price.
Product promotional messaging displays in this area. The promotions that displays is See the Wireframe: Header | global navigation | footer.
2. Sale/promotion price determined by promotion ranking. This is also where a bonus product(s) promotion (not
choice of bonus products) displays. 6. Bonus product selection window
If a product has a sales price or a promotion price, the original price displays with a line
through it, and the sales or promotion price displays beside it divided by a vertical line. If a customer adds a product to the cart that makes him or her eligible for a Choice
5. Multi-currency pricing
If a product has a list price, sales price, and promotion price, only two prices display: the of Bonus Product discount, a window opens asking if they would like to select bonus
sales price or the promotion price on which the sales or promotion price is based. a. Currency symbol: When multi-currency is enabled and the customer changes the cur- products. If they click Select Bonus Product, the bonus product selection window opens.
rency, the currency symbol and the pricing, as defined in the associated price book, also If they click No Thanks, the window closes. The customer still has the option of selecting
3. Tiered pricing the bonus products for which they are eligible in the cart.
change.
If a product has tiered pricing, prices display here. If a product has a promotion, then
b. Option pricing: Option prices change when the customer selects a different currency. If
tiered pricing displays the same, but the “$XX.XX” tier price is calculated from the an option (or option price) is not defined for one option in a set of options for a selected
Category > Sub-category > Product name
PROD PROD
IMG IMG
Product name << prev >> next
Item# TGXXX
PROD $X,XXX.XX $XXX.XX

IMG
Promotion asset
SELECT COLOR Purple
WIDTH N M W N
SELECT SIZE S M L XL S
ALTERNATE VIEWS Size Chart
AVAILABILITY
ALT ALT
In Stock
IMG IMG
ADD TO CART
1
QTY
Product details - color and size selections

The color, size, and width variations, as shown on the product details page change based on product availability. Visual indications of size and width availability change
Reference Resource
to match the inventory of the selected swatch. The display of unavailable attributes is controlled within the CSS.
ISML files product.isml
See the following page for examples.
variations.isml
group.isml 1. Color
CSS containers .main_attributes Color is highlighted on mouseover and selected on click. Clicking a selected option again does not deselect it. You must click another choice. The display image changes to match
.variation_attributes
the swatch. Color or color swatches are controlled via CSS with background color or images; as are the different button states.
.swatches
.product_options 2. Size or width
Size or width options are highlighted on mouseover and selected on click. Sizes and widths that are not available in a color display dimmed. When the customer hovers over an
out-of-stock variant (unavailable size or width), a tooltip displays with status; for example, “SIZE L is not available for this combination”.
Color: Tan Color: Chocolate Brown
SELECT COLOR Chocolate Brown On mouse over, the color

option is highlighted.
Chocolate Brown Chocolate Brown
Width: Normal Width: Normal Size Chart
Size Chart
N W N M W
M
SELECT COLOR Chocolate Brown Clicking selects a color op- Size: 9.5 Size: Non-selected
tion. Clicking a selected op-
4.5 4 4.5 5 5.5 6 6.5 7 7.5
tion again does not deselect 4 5 5.5 6 6.5 7 7.5 Size is dimmed if the size is unavailable
it. You must click another for the color. A tooltip displays with the These sizes are not avail-
9.5 10.5 11.5 12 10.5 11.5 12
choice. 8 8.5 9 11 status. 8 8.5 9 9.5 11 able with this color and width
Availability information displays in 13.5 combination. Size availability
12.5 13 13.5 14 15 16 SIZE 12 is not available for this combination 12.5 13 14
15 16
the availability line: see Inventory. changes to match the inventory
of the selected color and width.
Color is selected on click. The display

image changes to match the swatch.
Color: Chocolate Brown
These color or color swatches are
controlled via CSS with background
color or images; as are the different
On mouse over, the size or width option is highlighted. button states.
8.5 9 Width: Non-selected
8 Size Chart
W
9 N M
Size: Non-selected
9
Clicking selects size and width option.
8 8.5
4 4.5 5 5.5 6 6.5 7 7.5
10.5 11.5 12
8 8.5 9 9.5 11
12.5 13.5 14 15 16
13
These widths and sizes are not available in this color, and display
dimmed. Size and width availability changes to match the inventory of
the selected swatch.
Color: Non-selected
Chocolate Brown
Ch
Width: Medium Size Chart
M W
N
Size: 7.5
4 4.5 5 5.5 6 6.5 7 7.5
10.5 11.5 12 This color is not available with this size and width combina-
8 8.5 9 9.5 11 tion. Color availability changes to match the inventory of the
12.5 13.5 14 15 16
selected size and width. The display of unavailable attributes is
13 controlled within the CSS.
Product name PROD PROD

IMG IMG
Item# TGXXX
<< prev >> next
$X,XXX.XX $XXX.XX
Promotion asset
SELECT COLOR
Purple
WIDTH
N M W N
SELECT SIZE Size Chart

S M L XL S
AVAILABILITY
In Stock
1 ADD TO CART 1
QTY
Add to Cart
2 3
Product details - add to cart

1. Add to Cart If an authenticated customer clicks Add to Wishlist, the product is added to their
Reference Resource wishlist. A non-authenticated customer is navigated to the Wireframe: User profile -
For each master product, default variants such as size and color are automatically
ISML files product.isml personal data - new user. This is only enabled for a valid selected variation product.
selected. The customer can click Add to Cart and order one or more products based
CSS containers .addtocartbar on the selections, or change the selections and then click Add to Cart. You can set
.addtocart
the defaults in Business Manager for each master product. If there is no default set,
the Demandware platform uses the first variant in the master product record as the
default. This is typically set via a feed from the client/customer’s back end system.
After the customer clicks Add to Cart, the variation product is added to the cart and
the mini-cart opens.
2. Social media
When the customer clicks and of the social media icons, they are navigated to that
application.
3. Add to Wishlist
Product details - tabs
You Might Like Description Product Details Reviews Reference Resource

1
ISML files product.isml
CSS containers .product_tabs
PROD PROD
IMG IMG >
Product Product
Price Price
You Might Like Description Product Details Reviews These dynamic tabs, defined within the ISML template, display a variety of product
2
data across the entire page width. Developers can add custom tabs or modify the
following standard tabs.
This product is amazing. Try it and you will see.

1. Tab title - You Might Like
When the customer clicks this tab, a carousel displays. See Wireframes: Product
details - recommendation scroll carousel.
2. Tab title - Description
When the customer clicks this tab, the product short description displays, as defined
for the product within Business Manager.
3. Tab title - Product Details
3 You Might Like Description Product Details Reviews
When the customer clicks this tab, information from all other attribute groups except
MainAttributes display.
4. Tab title - Reviews
10 oz pump bottle, oil free unscented facial moisturizer..
When the customer clicks this tab, a graphic displays as a placeholder. Developers
can integrate their product reviews system here.
4 You Might Like Description Product Details Reviews
Limited inventory - product details
Product name Limited inventory - product details

Item# TGXXX
1. Availability prompt
View Full Details If the on-hand inventory is less than the quantity entered in the text box, the customer
is notified of the limited quantity without refreshing the page.
PROD
$XX.XX $XX.XX The customer can still add the items to the cart by clicking the Add to Cart button.
IMG 2. Add to Cart quantity
SELECT COLOR Black If the quantity is greater than 0 for a product in the quantity input box, the
Demandware platform checks the availability of that quantity. If a customer changes
SELECT SIZE 4 6 8 10 12 4 (SIZE CHART) the quantity, then on the keystroke within the quantity input box, the platform checks
the availability of that quantity. This check occurs per keystroke.
3. Limited availability in cart with backorder option
1 AVAILABILITY
100 Item(s) In Stock In this example, the customer has added the three items to the cart. While in the cart,
ADD TO CART the customer receives the message that “X item(s) are in stock and ready to ship. The
QTY 101 2 remaining items are available on backorder. The expected in-stock date is xx/xx/xx.”
The customer can continue to checkout.
4. Limited availability cart, not available - product message
This message displays to the customer that the requested quantity is not available and
that they must adjust their quantity before checkout.
PRODUCT QTY PRICE TOTAL 5. Limited availability cart, not available - cart message
PRICE
This message displays to the customer above the checkout button indicating that
the checkout button has been disabled because the customer must adjust the above
Product name Remove $xx.xx $xx.xx $xx.xx quantities. Once the quantities have been adjusted, the message disappears and the
PROD Item No: Add to Wishlist Checkout button is enabled.
IMG 701642890744 Add to Gift Registry
Color: Red 30 Item(s) inStock
Size: XL Back Order 5 Item(s)
3
Edit Details The expected in-stock
date is Fri Jul 13 2012
PRODUCT QTY PRICE TOTAL

PRICE
Product name Remove $xx.xx $xx.xx $xx.xx

PROD Item No: Add to Wishlist
Color: Red 30 Item(s) inStock
Size: XL The remaining items
Edit Details 4 are currently not
4
available. Please adjust
the quantity.
Cart Summary
Limited: Your shopping cart can currently not be ordered since one or more of the products in your
5 cart have an invalid price or are not available in the request quantity. If you have any questions,
please contact customer service.
CHECKOUT
Quickview
Quickview - standard/single variation product
Header Functionality on the standard Quickview is standard for all Quickview products
unless stated otherwise (in this set of wireframes). This diagram shows the “module”
layer that is created when a customer clicks the Quickview link after hovering
over a product thumbnail in the product grid. Modules that open from this window
return to this window when closed. Purchase options are made available. A single
Banner Slot promotional message can display with any merchandising or message content (for
example, Special Offer).
1
PRODUCT QUICKVIEW 1. Close button
> Search results for “xxx” in Category
When the customer clicks the Close button, the Quickview panel closes and the
customer is returned to the parent page.
< Previous
Best Matches 12 Showing 1 - 12 of 24 Results 1 2 Next > 2
2. Next and previous buttons
Product name 3
The customer clicks the > (next) and < (previous) buttons to navigate through the
search results using Quickview. This is only for products that are visible in the grid,
Item# TGXXX and not for products on a new page of the search results.
3. Product name - view full details
Tile Tile Tile Details
View Full Tile
The customer clicks the View Full Details link beneath the product ID to view the full
PROD 6 5
IMG
$XX.XX product details. This link closes the Quickview and the customer is navigated to the
4 product details page. The product name display is controlled via CSS to assure the
SELECT COLOR Gold length and height fit within the area.
4. Product attributes and options area
AVAILABILITY
Navigation In Stock If a product has a single color or size attribute, they display the same as they would
for a variation product (see Wireframe: Quickview: Variation product) except that
Tile Tile Tile Tile
this display has no other user interaction. If the product has no options or display
ADD TO CART 7 variations, the availability information is moved up.
QTY 1
5. Pricing and promotions
ALT ALT 9
IMG IMG See Wireframe: Product details: pricing and promotions.
8 Add to Wishlist Add to Gift Registry 6. Product images
Product Product Product Product If a product has more then one image associated with it, those thumbnails display
10 11
Tile Tile Tile Tile beneath the large image. When the customer clicks the thumbnail, the large image
Add this product to Wishlist changes to the thumbnail that was clicked. If the product only has one image, no
thumbnail displays. See Wireframe: Product details - product imagery.
Navigation 7. Add to Cart
This closes the Quickview and returns the customer to the parent page while the Mini
Best Matches 12 Showing 1 - 12 of 24 Results 1 2 Cart drops down in the standard way.
If the customer has scrolled below the fold, they are returned to the top of the page so
they can see their mini-cart open with the item added. This button is disabled until a
valid product is configured.
8. Social Media
When the customer clicks and of the social media icons, he or she is navigated to that
application.
9. Add to Wishlist
This adds the product to a registered customer’s wishlist (see Wireframe: Wishlist). If
Persistent footer 11. Add to Gift Registry the customer is not registered, the module closes and they are navigated to the Create
Account page (see Wireframe: Create an account).
Registered customers can add an item to their gift registry (see Wireframe:
Gift registry). If the customer is not registered, the module closes and 10. Tooltips
they are navigated to the Create Account page (see Wireframe: Create an The customer hovers their mouse over the social media, Add to Wishlist, or Add to Gift
account). If master products are not configured, the link is disabled. Registry icons, and a respective tooltip displays.
Quickview - variation product
Variation products display variations in a visual way that enables customers to inter-
act with the possible variations. This interaction effects the price and availability of
Header product variations. Color variations also control the product image display, changing
it to match the product images returned. These variation displays are styled similarly
to the results refinement, using CSS attributes to control the visualization. By
default, the master product displays to the customer, but customer selections within
the search results refinement are also reflected here, if applicable. See Wireframe:
Banner Slot Product details - product imagery.
1. Promotional call out message

Search results for “xxx” in Category The promotional message is configured using the callout attribute of the promotion
Showing 1 - 12 of 24 Results 1 2 within Business Manager. When the customer clicks the View Full Details link, a
Best Matches 12 module opens describing the promotion.
PRODUCT QUICKVIEW 2. Variation attribute: color
Products with different color variations display similar to results refinements, where
< Previous Next > each product color can display via CSS and with an assigned background-color or
Product Product Product Product background-image, thus providing the customer with an accurate visualization of the
Tile Tile Product Tile
name Tile product color. When the customer clicks an available color, product images change on
the left.
Item# TGXXX 3. Content asset for variation attributes
View Full Details A variation attribute can have an optional content asset associated with it that displays
the asset within a module. For example, a content asset associated with the attribute
Navigation PROD $XX.XX $XX.XX Width is called variation-help-<variation attribute name>.
IMG 4. Add to Cart
Tile Tile SPECIAL category Details
Tile 20% off on pants Tile This closes the Quickview and returns the customer to the parent page while the Mini
1
OFFER Cart drops down in the standard way.
If the customer has scrolled below the fold, they are returned to the top of the page so
Black 2 they can see their mini-cart open with the item added. This button is disabled until a
SELECT COLOR 3 valid product is configured.
4 6 8 10 12 14 4 SIZE CHART
SELECT SIZE
Tile Tile Tile
AVAILABILITY Tile
PROD PROD ADD TO CART 4
1 In Stock
IMG IMG
QTY 1
Persistent Footer
Quickview - product set

Header
This diagram shows the module window created when a customer hovers over a
product set thumbnail in the product grid, then clicks the Quickview link. Products
PRODUCT QUICKVIEW
within the product set are made available. All other Quickview functionality is made
available. Promotions and availability are treated the same as other Quickviews.
< Previous Product set name Banner Slot See Wireframe: Quickview: variation product.
Next >
1. View Full Details
Item# TGXXX
View Full Details After the customer clicks the View Full Details link, they are returned to the product
set details page.
Best Matches 12 name Showing 1 - 12 of 24 Results 1 2 2. Scroll bar

Product
Item# xxxx This enables the customer to scroll through all items of the product set. It is set via
PROD
$xx.xx 2 CSS.
IMG
PROD SELECT COLOR 3. Add to Cart
IMG
Black When the customer clicks the Add to Cart button, the mini-cart opens with the
individual product set items added. If the customer has scrolled below the fold, they
Tile Tile Tile Tile
are returned to the top of the page so the mini-cart is visible with the item added.
SELECT SIZE
Clicking an individual Add to Cart button does not close the Quickview window.
S M L XL S 4. Add All to Cart
Size Chart
When the customer clicks the Add All to Cart button, the mini-cart opens with all
AVAILABILITY
products in the product set and the Quickview window closes.
In stock
PROD PROD Product Product Product Product This button is only enabled when all product variations have been selected.
IMG IMG Tile Tile Tile Tile 5. Product set price
QTY 1 Add To Cart 3
When the product set first opens in Quickview, the price displays a Buy All or One,
once all products in the set have been configured, the product set price displays and
Product name the Add All to Cart button is enabled enabling the customer to add all products in the
Item# xxxx set to the cart.
PROD
$xx.xx | $xx.xx
IMG
SELECT COLOR
Tile Tile Bright Green Tile Tile
SELECT SIZE
6 6.5 7 7.5 7
Best Matches Size12

Chart Showing 1 - 12 of 24 Results 1 2
AVAILABILITY
The item is currently not available
QTY 1
Persistent
Add To Cart
Footer
5 BUY ALL FOR $xxx.xx

ADD ALL TO CART 4
In-store pickup
In-store pickup - product details
This feature must be enabled in Business Manager site preferences. Also, the
master variant product must have the custom attribute availableForInStorePickup
Header configured and the full variant selected on the storefront product details page. See
the product documentation for other implementation requirements.
Category > Sub-category > Product Name 1. Check store availability
The customer clicks the Check store availabability link, and the zip code entry
window opens.
Product name
PROD PROD
Item# TGXXX IMG IMG
<< prev >> next

$X,XXX.XX $XXX.XX
PROD
IMG SELECT COLOR
BLUE
SELECT SIZE
3 3.5 4 4.5 5
Size Chart
Special Offer Get a shirt for $20 Details
ALT ALT
IMG IMG AVAILABLE FOR SHIPPING
In Stock
1
AVAILABLE FOR PICKUP
Check store availability
QTY
1 ADD TO CART
Persistent footer
In-store pickup - Quickview
1. Check store availability

Header The customer clicks the Check store availabability link, and the zip code entry
window opens.
Banner Slot
Best Matches 12 Showing

g 1 - 12 of 24 Results 1 2
PRODUCT QUICKVIEW
Next > < Previous

Tile Product
Tile name Tile Tile
Item# TGXXX
View Full Details

PROD
Navigation
Navig
gation IMG
$XX.XX
Tile SELECT
TileCOLOR Tile Tile
Gold
AVAILABLE FOR SHIPPING

Product In Stock
ALT ALT
Tile Tile Tile Tile1
IMG IMG AVAILABLE FOR PICKUP
QTY
Check store availability
Navigation
1 ADD TO CART
Persistent Footer
In-store pickup - enter zip code/select store
Header 1. Enter zip code

The customer enters a zip code, which is used to search for stores, and then clicks
Find.
Category > Sub-category > Product Name
2. Select Store
The window expands to show up to three store addresses, and the item’s availability at
each store.
Product Name
PROD PROD 3. Stock not available
Item# TGXXX IMG IMG
If there is no stock available at a store, the button to select that store as the customer’s
preferred store is disabled.
WHAT’S AVAILABLE AT A STORE NEAR YOU
<< prev >
>>
> next 4. Preferred store
TV Type: DLP The customer can select a new address or select the preferred store address. When
PROD EnterSIZE: 61 inches
Zip Code 1
Search the customer clicks Select Store, that store is set as the preferred store for the
IMG RESOLUTION: 1920 x 1080 remainder of the session.
5. Change location
$X,XXX.XX
$X ,XXX
,X
XXX.X
.XX
XX $X
$XXX.XX
$XXX
XX.X
.XX
XX
When the customer clicks the Change location link, the What’s Available At A Store
SELECT STORE Near You window redisplays showing the Enter zip code entry field.
2
SPECIAL 20% off on pants category Details
6. Continue
OFFER
1001 Cambridge St 333 Washington St 584 Columbus Ave If a preferred store is already configured for the session, the Continue with preferred
Cambridge MA Boston, MA 02118 Boston, MA 02141 store button displays. If the preferred store is to be configured for the first time, the
02141 EXTENDED WARRANTY: [$0.00] None Continue button displays. When the customer clicks either button, the preferred store
is saved and the product details or Quickview page reopens.
In Stock In Stock Not Available 3
ALT ALT ADD TO CART
QTY 1
IMG IMG
Select Store Preferred Store Select Store

AVAILABLE FOR SHIPPING
In Stock 4
Change Location Continue 6
AVAILABLE FOR PICKUP
Check
Chec
Ch k store
sttore availability
availilabi
avai labilit
bilityy 5

y
Persistent Footer
In-store pickup - cart page
Storefront addresses can only be changed from the cart page.

1. Home delivery/in store pickup
Header Customers can select if they want home delivery or in-store pickup. To select In Store
Pickup, they must first select a store.
2. Select Store
Customers can select a store. If no store has been selected for in-store pickup during the
session, no store address displays. During a session, the first store selected on a product
<< Continue Shopping CHECKOUT
details page or cart page is set as the preferred store.
3. No in-store pickup
PRODUCT DELIVERY QTY PRICE TOTAL
Items that are not configured for in-store pickup only show Home Delivery.
1OPTIONS PRICE
Product A Home Delivery Remove $xx.00 $xx.00 $xx.00

- Promo Callout In Stock 1 Add to Wishlist
PROD
IMG Item No: Add to Gift Registry
701643471799 In Store Pickup In Stock
Color: Red 333 Washington St
Size: 12 Boston, MA 02108
Edit Details In Stock
2 Select Store
Product B 3 Home Delivery Remove $xx.00 $xx.00

3
PROD Item No: In Stock Add to Wishlist
Color: Red In Stock
Size: 12
Edit Details
Product C Home Delivery Remove $xx.00 $xx.00 $xx.00

- Promo Callout In Stock 1 Add to Wishlist
PROD
701643472346 In Store Pickup In Stock
Color: Red 110 Smith St
Size: 12 Providence, RI 02903
Edit Details In Stock
Select Store
Order discount: Get 10% off Orders when spending $150
Update Cart
ENTER COUPON CODE
Order summary
Apply
<< Continue Shopping Checkout

Global Slot: cart-footer
Persistent footer
In-store pickup - shipping addresses
1. Multi-shipping
Header When multi-shipping is enabled, the customer can select from a list of saved
addresses. If Multi-shipping is not enabled, this page will not display.
2. In-store pickup
For items set for in-store pickup, the store name and address displays.
Checkout Step 1: Shipping Addresses > Step 2: Shipping Methods > Step 3: Billing > Step 4: Place Order Help? 888-553-9216
3. Shipments
PRODUCT QUANTITY SHIPPING LOCATION Shipments are grouped by address. One or more items sent to a particular address
are included in a shipment. Each store where items will be picked up is assigned to a
shipment number.
Product A 1 1 (Work) 5 Wall Street Burlington, MA 01803 4. Edit - IN STORE PICKUP
PROD - Promo Callout
IMG Item No: Add/Edit Address When the customer clicks Edit beside SHIPPING ADDRESS for home delivery, they
701643471799 are navigated to the Cart page.
Color: Red Order
Product C Store Address for Pickup
summary
1
PROD Item No: Champaign Electronic Shop
IMG 701643471799 1001 Cambridge St 2
Color: Red Cambridge, MA 02141
Size: 12 United States
Product B Store Address for Pickup

Item No:
1 Downtown TV Shop
PROD
IMG 701643471799 333 Washington St Shipment #1
Color: Red Boston, MA 02108
Size: 12 United States SHIPPING ADDRESS Edit
Danna Henry
5 Wall St
Burlington, MA 01803
United States
Method: Ground
3 Shipment #2
IN STORE PICKUP Edit 4
Champagne Electronics Shop

1001 Cambridge St
Cambridge, MA 02141
United States
Method: Store Pickup
Shipment #3
IN STORE PICKUP Edit
Downtown TV Shop
333 Washington St
CONTINUE > Boston, MA 02108
United States
Persistent footer
WELCOME: DANNA HENRY | (NOT DANNA?) CART (2) ITEM, TOTAL: $XX.XX
In-store pickup - shipping method page
Header
1. Shipping method
On the Shipping Methods page, shipments that will be picked up in stores show the
Checkout Step 1: Shipping Addresses > Step 2: Shipping Methods > Step 3: Billing > Step 4: Place Order Help? 888-553-9216 zero cost shipping method for store pickup. The customer cannot select a different
method for this shipment type.
SHIPMENT #1
2. Message for the store
Select Shipping Method: Ground: $5.99 (Order received within 7-10 business days) The customer can enter a short message for the store, for example, the desired date
and time of pickup
Product Quantity Shipping Details 3. Edit - IN STORE PICKUP
When the customer clicks Edit beside SHIPPING ADDRESS for home delivery, they
Product A 1 Danna Henry are navigated to the Cart page.
PROD Item No: 701643456839 4 State St
Order
4. Cart summary
IMG Color: Taupe Billings, MT 99003 summary
The cart summary in the right column label pickup shipments as such and displays the
address of the store designated for pickup.
Is this a gift? Yes No
SHIPMENT #2
Select Shipping Method: In Store Pickup 1 Shipment #1

Store Pickup
SHIPPING ADDRESS Edit
Product Quantity Shipping Details

Danna Henry
5 Wall St
Product B 1 Champagne Electronics Shop Burlington, MA 01803
PROD - Promo Callout 1001 Cambridge St United States
IMG Item No: 701643471799 Cambridge, MA 02141 Method: Ground
Color: Red United States
Size: 12 Shipment #2

Store Message
2 Champagne Electronics Shop
1001 Cambridge St
Cambridge, MA 02141 4
United States
You have 250 characters left out of 250 Method: Store Pickup
CONTINUE
Persistent footer
In-store pickup - billing page

1. Order summary
SELECT OR ENTER A BILLING ADDRESS • required Order summary - billing
On the Billing page, Shipping Store Pickup is a line item with the value of zero..
Choose an Address: Select

Selectfrom
fromSaved
SavedAddresses
Addresses 2. Shipment address
(Work) 5 Wall Street Burlington, MA 01803 The order summary in the right column labels pickup shipments as such and displays
(Home) 4 Yawkey Way Boston, MA 02215 the address of the store designated for in store pick up.
• First Name Danna
(Celia’s house) 1 Green Street Phoenix, AZ 85001 3. Edit - IN STORE PICKUP
• Last Name Henry When the customer clicks Edit beside SHIPPING ADDRESS for home delivery, he or
she is navigated to the Cart page.
• Address 1 4 State St
Address 2
• Country United States

Subtotal $1,207.99
• State Montana Order Discount - $115.80
Edit Shipping Ground $15.99
• City Billings Shipping Store 1 $ 0.00
Pickup
• Zip Code 59101 Sales Tax $52.91
Order Total: $1,161.09
• Phone 333-333-3333 (Why is this required)
Example: 333-333-3333 Shipment #1
• Email [email protected] SHIPPING ADDRESS Edit
Add to Address Book Danna Henry

Please add me to the Demandware email list. 5 Wall St
Demandware does not share or sell personal info. Burlington, MA 01803
See Privacy Policy United States
Method: Ground
ENTER GIFT CERTIFICATE OR COUPON/DISCOUNT CODES
Shipment #2
You may apply more than one coupon code or gift certificate to your order, but you must apply
them one at a time. If there is a balance remaining on your order, you will be able to add IN STORE PICKUP 2 Edit
another coupon code or gift certificate after you click “Apply”.
To apply a coupon code, enter the code below. Coupon codes may void existing promotions Champagne Electronics Shop
that have already been applied. 1001 Cambridge St
Cambridge, MA 02141
Enter Coupon Code United States
Shipment #3
Apply
If you wish to use a gift certificate to pay for some or all of your order,
please enter your gift certificate number and click “Apply”.
Downtown TV Shop
333 Washington St
Redeem Gift Certificate
Boston, MA 02108
United States
Apply
Check Balance
In-store pickup - place order page

1. Order summary
PRODUCT QTY PRICE ORDER SUMMARY
On the Place Order page, Shipping Store Pickup is a line item with the value of zero.
2. Shipment address
Shipment #1 Subtotal $1,207.99
Order Discount - $115.80 The order summary in the right column labels pickup shipments as such and displays
Product A 1 In Stock $xx.00 Shipping Ground $15.99 the address of the store designated for in store pick up.
- Promo Callout Shipping Store $ 0.00 1
PROD 3. Edit - IN STORE PICKUP
Item No: Pickup
IMG When the customer clicks Edit beside SHIPPING ADDRESS for home delivery, they
701643471799 Sales Tax $52.91
are navigated to the Cart page.
Color: Red
Size: 12
Shipment #1

Product B 1 In Stock $xx.00
Item No:
PROD Danna Henry
701643471799
IMG 5 Wall St
Color: Green
Size: 12
United States
Method: Ground
Shipment #2 Shipment #2
Product C 1 In Stock $xx.00 IN STORE PICKUP Edit 2

Item No:
PROD
701643471799 Champagne Electronics Shop
IMG
Color: Blue 1001 Cambridge St
Size: 12 Cambridge, MA 02141
United States
Product D 1 In Stock $xx.00 Shipment #3

Item No:
PROD IN STORE PICKUP Edit 3
701643471799
IMG
Color: Red
Size: 12 Downtown TV Shop
333 Washington St
Boston, MA 02108
Shipment #3 United States
Product E 1 In Stock $xx.00

Item No: BILLING ADDRESS Edit
PROD
701643471799
IMG Danna Henry
Color: Red
Size: 12 4 State St
Billings, MT 99003
United States
PAYMENT METHOD Edit

Order
Danna Henry
summary Visa
************1111
Exp.01.2016
<< Edit Cart SUBMIT ORDER Amount: $1,161.09
WELCOME: DANNA HENRY | (NOT DANNA?) CART (0)

In-store pickup - order receipt
Header
1. Order summary
Thank you for your order. On the order receipt page, Shipping Store Pickup is a line item with the value of zero.
If you have questions about your order, we’re happy to take your call (888-555-1212) Monday - Friday, 8AM - 8PM Print Receipt
2. Shipping address
Order Summary The order summary in the right column labels pickup shipments as such and displays
the address of the store designated for in-store pick up.
ORDER
ORDER INFORMATION
INFORMATION BILLING
BILLING ADDRESS
ADDRESS PAYMENT
PAYMENT METHOD
METHOD PAYMENT
PAYMENT TOTAL
TOTAL
Order Placed Jun 13, 2012 Danna Henry Danna Henry

Order Number 00000182 4 State St Visa Subtotal $xxx.00
Billings, MT 99003 ***********1111
United States Exp.01.2016 Order Discount - $xx.00
Phone: 333-333-3333 Amount: $xxx.xx
Shipping Ground $xx.00
Shipping Store Pickup $0.00 1
Sales Tax $xx.00
Order Total: $xxx.xx
Shipment # 1
ITEM QUANTITY PRICE SHIPPING TO
Black And White V-Neck Floral Dress 1 $xxx.00 Danna Henry

Item No: 701643843428 4 State St
Color: Ivory & Black Billings, MT 99003
V-Neck Dress 1 $xxx.00 Method: Express

Item No: 701644130732 Shipping Status: Not Shipped
Color: Black
Size: 14
Shipment # 2
ITEM QUANTITY PRICE IN STORE PICKUP 2
Gold and Pearl bracelet 1 $xx.00 Jewelry Exchange

Item No: 70164376688 239 State St
Billings, MT 99003
United States

Shipping Status: Not Shipped
Return to Shopping
Persistent footer
In-store pickup - order history page
1. Shipped To
Header If a shipment is designated for store pick up, the Shipped to: header is replaced with In
Store Pickup followed by the name of the store designated for in-store pickup.
My Account > Payment Settings
Order History
Showing 1 - 5 of 7 Results 1 2
Date Ordered: 6/18/12

Order Status: Being Processed Order Details
Account
Order Number: 00000190
navigation
Shipped to: Items: Order Total:
Dana Henry Product A $120.00
Phoenix, AZ Product B
1 In Store Pickup Items:

Champaign Electric Shop Item A
Item B


Help Danna Henry Product C $xxx.00
Phoenix, AZ Product D
1 In Store Pickup Items: Order Total:

Downtown TV Shop Product E $xxx.00
Product F
Product G
Persistent footer
In-store pickup - order summary page
1. Order summary
Header
On the order details page, Shipping Store Pickup is a line item with the value of zero.
2. Shipped to
My Account > Order History > 00000188 If a shipment is designated for store pick up, the Shipped to: header is replaced with In
Store Pickup followed by the name of the store designated for in-store pickup
Order Summary
ORDER INFORMATION BILLING ADDRESS PAYMENT METHOD PAYMENT TOTAL

Order Number 00000182 4 State St Visa Subtotal $246.00
Billings, MT 99003 ***********1111
Account United States Exp.01.2016 Ground Shipping $9.99
Phone: 333-333-3333 Amount: $262.91
Navigation Shipping Store Pickup $0.00 1
Sales Tax $12.52
Order Total: $268.51
Shipment # 1
Black And White V-Neck Floral Dress 1 $128.00 Danna Henry

Content
Shipment # 2
ITEM QUANTITY PRICE IN STORE PICKUP 2
V-Neck Dress 1 $128.00 Champaign Dress Shop

Item No: 701644130732 1002 Cambridge St
Color: Black Cambridge, MA 02141

<< Return to Order History Return to Shopping
Persistent footer
In-store pickup - single-shipping page
Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216
1. Order summary
On the Shipping page, Shipping Store Pickup is a line item with the value of zero.
SELECT OR ENTER A SHIPPING ADDRESS • required
Subtotal $1,207.99 2. Select shipping method
Shipping Ground $15.99
The shipping method for in-store pickup is suppressed for the home delivery shipment,
Shipping Store $ 0.00
• First Name 1 and that shipping method is assigned to the shipment meant for in-store pick up.
Pickup
• Last Name Sales Tax $52.91 3. Shipping method
Order Total: $1,161.09 The store addresses has already been assigned for in-store pick up.
• Address 1 ( APO/FPO )
4. Store message
Shipment #1
Address 2 The customer can enter a short message for the store, for example, the desired date
SHIPPING ADDRESS Edit and time of the pickup.
• Country Select...
Danna Henry
• State Select... 5 Wall St
• City United States
Method: Ground
• Zip Code
Shipment #2
• Phone (Why is this required)

Example: 333-333-3333
Champagne Dress Shop

1001 Cambridge St
Add to Address Book
Cambridge, MA 02141
United States
Use this address for Billing
Is this a gift?: Yes No
SELECT SHIPPING METHOD • required

Ground: $7.99 ( Details ) 2
(Order received within 7-10 business days)
2-Day Express: $11.99 ( Details )

(Order received in 2 business days)
Overnight: $19.99 ( Details )

(Order received the next business day)
IN STORE SHIPMENT MESSAGE
Shipping Method: Store Pickup $0.00 (Store Pickup) 3
Champaign Dress Shop Store Message

1002 Cambridge St 4
Cambridge, MA 02141
United States
You have 250 characters left out of 250

CONTINUE
In-store pickup - single-shipping with only in-store pickup
1. Shipment
The address form does not display if there is no shipment that is designated for home
WELCOME: LOGIN | REGISTER CART (2) ITEM, TOTAL: $XX.XX delivery.
Header
Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 1
IN STORE SHIPMENT MESSAGE ORDER SUMMARY
Shipping Method: Store Pickup $0.00 (Store Pickup)

Subtotal $1,207.99
Champaign Dress Shop Store Message Shipping Ground $15.99
1002 Cambridge St Shipping Store $ 0.00
Cambridge, MA 02141 Pickup
United States Sales Tax $52.91
Shipment #2
Champagne Dress Shop

1001 Cambridge St
Cambridge, MA 02141
CONTINUE United States
Persistent footer
Mini-cart
CART (3) ITEMS, TOTAL: $xx.00 Mini-cart

1
HeaderYOUR CART
Reference Resource
e
Category > Sub-category > Product Name Product Name
ISML files minicart.isml
Color: Red minicartcontent.isml
PROD
Size: 9
IMG CSS containers .minicart, .minicarttotal,
3 Width: M
Product Name << prev
Qty: 1 $xx.00 >> next .minicartcontent
Product ID 2
Order Subtotal $xx.00
$XXX.XX 1
PROD
IMG Free Ground Shipping for
Orders over $150
SELECT COLOR Purple
VIEW CART The mini-cart automatically opens (and updates its value) when a customer adds a
LENGTH: [$10.00] 10 inch sterling silver chain
Header product to their shopping cart. The mini-cart times out and closes after five seconds.
Having a mouse cursor within the mini-cart keeps it from closing.
or Go Straight to Checkout >>
> Category > Sub-category > Product Name 1. Cart
QUANTITY
YOUR CART 3 View Cart When the customer mouses over the cart text in the header, the mini-cart opens. If
1 there are no items in the cart, the mouseover state is disabled. If the customer clicks
$50.00 3 ADD TO CART
Product Name
P the text, they are navigated to the Cart page. If the cart is empty, the text, “Your Cart is
< prev
<< >> next Product Name Empty” displays.
Availability:
y In Stock
Color: Red Note: The number of items that display represent the quantity of items. If there are
PROD
Size: 9 2 items in the cart, one with a quantity of 2, then number of items is 3. A bundle is
IMG
Product ID Width: M technically a single product. A discount is not counted towards the quantity.
Qty: 1 $xx.00
2. Subtotal
$XXX.XX
This is the aggregate subtotal of the items in the cart (item price only, without tax or
4 shipping).
PROD Product2 Name Purple
IMG Color:
SELECTRed COLOR 3. View Cart
Size: 9
When the customer clicks the View Cart button, he or she is navigated to the cart.
Width: M
[$10.00] 10 inchQty: 1 $xxx.00
sterling silver chain 4. Mini-cart product display
LENGTH: The visible mini-cart shows four products. A scroll bar displays in the product area if
Product3Name more then four products display in the cart. The number of products that display in
Color: Red the mini-cart is configurable within the template. A newly added product displays on
1 QUANTITY
Size: 9 top with the product name, quantity, product total, variations, and the product image.
3
Width: M ADD TO CART For additional products, the product image is hidden. The full display only opens if the
Qty: 1 $xx.00 $50.00 customer clicks the arrow or product name. The product display area has a maximum
height set, forcing a scroll bar after four products have been added.
Availability: In Stock
Order Subtotal $xxx.00 5. Mini-cart slot
The global slot is configured within Business Manager as an HTML slot called minicart-
5
banner.
Free Ground Shipping for
Orders over $150
VIEW CART
or Go Straight to Checkout >>
Cart
Cart page
Header
The Cart page layout and all the checkout pages have a right sidebar that provides the
customer with a common location for all transactional items as he or she navigates the
checkout process. If the customer removes all items from the cart, the “Your Cart is
<< Continue Shopping Empty “ message displays, and the mini-cart is disabled within the cart and checkout
CHECKOUT
process.
Purchase $10.00 more on jewelry and get free ground shipping over $150 8a Note: for information on delivery options, See Wireframes: In-store pickup.
1. Edit details
Each line item in the cart has an Edit Details link that launches the product Quickview (see
Wireframe: Quickview), enabling the customer to make last-minute changes to product
OPTIONS PRICE
attributes such as size and color. All editable variations or options display in the cart. If the
product does not have these attributes, only the item number displays.
1
PROD - Promo Callout In Stock Add to Wishlist 2. Quantity
4
IMG Item No: 2 Add to Gift Registry
The customer can remove or increase the total quantity of an item in the cart. Pricing and
701643471799 In Stock
Order summary are updated when the customer clicks the Update Cart button below.
Color: Red
Size: 12 3. Cart footer global slot
1 Edit Details This can be a static HTML promotion such as “20% off all boots”. It can also be an implicit
promotion based on what is in the cart, such as “Free Shipping on orders over $300.”
Product B Home Delivery 1 Remove $xx.00 $xx.00
The global slot name is cart-footer.
Item No: Pre-Order Add to Wishlist
PROD
701643471799 The expected Add to Gift Registry 4. Update Cart button
IMG
Color: Red in-stock date is Fri Pre-Order
Updates quantity and order summary changes made by the customer.
Size: 12 Sep 30 2011. The expected in-stock date
Edit Details is Fri Sep 30 2011. 5. Order Summary
See Wireframe: Order summary - costs and discounts details.
Gift Certificate 1 Remove $xx.00
6. Checkout
Gift -Gift certificate will be Edit Details
delivered by e-mail If the customer is authenticated/logged in, clicking this button navigates them to the first
Cert 8b
Price: $xx.xx step of the checkout process. If they are unauthenticated or a guest shopper, they are
To: Sue Kelley, navigated to the Checkout Login page (see Wireframes: My Account - login).
[email protected] 7. Cart examples
From: Sandra Dayton
See the respective wireframes for details.
a. Nearest promotion example (alert on approaching)
Coupon 8c Applied
Coupon Number: ACC-KB6B- b. Gift certificate example
OQMB-U7KG-CSSI
c. Applied coupon code example
Order Discount: Get 10% off Orders when spending $150 8d d. Order promotion discount example
4 UPDATE CART
ENTER COUPON CODE
Order Summary 5
Apply
Global slot: cart-footer

3
6
Persistent footer
Cart - with bundle
Header 1. Bundle graphic

A graphic displays for the bundle, which has an SKU, and for each of the products within
the bundle.
2. Product within bundle
<< Continue Shopping CHECKOUT Each product within the bundle displays as a line item.
3. Number of items
The quantity listed for a product within a bundle is view only.
OPTIONS PRICE
1
Product A Home Delivery 1 Remove $xx.00 $xx.00
PROD Item No: In Stock Add to Wishlist
Color: Red In Stock
Size: 6
Edit Details
PROD Home Delivery 1 Included

2 IMG In Stock In Stock
Product B
Item No:
701643471788
PROD Home Delivery3 1 Included

IMG In Stock In Stock
Product B
Item No:
701643471788
Order discount
Global slot: cart-footer Update Cart
ENTER COUPON CODE

Order Summary
*See Chapter “Order Summary”
Apply
Persistent footer
Cart - pricing and promotions
List price - single item Cart - pricing and promotions
Product A Home Delivery Remove 1 $XX.00 2 $XX.00

1 Pricing and promotions display as shown in the example.
PROD Item No: 701643471799 In Stock Add to Wishlist
Color: Red Add to Gift Registry 1. Price column
IMG
Size: 6 In Stock Shows a product line item base price and, if different, the crossed out list price from
Edit Details price book usd-list-prices.
2. Total price column
List price - multiple items Shows the unadjusted and adjusted price (if different) of the entire product line
item and its option product line items, in addition to the IDs of any applying product
Product A Home Delivery Remove $XX.00 2a $XX.00 promotions.
3
PROD Item No: 701643471799 In Stock Add to Wishlist a. In this case, the total price is 3 times the price.
IMG Color: Red Add to Gift Registry
3. List price with sale price
Size: 6 In Stock
Edit Details 4. Multi-currency
Customers cannot change currency once the checkout process has started. See the
List price and sale price - single item Wireframe: Header | global navigation | footer.
Product A Home Delivery Remove 3 $XX.00 $XX.00 $XX.00

1
Size: 6 In Stock
Edit Details
List price and sale price - multiple items
Product A Home Delivery Remove $XX.00 $XX.00 $XX.00

3
Size: 6 In Stock
Edit Details
List price and promo price - single item
Product A Home Delivery Remove $XX.00 List Price $XX.00

1
PROD Item No: 701643471799 In Stock Add to Wishlist Promo Message
IMG Color: Red Add to Gift Registry Item Total $XX.00
Size: 6 In Stock
Edit Details
List price and sale/promo price - single item
Product A Home Delivery Remove $XX.00 $XX.00 List Price $XX.00

Item No: 701643471799 In Stock 3 Add to Wishlist Promo Message
PROD
IMG Color: Red Add to Gift Registry Item Total $XX.00
Size: 6 In Stock
Edit Details
Single promotion - multiple items Cart - pricing and promotions
Product A Home Delivery 3 Remove $XX.00 List Price $XX.00 Pricing and promotions display as shown in the examples.
-Promo Message In Stock Add to Wishlist Promo Message
PROD
Item No: 701643471799 Add to Gift Registry Item Total $XX.00
IMG
Color: Red In Stock
Size: 6
Edit Details
Sale price and single promotion - multiple items
Product A Home Delivery 3 Remove $XX.00 List Price $XX.00

PROD
Item No: 701643471799 Add to Gift Registry Item Total $XX.00
IMG
Color: Red In Stock
Size: 6
Edit Details
List price and multiple promotions - single item
Product A Home Delivery 1 Remove $XX.00 List Price $XX.00

PROD -Promo Message 2 Add to Gift Registry Promo Message 2
IMG Item No: 701643471799 In Stock Item Total $XX.00
Color: Red
Size: 6
Edit Details
Sale price and multiple promotions - single item

Product A Home Delivery 1 Remove $XX.00 $XX.00 List Price $XX.00
Color: Red
Size: 6
Edit Details
Sale price and multiple promotions - multiple items

Color: Red
Size: 6
Edit Details
Single promotion - limited application Cart - pricing and promotions
Product A Home Delivery Remove $XX.00 $XX.00 List Price $XX.00 Pricing and promotions display as shown in the example.
3
-Promo Message In Stock Add to Wishlist 2 X Promo Message
PROD Item No: 701643471799 Add to Gift Registry Item Total $XX.00
IMG Color: Red In Stock
Size: 6
Edit Details
Multiple promotions - limited application

-Promo Message In Stock Add to Wishlist P2 X Promo Message
Color: Red
Size: 6
Edit Details
Multiple promotions - no maximum application

Color: Red
Size: 6
Edit Details
Surcharge and option pricing
Product A Home Delivery 1 Remove $XX.00 $XX.00

PROD Item No: 701643471799 In Stock Add to Wishlist Option + #XX.00
Extended Warranty: 5 year Warranty In Stock
Edit Details
Cart - coupons
The customer can enter coupons on the cart or billing page. This wireframe
describes valid coupons entered on the cart page.
Header See wireframe: Checkout - step 2 Billing/pay method page.

See wireframe: Error - coupons (when the customer enters an invalid coupon)
1. Total Price column

a. The coupon name (Special24)
PRODUCT DELIVERY QTY PRICE TOTAL b. Applied

OPTIONS PRICE 2. The following displays beside the Remove button:
Product B Home Delivery Remove $xx.00 $xx.00 Coupon

1
PROD Item No: In Stock Add to Wishlist $xx.00 1a Special24 Coupon Number
IMG 701643471799 Add to Gift Registry Item Total $xx.xx SPECIAL24
Color: Red In Stock Special24 (-$6.00)
Size: 12
Edit Details
Product A Home Delivery 1 Remove $xx.00 $xx.00 $xx.00

PROD - Promo Callout In Stock Add to Wishlist
701643471799 In Stock
Color: Red
Size: 12
Edit Details
2 Coupon 1b Applied
Coupon Number: Remove
SPECIAL24 (-$x.xx)
Update Cart
ENTER COUPON CODE
Order summary
Apply

Persistent footer
Cart - bonus products
Qualifying product and associated bonus product 1. Bonus products

Bonus products display as individual product line items in the cart after all the product
Product A Home Delivery Remove $XX.00 $XX.00 List Price $XX.00 line items, in the order of their qualifying product line items. Bonus product quantities
1
PROD -Promo Message In Stock Add to Wishlist Promo Message cannot be changed.
IMG Item No: 701643471799 Add to Gift Registry Promo Message 2 1a
a. Qualifying products displays first.
Color: Red In Stock Item Total $XX.00
Size: 6 b. Bonus products display after all the qualifying products, each bonus product with the
Edit Details quantity of 1 and the unit price. Total price displays as Bonus.
c. The customer can click a product name link to view the bonus product’s product details
Product C Home Delivery Remove $XX.00 $XX.00 List Price $XX.00
page. If the customer changes the bonus product’s quantity on this page, the product
1 displays as an additional line item in the cart. If the bonus product is configured as
PROD -Promo Message In Stock Add to Wishlist Promo Message
Item No: 701643473249 Add to Gift Registry Promo Message 2
unsearchable, the product name displays as regular text, and not as a link.
IMG
Color: Green In Stock Item Total $XX.00 2. Multiple bonus products
Size: 6
Multiple bonus product line items that share the same qualifying product line item can
Edit Details
be consolidated into a bonus product line item. This is only for product promotions
with number of qualifying products that grant a bonus product discount. You must also
Product B Home Delivery 1 Add to Wishlist $0.00 Bonus configure the Business Manager Bonus Product Positioning promotion site preference.
PROD -Get a free Product B In Stock Add to Gift Registry a. Qualifying products display in the order in when they were added to the cart.
with the purchase 1b
IMG b. Bonus products display after their qualifying products, incrementing the quantity as the
of Product A
qualifying product is incremented, up to the maximum allocation.
Item No: 701643471749
Color: Red
1 Bonus
Size: 6
Edit Details
Product D 1c Home Delivery 1 Add to Wishlist $0.00 Bonus

PROD -Get a free Product C In Stock Add to Gift Registry
IMG with the purchase
of Product D
Item No: 701643432349
Color: Red
Bonus
Size: 6
Edit Details
Qualifying products and associated bonus products
Product C Home Delivery Remove $XX.00 $XX.00 List Price $XX.00

-Promo Message In Stock 3 Add to Wishlist Promo Message
PROD
Item No: 701643473249 Add to Gift Registry Promo Message 2 2a
IMG
Color: Green In Stock Item Total $XX.00
Size: 6
Edit Details
Product D Home Delivery 3 Add to Wishlist $0.00 Bonus

2 PROD -Get a free Product C In Stock Add to Gift Registry 2b
IMG with the purchase
of Product D
Item No: 701643432349
Color: Red
Bonus
Size: 6
Edit Details
Cart - promotions: choice of bonus products

Header
If a customer is eligible for a choice of bonus product promotion, they can select
and configure those products in the cart.
Cart
1. Order promotion
Global slot: cart-banner
An order based on a choice of bonus product promotion displays a message above
CHECKOUT the cart, enabling the customer to open the choice of bonus product configuration
<< Continue Shopping
Quickview window.
2. Order and/or product promotion
1 Order Promotion - Choice of Bonus Products Details
Select Bonus Product An order and/or a product based choice of bonus product promotion displays a
message below the products in the cart, enabling the customer to open the choice of
bonus product configuration Quickview window.
OPTIONS PRICE 3. Choice of bonus products Quickview
A Quickview window opens, enabling a customer to configure their bonus products.
1 A single variation product displays the same as for the product Quickview. Multiple
- Promo Callout In Stock Add to Wishlist
products display tiles the same as for product set or bundled products.
PROD Item No: Add to Gift Registry
IMG 701643471799 In Stock 4. Rule-based choice of bonus products
Color: Red The More button displays for a rule-based choice of bonus product discount. When
Size: 12 the customer clicks More, another ten bonus products display in a manner similar to
Edit Details infinite scrolling.
Product C Home Delivery Remove Order $xx.00 $xx.00

Promotion - Choice of Bonus Products Details
1
Item No: In Stock Add to Wishlist
PROD
701643471799 Add to Gift Registry
IMG Product Name
Color: Red Pre-Order
Size: 12 The expected in-stockck datePROD
oc Item # 000Product ID1
Edit Details is Fri Sep 30 2011. IMG
SELECT COLOR Black
Product B Home Delivery Remove $xx 00
$xx.00 $xx.00 $xx.00
SELECT SIZE 4 6 8 10 12 14 4
Item No: In Stock 1 Add to Wishlist
PROD
IMG QTY:
Color: Red In Stock
Size: 12 1 Select
Edit Details 3 LOGGED IN USER
2 Order and/or Product Promotion - Choice of Bonus Product Details Select Bonus Product
Product Name
PROD Item # 000Product ID2
IMG
Global Slot: cart-footer SELECT COLOR Green
Update Cart
SELECT SIZE 4 6 8 10 12 14 4
ENTER COUPON CODE
QTY:
Order Summary
Apply *See Chapter “Order Summary” Select
1
CHECKOUT
Select 0 Bonus Product(s)
Product description Qty: 1
Color: Black
ADD TO CART
Size: 4
4
MORE
Cart - alert on approaching discounts

Header
This area displays the additional amount a customer must purchase to receive a
discount, as configured in Business Manager. See the documentation for configuration
details.
You can use this feature for these promotion types:
Global slot: cart-banner • Order promotions With amount of order merchandize total
• Shipping promotions With amount of shipment merchandize total

1. Alert on approaching discount
Order Promotion - Choice of Bonus Products Details
For a logged-in user and a guest, this displays in the area beneath the Checkout - product
Select Bonus Product
list section.

OPTIONS PRICE
Product A Home Delivery 1 Remove $xx.00 $xx.00 $xx.00

PROD - Promo Callout In Stock Add to Wishlist
701643471799 In Stock
Color: Red
Size: 12
Edit Details
Product C Home Delivery Remove $xx.00 $xx.00

PROD 1
Size: 12 The expected in-stock date
Edit Details is Fri Sep 30 2011.
Product B Home Delivery Remove $xx.00 $xx.00 $xx.00

PROD 1
Color: Red In Stock
Size: 12
Edit Details
Order and/or Product Promotion - Choice of Bonus Product Details Select Bonus Product
Purchase $x more and receive Free Ground Shipping over $xxx 1
Update Cart
ENTER COUPON CODE
Order summary
Apply

Checkout
Persistent footer
Checkout - returning customer
Checkout login
The checkout pages have a right sidebar that provides the customer with a common
location for order summary and shipping details. If the customer removes all items
Header from the cart, the “Your Cart is Empty “ message displays, and the mini-cart is disabled
within the cart and checkout process.
1. Guest checkout
The customer enters address details as an anonymous user.
GUESTS OR NEW CUSTOMERS 3 2. Create account
RETURNING CUSTOMERS • required
You can checkout without creating an account. You’ll have a New customers can create accounts from the cart. They will be prompted to create an
chance to create an account later. If you are a registered user, please enter your e-mail and account after they click Checkout without having created an account.
password. 3. Returning customers
1 Checkout as a Guest Registered customers can log into the site from the cart page. If the customer does not log
• Email Address
in, they will be prompted to login after they click Checkout.
Creating an account is easy. Just fill in the form below
and enjoy the benefits of having an account.
• Password
2 Create an Account Now
Where are the benefits?

Login Remember Me
Forgot Password?
OR
Login using your account from
Persistent footer
WELCOME: DANNA HENRY | (NOT DANNA?) CART (2) ITEM, TOTAL: $XX.XX Checkout - step 1 shipping/method page - logged in user
1
Header
1. Logout
The cart is cleared if the customer logs out.
Checkout 2 Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 2. Checkout steps
This element indicates where a customer is located in the checkout process, and
allows then to navigate only after they have completed a step. The ability to navigate
SELECT OR ENTER A SHIPPING ADDRESS • required to a previously completed step is always enabled. Customers cannot navigate to the
next step until the current one has been completed and validated. Once a step has
been validated, all navigation steps are enabled.
3 Select an Address: Select from Saved Addresses
3. Shipping address
Order 4 These fields are empty by default, enabling the customer to add a new address.
• First Name The customer can select a saved address from the drop down list, which fills the
summary corresponding form fields with the customer’s saved address. Customers can edit the
• Last Name auto-filled fields, but this does not modify the saved address.
4. Order summary
The right column of the Checkout page includes a persistent review section (see
Address 2 Wireframe: Order summary - costs and discounts).
5. Tooltip
• Country Select... 6
Help text for forms display with a mouseover tooltip. When the customer mouses
over the link, the help-address and apo-fpo content assets display (see Wireframe:
• State Select...
Tooltips).
• City
Shipping 6. Country selection
addresses The selection of the country controls the validation and list of selectable values for
• Zip Code 7
other fields, such as zip code, state/province, and telephone.

ired
red) 7. Zip code
The application verifies the correct zip code format. For example, for a US address,
Example: 333-333-3333 the application requires a minimum of 5 digits and a maximum of 9 digits, while a
Shipping
ping P
Phone Number
Canadian address requires 6 alpha numeric characters.
This phone number is required in the event the 8. Address options
Add to Address Book
shipping partner needs to arrange a delivery
8 time with you. 5
Customers can save the entered address to their address book (unchecked by
Use this address for Billing default). They can select this address to pre-fill as the billing address (unchecked by
default).
Billing Phone Number
Is this a gift?: Yes No 9
9. Gift options
This billing phone must match the telephone
number on your CREDIT CARD account,
If the Gift radio button is set to Yes, the messaging box displays (the default is No).
Otherwise, the box is hidden. The message box is limited to 250 characters, and
otherwise the card will not be authorized.
Ground: $7.99 ( Details ) renders using the available width. The message is sent in the order export to the Order
10
(Order received within 7-10 business days) Management System.
10. Ship method
(Order received in 2 business days) Standard shipping methods display and do not change per locale. This list is
dynamically reloaded as the customer enters data into the form.
(Order received the next business day) When multi-currency is enabled, and the customer selects a different currency,
Purchase $48.80 more and receive: Free Shipping only the defined and enabled shipping methods for that currency display. See the
Wireframe: Header | global navigation | footer.
11. Continue checkout
CONTINUE > 11
Throughout the checkout process, the Continue button is disabled until all the
required data has been entered.
Persistent footer
WELCOME: DANNA HENRY | (NOT DANNA?) CART (2) ITEM, TOTAL: $XX.XX Checkout - step 1 shipping/method page - multiple countries
Header
1. Country
The country drop down list determines the label and options for the state/province,
telephone, and zip code. If the customer selects the United States, the state/province
Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 label shows “State” and the drop down list contains all valid ship-to-states. If the
customer selects Canada, the label shows Province.
SELECT OR ENTER A SHIPPING ADDRESS • required 2. State/province

Valid ship-to-states and provinces display based on the selected country.
3. Shipping methods
Select an Address: Select from Saved Addresses
Valid shipping methods display based on the shipping methods rules. This list is
Order dynamically reloaded as the customer enters data into the form.
• First Name summary
• Last Name
Address 2
• Country 1 Select...
Select...
• State
Select...
Alberta 2
• City British Columbia Select...
Manitoba
Shipping
|||
• Zip Code Alabama addresses

New Brunswick American Samoa
Newfoundland and Labrador Arizona
|||
• Phone North West Territories (Why is this required)
Arkansas
Nova Scotia California
Example:
Nunavut333-333-3333
Colorado
Ontario Connecticut
Prince Edward Island Delaware
AddQuebec
to Address Book
District of Columbia
Saskatchewan Florida
UseYukon
this address for Billing
Georgia
Is this a gift?: Yes No Guam
Hawaii
SELECT SHIPPING METHOD Idaho • required
Illinois
Ground: $7.99 ( Details )
3 (Order received within 7-10 business days)


Purchase $48.80 more and receive: Free Shipping
CONTINUE >
Persistent footer
Shipping promotions
Shipment cost only Shipment cost with a shipping promotion plus product surcharge
Standard cost for the shipment. A discount is applied on the shipment shipping cost, and we have an additional product shipping surcharge.
Ground Shipping: $25.89 $0.00 + $21.89 Surcharge (Details)) (Surcharge) Sony TV: $21.89
(Order received within 7-10 business days) Standard Shipping Cost: $25.89
Ground Shipping: $X.XX (Details)) Available Shipping Promotions: Free Ground Shipping -$25.89
ess Standard
(Order received within 7-10 business days) Shipping Cost: $XX.XX
_______ • 50% off Ground Shipping for orders over $50 Total: $21.89
Total: $XX.XX • 75% Ground Shipping for orders over $75
• FREE Ground Shipping for orders over $150
Shipment cost and fixed product shipping cost Product-level shipping promotion
Cost for the shipment, plus a cost for the Sony TV.
In this example, the product shipping discount leads to a lower merchandise total used for shipment shipping cost calculation, and since
Ground Shipping: $25.89 (Details)) Sony TV: $21.89
shipment shipping cost is tiered, the total cost is reduced. Note that the product itself has no shipping cost, it only has a discount which
essStandard Shipping Cost: $4.00
________
excludes the product from the merchandise total.
Total: $25.89 Standard Shipping Cost: $0.00
Ground Shipping: $0.00 (Details)
s)
iness days)Free Shipping on all Shoes:
(Order received within 7-10 business $0.00
Total: $0.00
No shipment cost, but 2 fixed product shipping costs

No cost for the shipment, plus a cost for the Sony TV and the Canon Camera.
Shipment cost and product-level shipping promotion
Sony TV: $21.89
Ground Shipping: $27.88 (Details)) That’s the same as above, with a slightly different shipping table. In this case, there is no change in total shipping cost, because we don’t
ess days)
(Order received within 7-10 business Canon Rebel: $5.99
Standard Shipping Cost: ________
$0.00 have tiered shipment shipping cost.
Total: $27.88 Ground Shipping: $4.00 (Details)
s) Shipping Standard Cost: $4.00
siness days)Free Shipping on all Shoes: ________
(Order received within 7-10 business $0.00
Total: $4.00
Shipment cost plus product surcharges Shipment cost with a shipping promotion and product-level shipping promotion
Cost for the shipment, plus a (surcharge) cost for each video game. An discount is applied on the shipment shipping cost tier minus the product shipping cost, and product shipping promotion is applied.
Ground Shipping: $2.00 + $2.00 Surcharge (Details)) (Surcharge) Video Game: $1.00 Ground Shipping: $4.00 $2.99 (Details)
lss) Standard Shipping Cost: $4.00
(Order received within 7-10 business days) (Surcharge) Video Game: $1.00 (Order received within 7-10 business days) 50% off Ground Shipping: -$2.00
Standard Shipping Cost: ________
$2.00 Available Shipping Promotions: $0.99 Shipping on all Shoes $0.99
• 50% off Ground Shipping for orders
rdersso
over
ver $50 Total: $2.99
Total: $4.00
$7
$
• 75% Ground Shipping for orders over $75 75
$
Unselected shipment cost with a shipping promotion

A discount is applied on the shipment shipping cost.
Ground Shipping: $4.00 (Details)) Standard Shipping Cost: $4.00
________
(Order received within 7-10 business
ness days) Total: $4.00
Available Shipping Promotions:
• 50% off Ground Shipping for orders
orde
rde
d rs over
over $50
• 75% Ground Shipping for orders over $75
Shipment cost with a shipping promotion

A discount is applied on the shipment shipping cost.
Ground Shipping: $4.00 $0.00 (Details)) Standard Shipping Cost: $4.00
ays)
(Order received within 7-10 business days) Free Ground Shipping: -$4.00
Available Shipping Promotions: Total: $0.00
• 50% off Ground Shipping for orderss over
over $50
$
• 75% Ground Shipping for orders over er $75
ver $75
Shipment cost only Shipping promotions
1 2
Ground: $X.XX
(Order received within 7-10 business days) 3
1. Shipping method name
Shipping method with shipping promotion and excluded products
Displays the name field of the shipping method.
Ground: $X.XX FREE - Shipping Promo Name 5
2. Shipping method pricing
4 6
Displays proper tier for that specific shipping method.
2-Day Express: $X.XX $X.XX - Shipping Promo Name 3. Shipping method description
Display the value of the shipping method description field
4. Shipping promotion price
Shipping method with excluded products and surcharge Displays price value of shipping promotion, if the price is 0 then it would display as
7 FREE.
Order Total: $X.XX 5. Shipping promotion name
Super Saver: $X.XX + $X.XX Surcharge
(Order received within 3-7 business days) Shipping Cost: $XX.XX
Surcharge: PID +$XX.XX 8 Display value name field of the promotion.
Surcharge: PID +$XX.XX 6. Shipping method and excluded products
2-Day Express: $X.XX
(Order received in 2 business days) Total Shipment Cost: $XXX.XX
The shipping method (for example, Next Day Delivery) is hidden when an excluded
product (for example, wide screen TV) is added to the customer’s cart.
Shipping method with shipping promotion and surcharge
7. Shipping surcharge total
Order Total: $X.XX
Ground:$X.XX FREE - Shipping Promo Name + $X.XX Surcharge This would display the total of all surcharges presently in the shipment.
9 Shipping Promo Callout
Adjusted Shipment Total: $XX.XX 10 8. Shipping costs breakdown
Shipping Cost: $XX.XX
Clicking or mousing over this icon would display a tooltip containing the shipping cost
Surcharge: PID +$XX.XX
breakdown, each surcharge would be specifically called out and the total shipping
Surcharge: PID +$XX.XX
costs would be the total of the shipping cost and surcharges.
Total Shipment Cost: $XXX.XX
9. Shipping promo
Shipping method with product shipping promotion
ti Display of shipping promo name.
10. Adjusted shipment total
Ground:$X.XX $X.XX - Product Shipping Promo Name A content asset is to display here
(Order received within 7-10 business days) Adjusted total from which the shipping cost is calculated, this total adjusted.
explain that products in the shipment 11
product shipping promotion 11. Product shipping information icon
Clicking or mousing over this icon display a tooltip containing a content asset that
Shipping method with shipping promotion and product shipping promotion has information stating that this shipping method is a promotional shipping method
available for products within the shipment.
Order Total: $X.XX
Ground:$X.XX $X.XX - Shipping Promo Name/Product Shipping
Shipping Promo Callout 12. Shipping promotion names
(Order received within 7-10 business days) 12
Product Shipping Callout Loop of all shipping promotions that are applied to this shipment.
Adjusted Shipment Total: $XX.XX
13. Fixed price product shipping information icon
Shipment Cost: $XX.XX
Clicking or mousing over this icon displays a tooltip containing a content asset that has
Shipping method with fixed price shipping information stating that some products in your shipment have fixed price shipping that
overrides standard shipping costs.
Ground: $X.XX A content asset is to display
(Order received within 7-10 business days) here explain that products in the 14. Fixed price shipping costs breakdown
13
shipment have a fixed price for Loop of all the fixed price shipping that is added to the total shipping cost.
shipping.
Shipping method with fixed price

i shipping
hi i and
d other
th ititems in shipment
Ground: $X.XX + $X.XX Item Fixed Price Shipping Order Total: $X.XX
(Order received within 7-10 business days) Shipment Cost: $XX.XX
Item Fixed Price Shipping: +$XX.XX 14
Total Shipment Cost: $XX.XX
Checkout - step 2 billing/payment method page - logged in

This page represents the billing address section of the billing/payment method page.
SELECT OR ENTER A BILLING ADDRESS • required 1. Billing address

Billing address selection provides the same functionality as the shipping address
1 Choose an Address: Select from Saved Addresses
selection in the previous step. The customer can select a saved address from the drop
down list, which fills the corresponding form fields with the customer’s saved address.
• First Name Danna If the customer chooses to use the shipping address as the billing address, this form
Order is pre-filled with this address, otherwise it is pre-filled with the customer’s default
• Last Name Henry summary address.
2. Address options
The customer can optionally add the used address to their address book.
Address 2 3. Edit Shipping

When the customer clicks Edit, in the Shipment section, they are returned to the
• Country United States shipping/shipping method page to edit the shipping address. (See Wireframe:
Shipment #1 Checkout - step 1 shipping/method page - logged in user.) The updated shipping
• State Montana address and method data is carried forward throughout the checkout process.
• City Billings SHIPPING edit 3 4. Gift certificate check balance

ADDRESS When the customer clicks Check Balance, the application checks the balance of the
• Zip Code 59101 gift certificate entered into the field. If the gift certificate is invalid, an error message
Danna Henry displays. See Wireframe: Error messages.
• Phone 333-333-3333 (Why is this required) 4 State St Clicking Check Balance does not result in a full page refresh; only a validation of the
Billings, MT 99003 Gift Certificate.
Example: 333-333-3333 United States Note: This information pertains to an already purchased gift certificate. See
Wireframe: Gift certificate for more information.
• Email [email protected]
Shipment #2 5. Security code tooltip
SELECT PAYMENT METHOD • required
Add to Address Book The customers hovers their mouse over this tooltip and the checkout-security-code
2
Please add me to the Demandware email list. Demandware does not share or sell personal info. content asset displays telling the customer where they can find their security code.
Credit Card: PayPal: Bill Me Later:
See Privacy Policy Note: The Select Payment Method section displays beneath the Enter Gift Certificate
• Select a Credit Card: Select from Saved Cards or Coupon/Discount Codes section.
ENTER GIFT CERTIFICATE OR COUPON/DISCOUNT CODES
Note: Checkout with the Discover card is only available in the USA.
• Name on Card:
You may apply more than one coupon code or gift certificate to your order, but you must apply them
•
one at a time. If there is a balance remaining on your order, you will be able to add another
Type: coupon Visa
code or gift certificate after you click “Apply”.
•
To apply a coupon code, enter the code below. Coupon codes may void existing promotions
Number that
have already been applied.
Example: 4111111111111111
Enter Coupon Code
• Expiration Date: January 2012
Apply • Security Code ( What is this? ) 5
If you wish to use a gift certificate to pay for some or all of your order, Save this card
please enter your gift certificate number and click “Apply”. Graphic
G

CONTINUE > What is a card verification Number (CVN)?
For Discover, MasterCard and Visa, enter last

three digits on the signature strip. For American
Apply Express, enter the four digits in small print on
the front of the card.
4 Check Balance
Checkout - step 2 billing/payment method page

Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 - Logged in (continued)
1. Gift certificate
SELECT OR ENTER A BILLING ADDRESS • required If a gift certificate is valid, the amount applied toward the order displays. If the order
total can be paid entirely with the gift certificate amount, the credit card and additional
Choose an Address: Select from Saved Addresses payment section is disabled.
If the gift certificate is invalid, a message displays that the gift certificate is invalid
Order (see Wireframe: Error messages). If the gift certificate has a zero balance, a message
• First Name Danna displays that there is no value left on the gift certificate. Clicking Apply does not cause
summary a full page refresh. It merely applies or validates the gift certificate.
• Last Name Henry It is not possible to pay for a gift certificate with another gift certificate. Customers
can only redeem a gift certificate if there is no gift certificate in the basket. Any gift
• Address 1 4 State St certificate payment instrument created in a previous, unfinalized checkout session is
removed if the customer reenters checkout with a gift certificate in their basket.
Address 2 2. Coupon code
• Country United States If a coupon code is valid, a message displays: “<coupon code name> has been added
to your order and was applied”. If a coupon code is invalid, see Wireframe: Errors -
Shipment #1 coupons.
• State Montana
If a promotion is applied upon the entry of a coupon code, it will be reflected in the
• City Billings SHIPPING edit cart/checkout process in the same manner as for any other promotion. Clicking Apply
ADDRESS does not cause a full page refresh.
• Zip Code 59101 3. Gift certificate remove
Danna Henry
4 State St The remove icon [X] beside the message enables the customer to remove the gift
Billings, MT 99003 certificate as a payment method.
Example: 333-333-3333 United States Note: This information pertains to a gift certificate that has already been purchased.
4. Additional payment methods
Shipment #2 When the customer selects a payment method, the form fields for that method display
SELECT PAYMENT METHOD • required beneath it, with the form fields for the previously selected payment method hidden.
2 Add to Address Book
The default method, Credit Card, is always selected when this page opens.
Please add me to the Demandware email list. Demandware does not share or sell personal info.
Credit Card: PayPal: Bill Me Later: 4 The required fields are validated at the client. See Wireframe: Errors - credit card
submissions.
See Privacy Policy
• Select a Credit Card: Select from Saved Cards Add any other payment methods should be implemented here (see Wireframe: other
ENTER GIFT CERTIFICATE COUPON/DISCOUNT CODES payment methods).
• Name on Card: 5. Save this card
A registered customer can save this credit card for future use by selecting this box. By
•
one at a time. If there is a balance remaining on your order, you will be able to add another coupon Type: Visa
default, the box is checked.
To apply a coupon code, enter the code below. Coupon codes may void existing promotions that • Number 6. Continue checkout
This element returns the customer to the Wireframe: Checkout - step 3 place order.
Example: 4111111111111111
Enter Coupon Code
2 • Expiration Date: January 2012
• Security Code ( What is this? )

Apply
If you wish to use a gift certificate to pay for some or all of your order, Save this card 5
Promo Code XXXX has been added to your order and was applied.
6
CONTINUE >
1
Apply
$XX.XX has been discounted from your order. Remove 3
Checkout - step 3 place order - user logged In
Header The Place Order page represents the final page on which customers can make
changes to their order, including items in their cart, billing/shipping address and
payment methods. The sales tax calculation is done using the standard Demand-
ware tax functionality and displays with the order summary.
Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 1. Product in-cart editing
Each line item on the Place Order page includes an Edit Details link that returns
PRODUCT QTY TOTAL ORDER SUMMARY the customer to the cart page, enabling them to make last-minute changes to
product attributes such as size and color. The customer can also update the
Product A 1 Edit Details 1 $xx.00 quantity, remove the product from the cart, and add the product to their wishlist.
Subtotal $1,207.99
- Promo Callout In Stock After the customer submits their changes, the Demandware platform launches the
PROD Order Discount - $115.80
Item No: Quickview panel (see Wireframe: Quickview),
IMG Edit Shipping $15.99
701643471799 Ground 2. Edit shipping
Color: Red Sales Tax $52.91
When the customer clicks the Edit link, they are returned to the shipping step of
Size: 12 Order Total: $1,161.09
1 Edit Details
checkout, with the information pre-filled in the fields. Customer-saved addresses
display on a drop down list, making them easily selectable.
Shipment #1
Product C 1 Edit Details $xx.00 3. Edit billing
Item No: In Stock SHIPPING Edit 2
PROD When the customer clicks the Edit link, they are returned to the checkout billing
701643471799 ADDRESS
IMG step, with the fields pre-filled. Customer-saved addresses also display on a drop
down list, making them easily selectable.
Size: 12 The expected in-stock date Danna Henry
Edit Details is Fri Sep 30 2012. 4 State St 4. Edit payment method
Billings, MT 99003 When the customer clicks the Edit link, they are returned to the edit payment
Product B 1 Edit Details $xx.00 United States Module (see Wireframe: Edit payment module). Each payment method has its own
PROD Item No: In Stock edit link, opening the appropriate payment method module.
IMG 701643471799 BILLING ADDRESS Edit 3 5. Submit order
Color: Red
Size: 12 When the customer clicks the Submit Order button, the payment method is
Danna Henry
Edit Details authorized. Upon successful authorization, the customer is navigated to the
4 State St
Order Receipt page. A failed authorization returns the appropriate message to the
Billings, MT 99003
customer (see Wireframe: Error messages).
United States
PAYMENT METHOD Edit 4
Order Danna Henry

Visa
summary ************1111
Exp.01.2016
Amount: $1,161.09
<< Edit Cart SUBMIT ORDER
Persistent footer
WELCOME: DANNA HENRY | (NOT DANNA?) CART (0) 3 Checkout - receipt page
Header 1. Order Summary
The order summary at the top contains order related information, such as order
number, creation date, payment information, and order totals. The shipment, including
Thank you for your order. products and shipping address, is contained in a separated box below.
Print Receipt 2. Print

If you have questions about your order, we’re happy to take your call (888-555-1212) Monday - Friday, 8AM - 8PM 2
When the customer click Print Receipt, a print window opens. This window uses use
an alternate print style sheet that suppresses or replaces certain pay elements, such
Order Summary 1
as the header and navigation.
ORDER INFORMATION BILLING ADDRESS PAYMENT METHOD PAYMENT TOTAL 3. Cart (n)
When the cart is empty, it shows 0 items.
Order Placed Jun 13, 2012 Danna Henry Danna Henry 4. Return to shopping
Order Number 00000182 4 State St Visa Subtotal $246.00 This link returns the user to the Home page or the last search/product/category page if
Billings, MT 99003 ***********1111 that was what was viewed before navigating to the cart page.
United States Exp.01.2016 Order Discount - $24.60
Phone: 333-333-3333 Amount: $262.91
Shipping Cost $28.99
Shipping Discount $1.00
Sales Tax $12.52
Shipment # 1
ITEM QUANTITY
QUANTITY PRICE SHIPPING TO
TO

V-Neck Dress 1 $128.00 Method: Express

Color: Black
Size: 14
Return to Shopping 4
Persistent
footer
Checkout - order receipt confirmation email
1. Email header
®
Demandware SiteGenesis The email header at the top contains the merchant’s logo, address, and thank you
5 Wall Street message.
2. Order summary
demandware.com
Phone: +1.888.553.9216 The order summary at the top contains order related information, such as order
number, creation date, payment information, and order totals. The shipment, including
products and shipping address, is contained in a separated box below.
1 Thank you for your order.
If you have questions about your order, we’re happy to take your call
(012-345-6789) Monday - Friday 8AM - 8PM
2 Order Placed Jun 15, 2012
Order Number 00000184
Payment Information
Billing Address Payment Method Payment Total

Theresa DownTown Bill Me Later Subtotal $256.00
55 Threshhold Ct Amount: $252.41 Order Discount - $25.60
Kansas City, KS 99096 Shipping Ground $9.99
United States Sales Tax $12.02
Phone: 888-888-9999 Order Total: $252.41
Shipment #1
Item Quantity Price Shipping To
Jethra 1 $99.00 Theresa Downtown

Item No: 740357447225 55 Threshhold Ct
Color: Dark Pewter Kansas City , KS 99096
Size: 9.5 United States
Width: M Method: Ground
Solid Luxe Scarf 1 $38.00

Item No: 799927767737
Color: Royal
Boat Neck Sleeveless Sheath Dress 1 $119.00

Item No: 701644358952
Color: Black
Size: L
Checkout - guest checkout
Checkout - step 1 shipping address/method page - guest

WELCOME: LOGIN | REGISTER CART (2) ITEM, TOTAL: $XX.XX
Header On the login interception page, a customer can choose to checkout as a guest and
is redirected to this page.
The default for guest checkout is that no shipping information is pre-filled in the
Checkout Step 1: Shipping > Step 2: Billing > Step 3: Place Order Help? 888-553-9216 shipping address form fields. The Saved Addresses drop down list is removed to
indicate that there are no saved addresses. If there is a single product list item in
the cart, this address is reflected in the address fields (see Wireframe: Checkout -
SELECT OR ENTER A SHIPPING ADDRESS • required step 1 Shipping Address/Method Page - Logged in User for page functionality).
• First Name
• Last Name Order

summary
Address 2
• State Select...
• City
• Zip Code
Example: 333-333-3333
Add to Address Book

Ground: $7.99 ( Details )


CONTINUE
Persistent footer CONTINUE >
Checkout - step 2 billing/payment method page - guest

The default is that no information is stored for a guest. The form fields are empty,
SELECT OR ENTER A BILLING ADDRESS • required as shown in this wireframe. Billing information is only pre-filled when the customer
selects Billing same as Shipping on the Shipping Address page.
:
• First Name For page functionality, see Wireframe: Checkout - step 2 billing/payment method page -
logged in user.
Order
• Last Name
summary
• Address 1
Address 2
• Country
• State
• City Shipment #1
• Zip Code SHIPPING edit

ADDRESS
Danna Henry
Example: 333-333-3333 4 State St
Credit Card: PayPal: Billings,
Bill MT 99003
Me Later:
• Email United States
Add to Address Book • Name on Card:

Please add me to the Demandware email list. Demandware does not share or sell Shipment #2
personal info.
• Type: Visa
See Privacy Policy
SHIPPING -
• Number DELIVERY VIA
ENTER GIFT CERTIFICATE OR COUPON/DISCOUNT CODES EMAIL
Example: 4111111111111111
Freida West
•
one at a time. If there is a balance remaining on your order, you will be able
Expiration Date:to add another coupon
January ( ******************re.com
2012 )
To apply a coupon code, enter the code below. Coupon codes•may void
Security existing promotions that
Code ( What is this? )
Enter Coupon Code

CONTINUE
Apply
Apply
Check Balance
Checkout - step 3 place order - guest
Header For page functionality, see Wireframe: Checkout - step 3 place order - logged in user.
PRODUCT QTY TOTAL ORDER SUMMARY
Product A 1 In Stock $xx.00 Subtotal $1,207.99

PROD - Promo Callout Order Discount - $115.80
IMG Item No: Edit Shipping $15.99
701643471799 Ground
Color: Red Sales Tax $52.91
Size: 12 Order Total: $1,161.09
Shipment #1
Product C 1 In Stock $xx.00
PROD Item No: SHIPPING Edit
IMG 701643471799 ADDRESS
Size: 12 The expected in-stock date Danna Henry
is Fri Sep 30 2012. 4 State St
Billings, MT 99003
Product B 1 In Stock $xx.00 United States
PROD Item No:

IMG 701643471799
BILLING ADDRESS Edit
Color: Red
Size: 12
Danna Henry
4 State St
Billings, MT 99003
United States
PAYMENT METHOD Edit
Order Danna Henry

Visa
summary
************1111
Exp.01.2016
Amount: $1,161.09
Persistent footer
Checkout - receipt page - guest

Header
1. Create an account
On the order receipt page, if a customer is a guest, a New Customers content
box displays providing details on how to create an account. When the customer
Thank you for your order. Print Receipt successfully completes this form, they are navigated to the My Account landing page.
If you have questions about your order, we’re happy to take your call (888-555-1212) Monday - Friday, 8AM - 8PM 1 2. Create an Account button
When the customer clicks the Create an Account button, they are returned to the
Order Number 00000102 CREATE ACCOUNT My Account landing page (see Wireframe: User profile - landing page - returning
customer).
Order Placed Nov 4, 2013
Creating an account is easy.
PAYMENT METHOD PAYMENT TOTAL
Just fill in the form below and
PayPal Subtotal $XXX.XX
enjoy the benefits of having
Amount: $XXX.XX Shipping Ground $X.XX
an account.
BILLING ADDRESS Sales Tax $XX.XX
• First Name
Dana Henry Order Total $XXX.XX
45 Drivenroot Tr Danna
Billings, MT 59102
• Last Name
United States
Phone: 333-333-3333 Henry
• Email
Shipment # 1
[email protected]
SHIPPING STATUS SHIPPING TO • Confirm Email
Not Shipped Dana Henry [email protected]
METHOD 45 Drivenroot Tr
Ground Billings, MT 59102 • Password
United States
333-333-3333
5 - 20 characters
ITEM QTY PRICE • Confirm Password
Black And White V-Neck Floral Dress 1 $128.00

Item No 701643843428
Color Ivory & Black
Size 8 Create an Account
2
V-Neck Dress 1 $128.00
Item No 701644130732
Color Black
Size 14
Return to Shopping
Persistent
footer
Order summary - costs and discounts details
Reference Resource
ISML files ordertotals.isml
CSS containers .checkout_summary,
5 .ordertotals
ORDER SUMMARY - SHIPPING ORDER SUMMARY - BILLING ORDER SUMMARY - PLACE ORDER
ORDER SUMMARY - CART
Help? 888-553-9216 Help? 888-553-9216 Help? 888-553-9216
1 ORDER SUMMARY ORDER SUMMARY ORDER SUMMARY
Update Cart Edit 6 ORDER SUMMARY - RECEIPT PAGE
Edit Edit
Subtotal $208.00 2 Product Product Product Subtotal $208.00

Order Discount - $20.80 PROD Color: Red PROD Color: Red PROD Color: Red 7
Edit Shipping $7.99 IMG IMG IMG
|||
|||
|||
Size: 10 Size: 10 Size: 10 Order Discount - $20.80
Ground Qty: 1 $xx.xx Qty: 1 $xx.xx Qty: 1 $xx.xx
Shipping Discount -$7.99 3 Shipping Ground $7.99
Sales Tax $9.36 Product Product Product
Estimated Total $196.56 4 PROD PROD PROD
Color: Green Color: Green Color: Green Shipping Discount -$7.99
IMG IMG IMG
Size: 16 Size: 16 Size: 16
Qty: 1 $xx.xx Qty: 1 $xx.xx Qty: 1 $xx.xx Sales Tax $9.36
Subtotal $208.00 Order Total $196.56
Subtotal $208.00 Subtotal $208.00
Order Discount - $20.80 Order Discount - $20.80 Order Discount - $20.80
Shipping Ground $7.99 Edit Shipping $7.99 Edit Shipping $7.99
Shipping Discount -$7.99 Ground Ground
Sales Tax $9.36 Shipping Discount -$7.99 Shipping Discount -$7.99
Estimated $196.56 Sales Tax $9.36 Sales Tax $9.36
Total: Order Total $196.56 Order Total $196.56
Order summary - costs and discounts details

1. Update Cart This is the total of all the lines added or subtracted from the order subtotal. 7. Receipt page
The customer clicks this to add changes to the cart. 5. Order Summary This shows all applicable lines. Red discount lines only display when necessary. Black
lines display for all orders. These lines fill dynamically as the customer proceeds through
2. Order subtotal The right column of the checkout provides a persistent review section that shows the
the checkout process. Estimated Total becomes Order Total after all applicable fields
This is the total of all line items in the cart after product promotions have been applied. items in the cart and all checkout information as it becomes complete. The shipping, tax,
are complete, enabling the Demandware platform to calculate a true Order Total for the
and promotion amounts change dynamically as the customer enters or changes personal
It is the merchandize total price without order level discount. The sum of all order level customer.
discounts display below as Order Discount. information. The product price is the price of the product line item in the basket, including
product level promotional discounts.
3. Shipping/tax
6. Edit
The Shipping and Sales Tax fields indicate the total shipping and total sales tax that are
When the customer clicks Edit,they are return to the cart page where they can make
known at the last step of the checkout (“Place Order”). Both are unknown in the cart, and
changes. When the customer proceeds to checkout again, the previous selections and
do not display here.
data are remembered.
4. Estimated Total
Other payment methods
Other payment methods - PayPal

1. PayPal payment method
SELECT OR ENTER A BILLING ADDRESS • required The SiteGenesis application does not showcase PayPal functionality: there is no real
integration with PayPal.
Choose an Address: Select from Saved Addresses When PayPal is integrated, and the customer selects PayPal, they are returned an
iFrame directly from PayPal that enables them to use their PayPal account to pay
Order for the order. The customer may also be returned directly to a full PayPal page,
• First Name Danna depending on the integration.
Summary The merchant must have a relationship with PayPal to accept PayPal as a valid
• Last Name Henry payment.
2. PayPal iFrame
This content block represents the PayPal iFrame sent by PayPal for the customer
Address 2 to enter their PayPal information. The content area is determined by PayPal and the
merchant and can be customized to meet merchant branding requirements.
Shipment #1
• State Montana
• City Billings SHIPPING edit

ADDRESS
• Zip Code 59101 SELECT PAYMENT METHOD • required
Danna Henry
• Phone 333-333-3333 (Why is this required) 4 State St
Credit Card: 1 PayPal: Billings, MT 99003
Bill Me Later:
3
Example: 333-333-3333 United States
danna@gmail.
Shipment #2
Your custom payment method integration goes here
Add to Address Book
Deman
n
Please add me to the Demandware email list. Demandware does not share or sell personal
SHIPPINGinfo. - 2
DELIVERY VIA
See Privacy Policy EMAIL
ENTER COUPON/DISCOUNT CODES Freida West

( ******************re.com )
You may apply more than one coupon
coupoo code or gift certificate to your order, but you must apply them
remaining
one at a time. If there is a balance re
e on your order, you will be able to add another coupon
CONTINUE
To apply a coupon code, enter the co code
o below. Coupon codes may void existing promotions that
Enter Coupon Code
Apply
Promo Code XXXX has been added to your order and was applied.
Apply
$XX.XX has been discounted from your order. Remove
Other payment methods - Bill Me Later

1. Date of Birth
SELECT OR ENTER A BILLING ADDRESS • required The customer must enter their valid date of birth. See Wireframe: Errors-Bill Me Later.
2. Bill Me Later payment method
Choose an Address: Select from Saved Addresses
The SiteGenesis application does not showcase Bill Me Later functionality: there is no
Order real integration with Bill Me Later. The merchant must have a relationship with Bill Me
• First Name Danna Later to accept this as a payment method.
Summary When Bill Me Later is integrated, and the customer selects Bill Me Later, they are
• Last Name Henry returned a Bill Me Later form that enables them to enter the appropriate information to
pay with Bill Me Later.
3. Last 4 digits of social security number
Address 2 The customer must enter the last four digits of their social security number. See
Wireframe: Errors-Bill Me Later.
• Country United States q 4. Agree to terms
Shipment #1 The customer must select the Agree to Terms check box to submit a payment. This is
• State Montana q
unchecked by default. See Wireframe: Errors-Bill Me Later.
• City Billings SHIPPING edit 5. Continue button
ADDRESS
If any of the required fields, date of birth, social security number, or the Agree to Terms
• Zip Code 59101
check box are not pre-filled or selected, an error message displays. See Wireframe:
Danna Henry
Errors-Bill Me Later.
• Phone 333-333-3333 ((Why
Why is this required) 4 State St
Billings, MT 99003 6. Continue
Example: 333-333-3333
SELECT PAYMENT METHOD United States • required
When the customer clicks the Continue button, the application passes the data to the
Bill Me Later Web Service, which authorizes or declines the customer’s request - if
• Email [email protected] Bill Me Later has been activated (see #2). If not activated, the application continues,
Credit Card: PayPal: Shipment #2
Bill Me Later: 2
simulating authorization.
Add to Address Book
You must provide the date of birth and the last four digits of your Social Security Number
Please add me to the Demandware em
m list. Demandware does not share or sell personal
email SHIPPING info. -
DELIVERY VIA Day
See Privacy Policy 1 Date of Birth: Year Month q
EMAIL
ENTER COUPON/DISCOUNT CODES Last 4 digits of your 3

SSN#
Freida West
( ******************re.com )
You may apply more than one coupon code or gift gi certificate to your order, but you must apply them
Bill Me Later® is an open-end credit plan offered through Chase Bank USA,
one at a time. If there is a balance remaining on your order, you will be able to add another coupon
N.A. (The Bank). By using Bill Me Later to complete this purchase, you apply
for credit and you agree that you have read the Terms and Conditions; you |||
To apply a coupon code, enter the code below. Coupon
C codes may void existing promotions that
authorize The Bank to review your credit report and you understand that this
account is subject to finance charges and late fees and is governed by
Delaware and Federal law. You authorize the Merchant to share your personal
Enter Coupon Code
information, including email address, with The Bank, and authorize The Bank
to use that information for all lawful purposes in connection with the account.
The Terms and Conditions of Bill Me Later® include the following:

Apply E-Sign Consent
Important Disclosures
If you wish to use a gift certificate to pay
y for some or all of your order,
Account Agreement
please enter your gift certificate numberr and click “Apply”.
Promo Code XXXX has been added to yo your
o order and was applied.
4 • I have read and agree to the terms above
CONTINUE> 5
CONTINUE
Apply
$XX.XX has been discounted from your order. Remove
Checkout - multiple shipping addresses
Checkout - multiple shipping - step 1 shipping

Header
See Wireframe: Checkout - step 1 shipping/method page - logged in user for infor-
mation on standard page functionality. Multiple shipping is an alternative checkout
procedure in parallel to single shipping. Within the application, the customer can
checkout the standard way, or using this setting, perform an alternative checkout
Checkout Step 1: Shipping > Step 2: Shipping Methods > Step 3: Billing > Step 4: Place Order Help? 888-553-9216 using multiple shipping. In the cart, removing the “flag” that leads to this alternative
shipping is all that is required to remove the multiple shipping functionality.
ENTER OR SELECT A SHIPPING ADDRESS • required Note: You must enable multi-shipping via a Business Manager custom site prefer-
ence.
1 Do you want to ship to multiple addresses? Yes
Select an Address 1. Multiple ship addresses

2 Select from Saved Addresses
Order When the customer clicks the Yes button or the link, they are returned to the new
(Work) 5 Wall Street Burlington, MA 01803 summary shipping address page (see Wireframe: Checkout - Multiple Shipping - step 1 new
• First Name (Home) 4 Yawkey Way Boston, MA 02215 shipping - logged in). The customer must enter information into the fields on this page.
(Celia’s house) 1 Green Street Phoenix, AZ
• Last Name 2. Select from saved addresses
This section only displays for a logged in customer.
Address 2
• State Select...
• City
• Zip Code
Example: 333-333-3333
Add to Address Book

Ground: $7.99 ( Details ) (Order received within 7-10 business days)
2-Day Express: $11.99 ( Details ) (Order received in 2 business days)
Overnight: $19.99 ( Details ) (Order received the next business day)
CONTINUE >
Persistent footer
Header
Add or Edit Addresses • required
4 Select an Address: Add New Address
1 Checkout Step 1: Shipping Addresses > Step 2: Shipping Methods > Step 3: Billing > Step 4: Place Order Help? 888-553-9216
Select
PRODUCT QUANTITY SHIPPING LOCATION

• First Name
Product A
1 (Work) 5 Wall Street Burlington, MA 01803 • Last Name
PROD - Promo Callout
IMG Item No: Add/Edit Address 2 • Address 1 (Why is this required)
701643471799
Color: Red Street Address, P.O. Box
Product C 1 Select from Saved Addresses • Address 2

PROD Item No:
Order
IMG 701643471799 3
(Work) 5 Wall Street Burlington, MA 01803
Add/Edit Address summary Apartment, Suite, Unit, Floor
Color: Red
(Home) 4 Yawkey Way Boston, MA 02215
Size: 12
(Celia’s house) 1 Green Street Phoenix, AZ 85 • Country Select...
S l
Product B (Home) 4 Yawkey Way Boston, MA 02215 • State S

Select...
l
Item No:
1
PROD
701643471799 Add/Edit Address • City
IMG
Color: Red
Size: 12 • Zip Code

Gift Certificate - $100.00 1 [email protected]
- Delivered Via Email Shipment # 1
Example: 333-333-3333
SHIPPING - DELIVERY Add to Address Book

CONTINUE > VIA EMAIL
Save Cancel
Persistent footer
Checkout - multiple shipping - step 1 shipping addresses
Each item in a multiple shipping cart is split into a quantity of 1, thus enabling the 3. Shipping Addresses 4. Add or edit addresses
customer to ship products to various recipients. For a registered/logged in customer, all stored addresses display in the drop down list, By default, text boxes are empty. The customer can optionally save the address or
1. Shipping address breadcrumb with the default address displaying for each line item. If the platform is configured to cancel.
support multi-shipping, and one or more items are from one or more wishlists or gift
When the customer selects multiple shipping addresses, the checkout process splits
registries (with multiple items in the cart), the wishlist or gift registry item drop down
the shipping address selection task into two steps: the shipping address page and
lists display with their respective default addresses.
shipping method page.
For an unregistered customer, a message displays asking them to click the Add
2. Add new address Address link to add a new address. Each address a customer adds via the Add
When the customer clicks the Add/Edit Address link, an AJAX window opens, Address link is included in the drop down list for all line items. If there is no address
enabling the customer to enter and save a new address for the multiple ship-to. in the address book, the drop down list does not display. It displays as soon as the
customer adds the first address.
Checkout - multiple shipping - step 2 shipping methods
Header
1. Shipments
Each address that represents a shipping destination is split into a separate shipment
Checkout Step 1: Shipping Addresses > Step 2: Shipping Methods > Step 3: Billing > Step 4: Place Order Help? 888-553-9216 with a message “Shipment X” where X is the shipment number.
2. Shipping methods
1 SHIPMENT #1
The shipping method defaults to ground shipping. The customer can select the
Select Shipping Home Delivery Shipment #1 Ground: $5.99 (Order received within 7-10 busines ORDER SUMMARY appropriate shipping method. Once They select a shipping method, the shipment total
Method: is adjusted to match the updated shipping method.
Ground: $5.99 (Order received within 7-10 business
2 3-Day Express: $9.99 (Order received in 3 business Product 3. Promotional shipping message
PROD
Product 2-Day Express: $14.99 (Order
Quantity received
Shipping in 2 busines
Details Color
IMG If a specific shipment qualifies for a shipping discount, the appropriate discount
Overnight: $22.99 (Order received the next business Qty: 1 $xx.xx
|||
message displays.
Product A 1 Danna Henry
PROD 3 - Promo Callout 4 State St 4. Gift certificate shipment
IMG Item No: 701643471799 Billings, MT 99003 Product
PROD Gift certificates are always their own shipment, with the shipping method set to
Color: Red United States Color
IMG Delivery Via Email. This cannot be changed.
Size: 12 Qty: 1 $xx.xx
5. Shipment calculations
Each shipment has its own shipping charge. Upon entering the shipping method
PROD Product B 1 Subtotal $1,207.99 page, the shipping totals that display use the default shipping method, with the costs
IMG Item No: 701643478711 Order Discount - $115.80 reflecting the corresponding shipping charges to the shipment. If the customer selects
Color: Violet Edit Shipping $15.99 other shipping methods, the order totals are refreshed.
Size: M Ground
6. Edit shipping
Sales Tax $52.91
Is this a gift? Yes No The customer returns to the new shipping address page. See Wireframe: Checkout -
5 Order Total: $1,161.09
Multiple Shipping - step 1 new shipping.
Shipment #1 7. Continue
SHIPMENT #2 The Continue button is positioned in the right frame, beneath the shipment details.
Select Shipping Method: Ground: $5.99 (Order received within 7-10 business days)
Danna Henry 6
4 State St
Product Quantity Shipping Details Billings, MT 99003
United States
Method: Ground
Product C 1 Danna Henry
PROD Item No: 701643456839 4 State St Shipment #2
IMG Color: Taupe Billings, MT 99003
Size: 12 United States SHIPPING ADDRESS Edit
Danna Henry
Is this a gift? Yes No
5 Wall St
Billings, MT 99003
Message
United States
Shipment #3
SHIPPING - DELIVER VIA EMAIL
SHIPMENT #3
Amanda Green
4 Product Quantity Shipping Details ([email protected])
Gift Certificate 1 Delivered Via Email CONTINUE 7

[email protected]
Persistent footer
Checkout - multiple shipping - step 3 billing

1. Saved addresses
Order summary - billing
SELECT OR ENTER A BILLING ADDRESS • required By default, no information is stored for a guest. A logged in user can select a stored
address.
Choose an Address: Select
Selectfrom
fromSaved
SavedAddresses
Addresses See Wireframe: Checkout - step 2 billing/payment method page - logged in user for
1 page functionality.
(Work) 5 Wall Street Burlington, MA 01803
(Home) 4 Yawkey Way Boston, MA 02215 2. Shipping addresses
• First Name D
Danna
anna house) 1 Green Street Phoenix, AZ 85001
(Celia’s This page shows the multiple shipping addresses.
• Last Name Henry
y
• Address 1 4 Stat
State
e St
Address 2
• State Montana
• City Billings
• Zip Code 59101
Example: 333-333-3333 Shipment #1
@g SHIPPING ADDRESS edit
2
Add to Address Book Danna Henry
Please add me to the Demandware email list. 5 Wall St
Demandware does not share or sell personal info. Burlington, MA 01803
See Privacy Policy United States
ENTER GIFT CERTIFICATE ORPAYMENT
SELECT COUPON/DISCOUNT
METHOD CODES • required Method: Ground
You may apply more than one coupon code or gift certificate to your order, but you must apply
Credit
them one at Card:
a time. PayPal:
If there is a balance remaining on your Bill Meyou
order, Later:
will be able to add Shipment #2
another coupon code or gift certificate after you click “Apply”.
• Selectcode,
To apply a coupon a Credit Card:
enter the codeSelect
below.from Saved
Coupon Cards
codes may void existing promotions
that have already been applied.
SHIPPING ADDRESS edit
• Name on Card:
Enter Coupon Code
Danna Henry
•
Type: Visa 4 Yawkey Way
Boston, MA, 02215
• Number
Apply
United States
If you wish to useExample: 4111111111111111

a gift certificate to pay for some or all of your order, Method: 2-Day
• Expiration Date: January 2012 Shipment #3
• Security Code ( What is this? ) SHIPPING - DELIVER VIA
EMAIL
Save this card
Apply Amanda Green
CONTINUE > ([email protected])
Check Balance
Checkout - multiple shipping - step 4 place order

See Wireframe: Checkout - step 3 - place order user logged in for page functional-
PRODUCT QTY TOTAL ORDER SUMMARY 1 ity.
Edit
1. Edit order
Shipment #1 Subtotal $1,207.99 When the customer clicks Edit to change the order, they are returned to the cart page.
Order Discount - $115.80 The customer must navigate to return to the place order page.
2
Product A 1 In Stock $xx.00 Edit Shipping $15.99
2. Edit shipping
- Promo Callout Ground
PROD
Item No: Sales Tax $52.91 When the customer clicks Edit in one of the shipping address sections, they are
IMG
701643471799 Order Total: $1,161.09 returned to the new shipping address page. See Wireframe: Checkout - Multiple
Color: Red Shipping - step 1 new shipping.
Shipment #1
Size: 12 For example, a customer purchases 1 item and is shipping this product to his brother.
SHIPPING ADDRESS Edit He decides that he would like to purchase 2 items and ship the second to his sister. He
updates the quantity to 2 of the item needed, then clicks the Edit link at the shipping
Product C 1 In Stock $xx.00 Danna Henry address to return to the multiple shipments page to split the order into two shipments.
Item No: 4 State St Note: The default is that the Place Order page does not allow customers to split
PROD
701643471799 Pre-Order Billings, MT 99003 shipments.
IMG
Color: Red The expected in-stock date United States
Size: 12 is Fri Sep 30 2012
Shipment #2
.

Shipment #2
Danna Henry
Product A 1 In Stock $xx.00 1 Henry Ave, Apt 22
- Promo Callout Concord NH 03301
PROD
Item No: United States
IMG
701643471799
Color: Red Shipment #3
Size: 12
SHIPPING - Deliver Via Email
Amanda Green
[email protected]
Product C 1 In Stock $xx.00
Item No:
PROD
701643471799 Pre-Order BILLING ADDRESS Edit
IMG
Color: Red The expected in-stock date
Size: 12 is Fri Sep 30 2012. Danna Henry
4 State St
Billings, MT 99003
Shipment #3 United States
PAYMENT METHOD Edit

Gift Certificate Edit Details $xxx.00
- Delivery Via Email 1 (Active with 24 hours)
Danna Henry
Gift To: Amanda Green
Visa
Cert [email protected]
************1111
From: Danna Henry
Exp.01.2016
[email protected]
Amount: $1,161.09
Order
summary
Checkout - multiple shipping - order receipt

Header
1. Shipment
Thank you for your order. Each shipping address is split into a separate shipment, providing the customer with
If you have questions about your order, we’re happy to take your call (888-555-1212) Monday - Friday, 8AM - 8PM Print Receipt an easy-to-read layout.
Order Summary
ORDER
ORDER INFORMATION
INFORMATION BILLING
BILLING ADDRESS
ADDRESS PAYMENT
PAYMENT METHOD
METHOD PAYMENT
PAYMENT TOTAL
TOTAL

Order Number 00000182 4 State St Visa Subtotal $xxx.00
Billings, MT 99003 ***********1111
United States Exp.01.2016 Order Discount - $xx.00
Phone: 333-333-3333 Amount: $xxx.xx
Shipping Cost $xx.00
Shipping Discount $x.00
Sales Tax $xx.00
Order Total: $xxx.xx
1 Shipment # 1
Black And White V-Neck Floral Dress 1 $xxx.00 Danna Henry

V-Neck Dress 1 $xxx.00 Method: Express

Color: Black
Size: 14
1 Shipment # 2
Gold and Pearl bracelet 1 $xx.00 Danna Henry
Billings, MT 99003
United States
Method: Express
Shipment # 3
Gift Certificate 1 $xx.00 Amanda Green
[email protected]
Method: Delivered Via Email
Return to Shopping
Persistent footer
Purchasing gift certificates
Header 1. Customer information

This is the gift certificate customer information.
2. Gift certificate image
My Account Gift Certificates • required The image is uploaded as a content image in Business Manager. The content asset is
gift-details.
• Your Name
3. Gift certificate amount/add to cart
1
This is where the customer enters the amount of the gift certificate. A gift certificate
with the amount entered is added to the shopping cart and the mini-cart AJAX window
• Friend’s Name (Wireframe: Mini-cart) opens (drops down), showing the recently added gift certificate.
4. Gift certificate error
See Wireframes: Error messages.
Account • Friend’s Email 5. Check balance
navigation 2 Content = gift-details The check balance text is defined as a content asset in Business Manager. If the
customer clicks this button, a window opens with a field that shows the gift certificate
• Confirm Friend’s Email balance (similar to the button in checkout).
The content asset is gift-check-balance.
Gift certificates can only be redeemed in the currency in which they were issued. See
Message the Wireframe: Errors - purchasing gift certificates.
CAPTCHA: When SiteGenesis pipelines (and controllers) are called too many times
in a session, a CAPTCHA displays that requires human intervention, and slows down
any brute force attack. For example, the customer enters an incorrect gift certificate
You have 250 characters left out of 250 code six times. The first five display errors, but the sixth time also displays a popup
asking the customer to confirm their humanity. Configure the retry count in Business
• Amount Manager.
ADD TO CART 3
6. Gift certificate additional details
Gift Certificate can only be The content asset is gift-additional-details.
purchased with a minimum of 4
$5 and maximum of $5000.
Help
Content = gift-check-balance
5 Check Balance
Content = gift-additional-details
6
Persistent footer
Gift certificates only in cart
Customers who add only gift certificates to their shopping cart are not charged for
shipping because the gift certificate is sent electronically through email to the recipi-
Header ent.
See Wireframe: Gift certificates: cart multiple products for details on orders contain-
ing products and gift certificates.
1. Gift certificate
Cart The gift certificate image is a static image, delivered via the email message along with
the to and from information. A customer can click the Edit Details link to edit the gift
Your Shopping Cart Checkout certificate amount and customer details. The gift certificate purchase form displays
with the existing gift certificate information.
PRODUCT QTY PRICE TOTAL PRICE RETURNING CUSTOMERS
2. Shipping message
• required
Gift Certificate Remove $20.00 4 This message indicates that the order will be sent via email because the only item
1 ordered is a gift certificate.
Gift Cert - Gift Certificate will be delivered by email Edit Details If you are a registered user, please
Graphic enter your email and password. 3. Active message
2
Price: $20 *Email Address:
To: Sandie, ******************re.com
This message indicates when the gift certificate will be available for redemption.
3
1 From: Danna *Password: 4. Multi-currency
When multi-currency is enabled and the customer selects a different currency from
Remember Me
the header dropdown, the currency symbol changes beside all currency values on
the page, including the gift certificate value, while the gift certificate value itself does
Login Forgot
not change (no automatic currency conversion). See the Wireframe: Header | global
Password?
Global Slot: cart-footer navigation | footer.
5. Checkout
CHECKOUT If the cart contains only gift certificates, checkout begins with the payment step,
OPTIONS bypassing the shipping step because the gift certificate is to be delivered by email and
the recipient of the gift certificate has already been specified.
New Customer
ENTER COUPON CODE Sign up for an account
Apply Update Cart Create an Account
or
Guest Checkout
Checkout without creating an
Order Summary
account
Checkout As Guest

CHECKOUT 5
Persistent footer
Gift certificates only in cart - checkout billing

Step 1: Billing > Step 2: Place Order
The customer bypasses the shipping address and shipping methods page when
Help? 888-553-XXXX only purchasing a gift certificate. The gift certificate only billing page follows the
same rules as for a standard product purchase, displaying the same information to
SELECT OR ENTER A BILLING ADDRESS • required the customer (see Wireframe: Cart for information on registered and guest check-
out).
• First Name
1
ORDER SUMMARY Edit Note: It is not possible to pay for a gift certificate with another gift certificate.
• Last Name Customers can only redeem a gift certificate if there is no gift certificate in the
basket. Any gift certificate payment instrument created in a previous, unfinalized
• Address 1 Gift Certificate checkout session is removed if the customer reenters checkout with a gift certificate
Qty: 1 $xxx.00 in their basket.
Address 2
1. Edit product
Subtotal $xxx.00 When the customer clicks this button, they are returned to the gift certificates page
• Country
Sales Tax $x.00 to modify the amount and recipient information. See Wireframe: purchasing gift
• State certificates.
• City
• Zip Code
Example: 333-333-3333
• Email
Add to Address Book

Please add me to the Demandware email list. Demandware does not share or sell personal info.
See Privacy Policy
ENTER COUPON/DISCOUNT CODES
You may apply more than one coupon code to your order, but you must apply them
one at a time. If there is a balance remaining on your order, you will be able to add another coupon
code after you click “Apply”.
To apply a coupon code, enter the code below. Coupon codes may void existing promotions that
Enter Coupon Code
Apply
Gift certificates only - place order
Header After a customer submits an order that contains a gift certificate, the Demandware
platform sends the gift certificate recipient an email with the gift certificate code,
balance and the name of the person who sent the gift certificate along with a
personal message, if specified.
Checkout Step 1: Billing > Step 2: Place Order Help? 888-553-9216
PRODUCT QTY PRICE ORDER SUMMARY
To: Sandie ( [email protected] ) $20.00

Gift Cert
1
From: Danna
Graphic
Help? 888-553-9216 SHIPPING -

DELIVERY VIA
EMAIL
Sandie
[email protected]
Order
Summary BILLING ADDRESS Edit
Danna Henry
4 State St
Billings, MT 99003
United States

PAYMENT METHOD Edit
Danna Henry
Visa
************1111
Exp.01.2016
Amount: $1,161.09
Persistent footer
Gift certificates only receipt
1. Gift certificate information

WELCOME: DANNA HENRY | (NOT DANNA?) CART (0)
This part of the order receipt contains all gift certificate information, including the
Header amount, purchaser, and recipient.
2. Shipping details
This information indicates delivery via email for a gift certificate only purchase. Each
Thank you for your order. gift certificate is contained in a separate shipment, and thus displays in a separate
shipping box on the order receipt page.
If you have questions about your order, we’re happy to take your call (888-555-1212) Monday - Friday, 8AM - 8PM Print Receipt
Order Summary
2

Billings, MT 99003 ***********1111
United States Exp.01.2016 Shipping $0.00
Phone: 333-333-3333 Amount: $262.91
Sales Tax $0.00
Shipment # 1
ITEM
ITEM QUANTITY
QUANTITY PRICE
PRICE SHIPPING
SHIPPING TO
TO
Gift Certificate 1 $20.00 Sent To: 2
1
To: Sandie [email protected]
[email protected]
From: Danna Method: Delivery Via Email
Gift Message
Thanks for your help, Sandie!
Return to Shopping
Persistent
footer
Gift certificates - cart multiple products
Customers who add a gift certificate to their shopping cart along with other products
Header are charged normal shipping prices, excluding the gift certificate in the shipping
calculation because the gift certificate is sent electronically through email to its
recipient. The gift certificate item displays last in the cart.
Cart 1. Checkout
When the customer clicks this button, they are navigated to the shipping method page.
Global slot: cart-banner
Your Shopping Cart Checkout
PRODUCT QTY PRICE TOTAL RETURNING CUSTOMERS

PRICE • required
Gift Certificate Remove $20.00
1 If you are a registered user, please
Gift Cert - Gift Certificate will be delivered by email Edit Details
enter your email and password.
Graphic Price: $20
*Email Address:
To: Sandie, [email protected]
From: Danna
*Password:
Remember Me
Product A Remove $xx.00 $xx.00
1
PROD Item No: Add to Wishlist Login
Forgot
Password?
Size: 12 The expected in-stock
Edit Details date is Fri Sep 30 2011.
CHECKOUT
Product B Remove $xx.00 $xx.00 $xx.00
1 OPTIONS
PROD Item No: Add to Wishlist
New Customer
Color: Red In Stock
Sign up for an account
Size: 12
Edit Details Create an Account
or
Order discount Guest Checkout
account
Update Cart Checkout As Guest

ENTER COUPON CODE

Order Summary
*See Chapter “Order Summary”
Apply
1
Persistent footer
My Account
My Account My Account Login RETURNING CUSTOMERS • required

˅ ACCOUNT SETTINGS 2
Create an Account RETURNING CUSTOMERS • required NEW CUSTOMERS If you are a registered user, please enter your email
1 and password.
˅ SHOP CONFIDENTLY If you are a registered user, please enter your email and Creating an account is easy. Just fill in the form below and
8
Privacy Policy password. enjoy the benefits of having an account. ! Sorry, this does not match our records. Check
Secure Shopping your spelling and try again.
• Email Address Create an Account Now 6
• Email Address
Benefits of Creating an Account
7
Need Help? • Password News and exclusive offers! • Password
Sign up to receive email updates on special promotions,
If you have any question or new product announcements, gift ideas and more.
need help with your account,
you may Contact Us to assist Remember Me Order History Remember Me
you. Receive important information about your order. You can
3 Login Forgot Password? even track it up to the minute it arrives. Forgot Password?
Login
Customer Service
Monday to Friday Or login with an external provider Faster Checkout
8 AM to 8 PM 4 Save your billing and shipping information to make it easier
1 (888) 553 9216 Provider icons
to buy your favorite gear.
You will be redirected to the external authentication (read more about security)
CHECK AN ORDER required
provider during this process. If you haven’t used this login
See your order even if you are not a registered user.
5 CHECK
before, you are likely to be prompted AN ORDER
by the provider to required Enter the Order Number and the Billing Address Zip
login. Afterwards, the external authentication provider asks
Code.
you for your permission to share yourSeedatayour
(name,
ordergender,
even if you are not a registered user. In the user interface, the
confirmed email address). If you grantEnter
access,
the an account
Order Number and the Billing Address Zip Check an Order section is 9 ! Sorry, this order number or postal code does
in our store will be created based on this
Code.information. If
directly below the Returning not match our records. Check your records
you are a returning customer and login using an external
customer section. and try again.
• Order
authentication provider, you’ll be asked to loginNumber
to that
provider again.
The returning Customer • Order Number
section shown to the right
also has the external provider
• Order Email information and icons.
• Order Email
• Billing Zip Code
My Account - login
1. Left navigation window. When the customer clicks the Create Account button, they are returned to the create
an account page (see Wireframe: My Account - personal data - new user).
The left navigation pane provides the customer with the ability to create a new account, 3. Account help text
review shipping and return policies, and engage with customer service (see Wireframe: 7. Create account text
This text is a content asset managed in Business Manager. This content asset is
My Account - returning customer).
account-help. This text is a content asset managed in Business Manager. This content asset is create-
2. Returning customers account-benefits.
4. External provider
Customers enter their login credentials, which consist of an email address and 8. Error messaging my account
The customer can select an external authentication provider, per OAuth support.
password. Upon successful login, the customer is returned to the My Account landing
See Wireframe: Error - my account login.
page (see Wireframe: My Account - landing page - returning customer). If the customer 5. Check order
enters invalid login information, an invalid login error message displays. (See # 7 in this To check an order, the customer must enter an order number, order email, and billing
9. Error messaging track orders
list.) zip code. Both registered and unregistered customers can enter their order information If the customer enters an invalid order number and/or billing post code, an error
Remember Me checkbox: This saves the customer’s email and password information in this area. After correctly entering a valid order number and zip code, the customer is message displays: “Your order number or billing zip code is incorrect. Please enter a
for future sessions. returned to the order details page (see Wireframe: My Account - order details). correct order number and valid postal code.”
Forgot Your Password link: This navigates the customer to the password recovery
6. Create account
My Account - landing page - returning customer
Header The following wireframes describes the pages where the customer is returned after
clicking the corresponding link in the left navigation pane or the navigation buttons.
The landing page is a content asset.
* Personal Data link - Wireframe: My Account - personal data
My Account * Addresses link - Wireframe: My Account - address book
1 * Payment Settings link - Wireframe: My Account - credit card information
˅ MY ACCOUNT Global slot: account-banner
Personal Data * Orders link - Wireframe: My Account - order history
3
Addresses 2 * Gift Registries link - Wireframe: Gift registry
Payment Settings My Account | Danna Henry (logout) * Wishlist link - Wireframe: Wishlist on page
˅ ORDER INFORMATION 1. Account slot banner

Order History Account banner is a global slot within Business Manager. The banner remains
persistent through the My Account experience. The global slot, account-banner,
˅ WISHLIST Icon Personal Data Icon Orders contains the content asset, account-banner.
4
Modify Wishlist 2. Returning customer personalization
Search Wishlists
Returning customers, once they log in, will see a personal message welcoming them
˅ GIFT REGISTRIES back. The customer also has the option to log out.
Create Registry Icon Addresses Icon Wishlist 3. Left navigation
Search Registries
The left navigation pane enables returning customers to navigate to account
Modify Registries
information pages such as personal data, addresses, wishlists, and stored payment
methods. Returning customers can also view order history and track existing orders.
˅ SHOP CONFIDENTLY
The left navigation pane also provides links to the Wishlist and Gift Registry.
Privacy Policy Icon Payment Settings Icon Gift Registries
Secure Shopping 4. Account landing content
Navigation information is provided to the returning customer as a landing page for
Need Help? My Account. This is a content asset that mimics left pane navigation, but with more
detailed options to help the customer locate what they are looking for. The content
If you have any question or asset is account-landing.
you may Contact Us to assist
you.
Customer Service
Monday to Friday
8 AM to 8 PM
1 (888) 553 9216
Persistent footer
My Account - personal data
1. Left navigation
The left navigation pane enables returning customers to navigate to account
Header information pages such as personal data, addresses, and stored payment methods.
Returning customers can also view order history and check existing orders. The
left navigation pane also provides links to the wishlist and gift registries. The left
navigation pane remains persistent throughout the My Account experience.
My Account > Edit Account
2. Edit account - new customer
˅ MY ACCOUNT Global slot: account-banner
The New Customer selection only displays when the customer wants to create an
Personal Data 1 account. It does not display when the customer edits an existing account.
Addresses
Payment Settings Create Account ( or Edit Account) 3. Name
The returning customer’s first name and last name are pre-filled from stored account
˅ ORDER INFORMATION New Customer 2 information. The returning customer can change their first and last name and then
Order History click the Apply button to save the change.
4. Login information
˅ WISHLIST NAME • required 3
Modify Wishlist The returning customer’s login information is pre-filled from stored account
Search Wishlists information, except the new password and confirm new password fields. The returning
customer can change all login information and click the Apply button to apply the new
˅ GIFT REGISTRIES • First Name information.
Create Registry 5. Demandware email list
Search Registries • Last Name
When the customer selects this checkbox, they will be added to the email list. This
Modify Registries
feature would have to be integrated into the application.
˅ SHOP CONFIDENTLY EMAIL/LOGIN INFORMATION • required 4
Privacy Policy
Secure Shopping
• Email
Need Help? • Confirm Email
If you have any question or • Password

you may Contact Us to assist 5 - 20 characters
you.
• Confirm Password
Customer Service
Monday to Friday
8 AM to 8 PM Please add me to the Demandware’s email list. 5
1 (888) 553 9216
Demandware does not share or sell personal info. See Privacy Policy
Apply
Persistent footer
My Account - addresses
This view shows the customer’s saved addresses. The default address always
displays first. After that, there is no special sorting. The layout consists of three
Header addresses per row with no paging.
1. Create new address
This opens the Add Address window (see Wireframe: My Account - add/edit address).
My Account > Addresses
2. Default address
Global slot: account-banner When the customer clicks the Default Address radio button, the selected address is
pre-filled with the customer’s default shipping address. The address is submitted upon
click of the radio button, with no page refresh. There can only be one default address.
Addresses
3. Delete address
Account
ADDRESSES Create New Address 1 When the customer clicks Delete Address, the address is removed from the address
navigation book. A confirmation window opens to complete the operation (see Wireframe: Tooltips
and confirmation windows).
Default Address 2
4. Edit address
Fairbanks This opens the Edit Address AJAX window (see Wireframe: My Account - add/edit
Jane Custis address)
1 Dover St
Fairbanks, AK 55555
United States
Phone: 444-333-3321
4 Edit | Delete 3
Billings Silver Springs

Danna Henry Danna Henry
4 State St 5 Hortenze Circle
Billings, MT 99003 Silver Springs, NV 89429
United States United States
Phone: 333-333-3333 Phone: 333-333-3333
Help Make Default | Edit | Delete Make Default | Edit | Delete
Persistent footer
My Account - add/edit address window
Customers can add or edit their addresses via the add/edit address window. The
address nickname must be unique. However, a customer can enter the same
address twice as long as the nicknames are different and both addresses valid.
Header
The country field dynamically changes the fields that follow, depending on the
Add Address selected country. All validation occurs on the server when the customer clicks
My Account > Addresses Apply. All fields are mandatory, except Address 2 and Nickname. If no nickname is
entered, one is automatically created: for example, Address 1.
Global Slot: account-banner
ADDRESS DETAILS • required
1. Add/Edit Address window
Addresses
Address
s 2 When a returning customer clicks Create New Address or Edit Address from the
• First Name
stored address book, the Add/Edit Address window opens. The Header label changes
ADDRESS
S
ADDRESSES Create New Address to reflect whether a customer is adding or editing an address (see Wireframe: My
• Last Name
Account - address book).
Account Default Address

A • Address 1 2. Address form
The Address form is pre-filled with a returning customer’s address information. When a
Navigation Fairbankk
Fairbanks Street Address, P.O. Box
customer is creating a new address, this form is blank.
Jane Custis
Cuu
1 Dover St • Address 2 3. Action buttons
Fairbank k AK 55555
Fairbanks, The address module displays three action buttons: Apply, Cancel and Delete.
United SStates Apartment, Suite, Unit, Floor
* The Apply window saves the valid form within the customer’s address book, closes
Phone: 4 444-333-3321 the window, and returns the customer to the address book page.
Edit | De
e
Delete • Country Select...
* The Cancel button closes the window and returns the customer to the address book
page.
• State Select...
* The Delete button removes the address from the customer’s address book, closes
Billings Silver Springs
• City the window and returns the customer to the address book page. The Delete button
Danna H Henry Danna Henry
does not display when the customer is creating a new address.
4 State St
S 5 Hortenze Circle
Billings,, MT 99003 • Zip Code Silver Springs, NV See Wireframe: My Account - address.
89429
United S States • Phone United States
Phone: 3 333-333-3333 Phone: 333-333-3333
Make Default
Dee | Edit | Delete Example:
Make 333-333-3333
Default | Edit | (Why is this required)
Help Delete
Apply Cancel
3
Persistent footer
My Account - payment methods
This view shows the customer’s saved payment methods. The default payment
method always displays first; after which there is no special sorting. The layout
Header shows three payment methods per row with no paging. The credit card information
displays as shown, with only the last four digits of the credit card unmasked.
1. Add a credit card
My Account > Payment Settings This opens the Add Credit Card Module window (see Wireframe: My Account - add
credit card information window).
2. Delete card
When the customer clicks Delete Card, the card is removed. A confirmation module
Credit Card Information opens to complete the operation (see Wireframe: Tooltips and confirmation windows).
CREDIT CARD INFORMATION 1 Add a Credit Card
Account Jane Custis

Visa
Navigation ************1111
Exp.01.2016
Delete Card

Discovery MasterCard
************1678 ************5675
Exp.03.2014 Exp.02.2016
Delete 2 Delete
Help
Persistent footer
Header
My Account > Payment Settings
Credit Card Information
CREDIT CARD INFORMATION 1 Add a Credit Card
Account Jane Custis

Vi a
Visa
Vis
Navigation *************1111
***********1111
ADD A CREDIT CARD • required 1
Exp.01.2016
E xp.01.2016
Delete
AddCarda Credit Card
• Name on Card 2
Discovery MasterCard
• Type
************1678 ************5675
Exp.03.2014 Exp.02.2016
Delete • Number 2 Delete
Example: 4111111111111111
Expires:
• Month January
• Year 2012
Help
Apply Cancel
3
My Account - add credit card information window

1. Credit card window validated, the information is saved as a payment
Reference Resource When a returning customer clicks either to add or
method for that customer, the window closes, and the
ISML files paymentinstrumentde- customer is returned to the payment methods page.
edit a credit card from the stored credit cards (see
tails.isml Wireframe: My Account - credit card information), When the customer clicks Cancel, the window closes
CSS containers .creditcard_form they are returned to the add/edit credit card window. and the customer is returned to the module and the
customer is returned to the payment methods page.
2. Credit card form
The add form is blank, enabling customers to enter
information for new credit cards.
3. Action buttons
The credit card window displays two action buttons:
Apply and Cancel.
When the customer clicks Apply, the form is
My Account - left navigation
NAV COLUMN - REGISTERED NAV COLUMN - UNREGISTERED Left pane navigation for logged in customers is persistent throughout the account
My Account My Account area.
Link groups link to all logged in
customer features. 1. Account settings links - Registered
1 ˅ MY ACCOUNT 7 ˅ ACCOUNT SETTINGS
Personal Data Personal Data links to Personal Data (see Wireframe: My Account - personal data).
Groups will expandable and Create an Account
Addresses collapsible. Addresses links to Addresses (see Wireframe: My Account - personal data).
Payment Settings ˅ SHOP CONFIDENTLY Payment Methods links to Payment Methods (see Wireframe: My Account - payment
5 Privacy Policy methods).
2 ˅ ORDER INFORMATION Secure Shopping 2. Order information
Order History
Order History links to customer order history (see Wireframe: order history).
3 ˅ WISHLIST Check Order links to customer order history (see Wireframe: order history: order
Modify Wishlist details).
Search Wishlists 6 3. Wishlist
The customer clicks Modify Wishlist to open the Wishlist home page and clicks
4 ˅ GIFT REGISTRIES Content asset
Search Wishlists to open the Wishlist: search results page (see Wireframe: Wishlist).
Create Registry
Search Registries 4. Gift registries
Modify Registries Create Registry links to Gift Registry Creation (see Wireframe: Gift registry - creation -
Static Nav to show to both registered
and unregistered customers. event/participants).
5
˅ SHOP CONFIDENTLY Search Registries links to Gift Registry Home (see Wireframe: Gift Registry).
Privacy Policy Links to content assets
Modify Registries links to Gift Registries list (see Wireframe: Gift Registry).
Secure Shopping
5. Persistent account links
Persistent account links display to both registered and unregistered customers. They
6 link to the content assets for Privacy policy and Secure shopping.
6. Account navigation content
Content asset This text is controlled within Business Manager via a content asset. The content asset
is account-nav-text.
7. Account settings links - unregistered
Create an Account links to Create an Account (see Wireframe: Create an account).
Create an account
Checkout Header
TOTAL RETURNING My Account

PRICE CUSTOMERS Global slot: account-banner
˅ ACCOUNT SETTINGS
If you are a registered user, please Create an Account
$xx.00 2
enter your email and password.
*Email Address: ˅ SHOP CONFIDENTLY Create Account Create Account
Privacy Policy
*Password: Secure Shopping New Customer New Customer
Remember Me
NAME NAME • required • required
$xx.00 Login
Forgot
Password? Content asset : :
4 • First Name • First Name Danna
CHECKOUT • Last Name • Last Name Henry

OPTIONS
$xx.00 New Customer EMAIL/LOGIN INFORMATION • required

EMAIL/LOGIN INFORMATION • required
Sign up for an account
1 Create an Account
• Email • Email [email protected]
5
or
Guest Checkout • Confirm Email • Confirm Email d
[email protected]
@g
account • Password • Password 7789Rttn
Checkout As Guest
20 characters 20 characters
• Confirm Password • Confirm Password 7789Rttn
Please add me to the Demandware’s email list. Please add me to the Demandware’s email list.
Demandware does not share or sell personal info. See Demandware does not share or sell personal info. See Privacy Policy
Apply Apply
My Account - personal data - new user

1. Create account appropriate login information and clicks Apply, the account information is saved.
If the customer enters a password and a confirm password that do not match, an
New customers can create accounts from the cart, using the Register links in the cart
error message displays and the confirm password label is highlighted in red (see
header, Wishlist and Gift Registry. If the customer clicks Checkout without creating
Wireframe: Error messages).
an account, they are prompted to create one.
2. Left navigation - unregistered
The left navigation pane enables an unregistered customer to navigate static
content links that display for both registered and unregistered customer. Registered
customers will see a complete list of links (see Wireframe: My Account).
3. Name
A new customer’s first name and last name is blank.
4. Login information
A new customer’s login information is blank. Once the new customer adds the
Reset password
Password recovery
$xx.00 RETURNING CUSTOMERS
1. Forgot Password
• required
When a customer clicks the Forgot Your Password link, a Reset Password window
If you are a registered user, please opens (see Wireframes: Error: my account login).
enter your email and password. 2. Customer email
*Email Address:
The customer must enter a valid email address, but as a security feature, they are not
*Password: notified of an invalid password. The message that displays in the window (shown in
$xx.00 #3), is the same whether or not the email entered is correct.
3. Password reset request sent
Remember Me
The customer receives an email.
1 For security reasons,
Login
Forgot
Password?
Request to Reset Your Password?

2
Provide your account email to receive an email to reset your password.
• Email Send
Cart
Global Slot: cart

cart-banner
t-banner
Your Shopping Cart Che

Ch
Checkout
cko
k utt
PRODUCT QTY P
PRICE
RICE T
TOTAL
OTAL RETURNI
RET
RETURNING
URNING
URNI NG
PRICE CUSTOMERS
Product A Remove $xx 00

$xx.00 $xx.00 $xx.00 If you are a registered user, please
1
PROD - Promo Callout Request to Reset Your Password Received
Add to Wishlist enter your email and password.
IMG Item No: Add to Gift Registry *Email Address:
701643471799 InThanks
Stock for submittingyour email address. We’ve sent you an email with the information
Color: Red 3 needed to reset your password. The email might take a couple*Password:
of minutes to reach your
Size: 12 account. Please check your junk mail to ensure you receive it.
Edit Details Go to the homepage
Remember Me
Product B Remove $xx.00 $xx.00
Item No:
1 Add to Wishlist
PROD Login Forgot
IMG 701643471799 Add to G
Gift
ift Regi
Registry
g stry
y
Password?
P
Passwor
Pas
assword?
?
Color: Red P Od
Pre-Order
Order history
My Account - order history
1. Order header
This header includes the date the order was placed, the order status, and the order
Header number.
2. Order details
Order details include the ship-to address, item names, and order total. Gift certificate
My Account > Payment Settings email addresses are masked.
3. Paging
Order History 3
A maximum of 5 orders display on the order history page. When a customer has
placed more than 5 orders, paging elements display. When they click a page number,
Showing 1 - 5 of 7 Results 1 2 they are returned to the requested page.
When they click an arrow, the next or previous page displays. When they click a
double-arrow, the first or last page displays.
Date Ordered: 6/18/12 4 4. Order details action button

1 Order Status: Being Processed Order Details
Account When the customer clicks the Order Details button, they are returned to the order
Order Number: 00000190 details page (see Wireframe: My Account - order details), which shows the full order
navigation details for the order selected.
5. Multi-currency
2 Shipped to: Items: Order Total:
*****************re.com Gift Certificate $20.00 Orders are saved in the currency in which they were placed, and display in that
currency (using the respective currency symbol), regardless of the currency selected.
See the Wireframe: Header | global navigation | footer.

Danna Henry Product A $xxx.00
Product B

Help

Danna Henry Product C 5 $xxx.00
Product D
Product E
Persistent footer
My Account - order details
1. Order header
This header includes the date the order was placed, the order status, and the order
number.
Header
2. Order details
Order details include the item name and attributes (for example, color, size, item level
My Account > Order History > 00000188 discounts, pricing, and quantity ordered).
3. Billing/shipping summary
Order Summary This summary includes all billing and shipping information, payment totals, and the
payment method used to place the order.
ORDER INFORMATION BILLING ADDRESS PAYMENT METHOD PAYMENT TOTAL 4. Return to shopping
These links return the customer to the Home page.
1
Billings, MT 99003 ***********1111
Account United States Exp.01.2016 Order Discount - $24.60
Phone: 333-333-3333 Amount: $262.91
navigation Shipping Cost $28.99
Sales Tax $12.52
Shipment # 1
Black And White V-Neck Floral Dress 1 $128.00 3 Danna Henry

2
Content Size: 8 United States

Color: Black
Size: 14
<< Return to Order History Return to Shopping 4
Persistent footer
My Account - order details - multiple shipping
This displays order history with multiple shipments.

Header
My Account > Order History > 00000188
Order Summary

Billings, MT 99003 ***********1111
Account United States Exp.01.2016 Order Discount - $24.60
Phone: 333-333-3333 Amount: $262.91
navigation Shipping Cost $28.99
Sales Tax $12.52
Shipment # 1

Content Size: 8 United States

Color: Black
Size: 14
Shipment # 2
ITEM PRICE SHIPPING TO
Gift Certificate $20 Sent to:

To: Sarah [email protected]
[email protected]
From: Danna Henry Method: Delivery via Email
Persistent footer
Wishlist
Wishlist - unauthenticated user
Header 1. Customer login

Customers with accounts can login, which navigates them to their Wishlist (see
Wireframe: Wishlist authenticated user).
My Account > Order History > 00000188
* Remember Me checkbox: This saves the customer’s email and password informa-
My Account Login tion for future sessions.
* Forgot Your Password link: This navigates the customer to the password recovery
RETURNING CUSTOMERS 1 • required CREATE A WISHLIST window.
2. Create wishlist text
If you are a registered user, please enter your email and Create your very own Wishlist of items you would
This text is a content asset managed in Business Manager. This content asset is
password. like to have. You may share your list with family and
create-wishlist-benefits.
friends, or you can choose to keep it to yourself. 2
• Email Address 3. Create wishlist
Account Step 1 Register for an Account to create your own Unauthenticated customers can optionally create a wishlist. But this requires that they
Wishlist. create an account. When a customer clicks Create Wishlist, they are navigated to the
Navigation create an account page (see Wireframe: My Account - new user).
• Password Step 2 Find an item you’d like to add and click the
“Add to Wishlist” button. 4. Wishlist search
Wishlist search is performed for unauthenticated customers in the same manner as for
Step 3 You will be brought to your Wishlist where authenticated customers. A customer can search for a wishlist by email or name.
Login P Remember Me the item will be added.
Forgot Password? Create an Account 3
OR
FIND SOMEONE”S WISHLIST 4

Content
You can also search for other people’s wishlist using the
Wishlist Search.
Last Name First Name Email
Find
Persistent Footer
Wishlist - search results
Wishlist search results display as shown here. If no results are found, a message
displays: “No Wishlist has been found for your search for <search-terms>, please
Header try again”.
1. Wishlist global slot
The global slot name is wishlist-banner.
My Account > Global slot: wishlist-banner 1
2. Wishlist search
Customers can search for a wishlist by email or name. Wishlist search is performed
Find Someone’s Wishlist using last name, first name, or email address. The customer will only see the lists to
which they haves access. Text entry is not case-sensitive.
LAST NAME FIRST NAME EMAIL
3. Wishlist search results
2
When wishlist search results display, the customer can click View to see that wishlist
(see Wireframe: Wishlist - public view).
Account Find
navigation
Last Name First Name Location 3
Scott Maddison Concord, NH

George Victor Trembly, WI
Frank Wong Richmond, VA View
Content
Persistent footer
Wishlist - public view
1. Add to cart
When the customer clicks the Add to Cart button, the product is added to their cart
and the mini-cart opens with the added product..
Header
2. Out of stock Item
If an item is out of stock, the following message displays above the quantity.
My Account > Wishlist
Global slot: wishlist-banner This product is currently not available.
Find Someone’s Wishlist
Note: When the corresponding product for a wishlist item is deleted from a catalog,
LAST NAME FIRST NAME EMAIL the wishlist item no longer displays on the public wishlist.
Find 3. Multi-currency
When multi-currency is enabled, wishlist items reflect the price of the selected
currency. If a currency is not specified in the price book, the price displays as N/A.
See Wireframe: Header | global navigation | footer.
Account
Madison Scott’s Wishlist Print
navigation
PROD
Black And White V-Neck Floral Dress In Stock Date Added: June 22, 2012
IMG
Item No: 701643843428 Quantity Desired: 1
Color: Ivory & Black Priority: None
Size: 8
ADD TO CART 1
Price: $79.00 QTY: 1
2
V-Neck Dress This item is Date Added: June 22, 2012
PROD Item No: 701644130732 currently not Quantity Desired: 2
IMG Color: Black available. Priority: High
Size: 14
Price: $128.00 3 QTY: 1 ADD TO CART
Content
Gift Gift Certificate Date Added: June 22, 2012
Cert Priority: None
ADD TO CART
Persistent footer
Wishlist - authenticated user - no items
1. Wishlist address
This assigns a shipping address to the wishlist. Any wishlist product added to the cart
by a customer will have this address available as a shipping address during checkout.
Header
See Wireframe: Checkout.
2. Add gift certificates
My Account > Wishlist When the customer clicks the Add Gift Certificate button, the option for the customer
Global slot: wishlist-banner to purchase gift certificates is added to their wishlist.
3. Make private/public
Find Someone’s Wishlist When the wishlist owner clicks Make This List Public, their wishlist is now searchable
by all customers.
LAST NAME FIRST NAME EMAIL When the wishlist owner clicks Make This List Private, other customers can no
longer search for this customer’s wishlist.
The button text toggles Make This List Public to Make This List Private upon
Find clicking. A wishlist is private (nor searchable) by default.
Account
4. Adding items link
navigation Wishlist Shipping Address (Condo) 45 West St, Hilo, HI, 55555 1 This link navigates the customer to the home page.
5. Get share link
2
Add Gift Certificate
The customer clicks this to see the share link, which they can copy and paste into an
email.
Would you like Gift Certificates to appear on your Wishlist? Clicking “Gift Certificates” will let your friends and family
know this is something you want.
3 Make This List Private 4
Wishlist URL: https://customersite.net/Customer/showotherwishlist?WishListID=bccnciaagJ33AZWgdbf&lang=en_US
YOU HAVE NO ITEMS IN YOUR WISHLIST

Content
Click here to start adding items 5
Persistent footer
Wishlist - authenticated user
1. Wishlist search
Header Customers can search for another customer’s wishlist by entering the email address or
last name of a customer.
My Account > Wishlist 2. Social media/get share link
Global slot: wishlist-banner This is an integration with various social media applications. When the customer clicks
Find Someone’s Wishlist the mail icon, a window opens, showing a selection of mail applications.
LAST NAME FIRST NAME EMAIL Click the Get Share link to see the share link, which the customer can then copy and
paste into an email.
3. Priority
The customer can change a product’s priority level.
1 Find 4. Quantity desired
Account
The customer can set a specific quantity for a certain item. The value is set to 1 by
navigation default.
Wishlist Shipping Address (Condo) 45 West St, Hilo, HI, 55555 5. Make this item public
When the customer deselects this checkbox, the individual item is only viewable by
Add Gift Certificate the wishlist account holder.
6. Update
Would you like Gift Certificates to appear on your Wishlist? Clicking “Gift Certificates” will let your friends and family
When the customer clicks the Update button, the requested changes are made to the
know this is something you want.
Priority and Quantity fields.
7. Remove
When the customer clicks the Remove link/button, the item is removed from the
Make This List Private 2 wishlist.
Black And White V-Neck Floral Dress In Stock Date Added: June 22, 2012 8. Out of stock Item
PROD Item No: 701643843428 Quantity Desired: 1 If an item is out of stock, the following message displays above the quantity.
IMG Color: Ivory & Black This product is currently unavailable, please remove it from your list.
Size: 8 3 Priority Medium
Content Price: $79.00
The following message displays beside the product ID:
Edit Details Make this item Public P 5
This product is currently not available.
Update | Remove
4 QTY: 1 ADD TO CART Note: Actions such as Update, Priority, and Add To Cart do not display for wishlist
items that are not available because they have been deleted from the catalog.
9. Multi-currency
V-Neck Dress This product is Date Added: June 22, 2012
When multi-currency is enabled, wishlist items reflect the price of the selected
PROD Item No: 701644130732 currently Quantity Desired: 2
currency. If a currency is not specified in the price book, the price displays as N/A. See
IMG Color: Black unavailable
Size: 14 Priority High
Price: $128.00 8
This product is currently unavailable. Make this item Public P
Please delete it from the list. 6 Update | Remove 7
Edit Details
QTY: 1 ADD TO CART
Persistent footer
Gift registry
Gift registry - unauthenticated user
1. Customer login
Header
Customers with accounts can login. Once the customer is logged in they are
redirected to the registrant view, (See Wireframe: Gift registry - registrant(s) View).
My Account > Gift Registry 2. Create gift registry

Unauthenticated customers can optionally create a registry. But this requires that they
Gift Registry Login create an account. When a customer clicks Create Account, they are navigated to the
create an account page (see Wireframe: My Account - new user) and then returned to
RETURNING CUSTOMERS • required NEW CUSTOMERS the Wireframe: Gift registry - creation - event/participants.
3. Find a gift registry
If you are a registered user, please enter your email and Creating an account is easy. Just fill in the form below and
password.
p enjoy the benefits of having an account. The customer can search for a registry by entering the registrant’s first and last name
and the event type. The search submit navigates the customer to the results page.
Account • Email Address Create an Account Now See Wireframe: Gift registry - search results.
4. Advanced Gift Registry Search
navigation Create your very own Gift Registry of items you would like
When the customer clicks Advanced Search, hidden non-required search fields
to have. You may share your list with family and friends, or
display.
• Password you can choose to keep it to yourself.
The Advanced Search section is beneath the Find Someone’s Gift Registry section.
Step 1 Log in to see your Gift Registries OR
Register for an account to create your own Gift
1 Login P Remember Me Registry.
Step 2 Find an item you’d like to add and Click the

Forgot Password? “Add to Registry” button.
OR Step 3 You will be brought to your Gift Registry

2 where the item will be added.
Content
FIND SOMEONE’S GIFT REGISTRY • required
You can also search for other people’s Gift Registry using
the Gift Registry Search.
• Last Name • First Name Event Type Advanced Search 4
Select... Event Name Event Month Event Year
Advanced Search
Event City Event State Event Country
3 Find
Select... Select...
Find
Persistent footer
Gift registry - user’s registries
Header 1. Advanced search

When the customer clicks the Advanced Search button, the additional fields display.
2. New registry
My Account > Gift Registry
When the customer clicks the New Registry button, they are navigated to the create
Global slot: registry-header gift registry page (see Wireframe: Gift registry - Creation - Event/Participants).
Find Someone’s Gift Registry
3. View registry
LAST NAME FIRST NAME EVENT TYPE When the customer clicks View, they are navigated to the gift registry page for editing
(see Wireframe: Gift registry - Creation - Event/Participants).
4. Delete registry
1 Advanced Search When the customer clicks Delete a window opens asking them to confirm that they
would like to delete this registry.
Account Find
navigation
Create a new Gift Registry
2 New Registry
Your Gift Registries
EVENT NAME EVENT TYPE DATE LOCATION DETAILS DELETE
Maddie’s new baby Baby Shower 9/16/12 Hanover, MA 3 View Delete 4
Our Big Day Wedding 1/16/13 Windsor, CT View Delete
Content
Open house Other 7/30/12 Windsor, CT View Delete
Persistent footer
Gift registry - creation - event/participants
Header 1. Gift registry header slot

The global slot name is registry-header.
2. Event information
These fields provide details on event information.
1 Global slot: registry-header
Gift Registry 3. Participant information
These fields provide details on participant information.
2
EVENT INFORMATION • required
• Event Type Select...

Account
• Event Name
navigation
• Event Date
Example: 03/28/12
• State Select...
• Event City
3
PARTICIPANT INFORMATION • required
First Participant
• Role Select...
Content
• First Name
• Last Name
• Email
Second Participant
• Role Select...
• First Name
• Last Name
• Email
Continue
Persistent footer
Gift registry - creation - shipping
1. Event shipping
The customer must add addresses to the gift registry address fields in the same way
as for standard account addresses.
Header
The customer can add both pre- and post-event shipping addresses, or use the same
address for both. If the customer selects the Use Address for Post Event Shipping
checkbox, the application auto-fills the post-event shipping fields and disables them.
Any address added or modified in the gift registry is saved to the address book. Any
Global slot: registry-header address associated to with a gift registry cannot be deleted.
Gift Registry The Select an Address section continues as the customer scrolls down.
2. Post event shipping address
Pre-Event Shipping 1
The customer can click this button to use the same address for post-shipping that they
This address is the location where your register gifts will be sent before your event. Fill out the Post-event address if the used for pre-shipping, or specify a different address.
delivery location will change after your event.
Account
SELECT AN ADDRESS required
navigation
Select from Saved
Addresses Select.. .
• First Name
• Last Name
• Address 1 (APO/FPO)
Address 2
• Country Select..
• State Select..
Content
• City
• Zip Code
• Phone (Why is this required?)
Example: 333-333-3333
Post Event Shipping 2
The address is the location where your registry gifts will be sent after your event.
SELECT AN ADDRESS required
Use Pre-Event Shipping Address 2
Persistent footer
Gift registry - confirmation
After the customer has entered all the required information, the information displays
Header in a new window, asking for confirmation prior to allowing the customer to add
products.
If the customer clicks the Submit button, they are navigated to the gift registrants
My Account > Gift Registry page (see Wireframe: Gift registry - registrant(s) view).
Global slot: registry-header

Event Information
Verify the information you provided below is correct, then click on the “Submit” button to start
adding products to your registry!
Event Information
Registrant(s): Danna Henry

Account
Event Type: Other
navigation
Event Name: 50th Anniversary
Event Date: 01/16/03
Event Location: Phoenix, AZ US
Registrant(s) Information
Registrant: Danna Henry

[email protected]
Co-Registrant:
Shipping Address(es)
Pre-event Shipping: Danna Henry

Content 23 Frost St
Phoenix, AZ
22222
Post-event Shipping: Danna Henry

23 Frost St
Phoenix, AZ
22222
<< Previous Find
Persistent footer
Gift registry - registrant(s) view
1. Registry tabs
Header The customer can navigate to the event information by the tabs at the top of the page,
enabling them to modify event information.
2. Add gift certificates
When the customer clicks this button, a Gift Certificates item is added to the gift
Gift Registry registry.
3. Make private/public
1 registry event info shipping info purchases
When the registry owner clicks Make This List Public, their registry becomes
searchable by all customers.
2 Add Gift Certificates When the registry owner clicks Make This List Private, other customers can no
longer search for the registry.
Would you like Gift Certificates to appear on your Gift Registry? Clicking “Gift Certificates” will let your friends and The button text toggles Make This List Public to Make This List Private upon
Account family know this is something you want. clicking the button. A registry is private (not searchable) by default.
4. Multi-currency
navigation
When multi-currency is enabled, gift registry items reflect the price of the selected
3 Make This List Public currency. If a currency is not specified in the price book, the price displays as N/A (see
5. Priority
The customer can change a product’s priority level.
6. Remove
Our Big Day - 1/16/13 When the customer clicks Remove, the item is removed from the gift registry.
Black And White V-Neck Floral Dress In Stock Date Added: June 22, 2012 7. Quantity
PROD Item No: 701643843428 Quantity 1 The customer can set a specific quantity for a certain item. The value is set to 1 by
IMG Color: Ivory & Black default.
Size: 8 Quantity Purchased: 0
4 8. Make this item public
Price: $79.00
Edit Details 5 Priority: Medium When the customer deselects this checkbox, the individual item is only viewable by
the registry account holder.
Content Make this item Public P 9. Update
Update | Remove 6
When the customer clicks Update, the requested changes are made to the priority and
QTY: 1 quantity fields.
7 ADD TO CART
V-Neck Dress Out of Stock Date Added: June 22, 2012

PROD Item No: 701644130732 Quantity 1
IMG Color: Black
Size: 14 Quantity Purchased: 0
Price: $128.00
Edit Details Priority: High
High
Make this item Public P 8
10 Update | Remove
QTY: 1 ADD TO CART
Persistent footer
Gift registry - registrant(s) view - tabs
registry event info shipping info purchases When the customer clicks on a tab, the information displays for that tab. The
customer can edit this information.
1 1. Event information
2. Pre-event/post event shipping
• Event Type Select... 3. Purchases
• Event Name
• Event Date registry event info shipping info purchases
Example: 03/28/12 Pre-Event Shipping 2
• Country Select... This address is the location where your register gifts will be sent before your event. Fill out the
Post-event address if the delivery location will change after your event.
• State Select...
• Event City
SELECT AN ADDRESS • required
PARTICIPANT INFORMATION Select from Saved Select..
Addresses .
First Participant
• First Name
• Role Select...
• Last Name
• First Name
• Address 1 (APO/FPO)
• Last Name
Address 2
• Email
• Country Select..
Second Participant
• Role Select... • State Select..

registry event info shipping info purchases 3
• First Name • City
3
• Last Name • Zip Code Product
• Email • Phone V-Neck
(Why Dress
is this required?) Purchased By: Danna Henry
Example: 333-333-3333 PROD Item No: 701644130732 Date Purchased: 6/26/12
IMG Color: Black Quantity Desired: 5
Use this for Post Event
vent Shipping Price: $128.00 Quantity Purchased 1
In Stock
Post Event Shipping
The address is the location where your registry gifts will be sent after your event.
Lenox crystal vase Purchased By: Danna Henry
PROD Item No: 706789330784 Date Purchased: 6/26/12
SELECT AN ADDRESS IMG • required
Color: Clear Quantity Desired: 1
Price: $199.00 Quantity Purchased 1
In Stock
Gift registry - registrant(s) view - purchases
1. Quantity desired
Header Displays product’s desired quantity.
2. Multi-currency
When multi-currency is enabled, the currency of purchased gift registry items does
not change when the customer selects a different currency. Purchased items retain
the value and currency they had when they were purchased (see Wireframe: Header |
Gift Registry global navigation | footer).
3. Quantity purchased
registry event info shipping info purchases
When an item from a gift registry is purchased, the quantity that has been purchased
is reflected here. If the quantity desired number has been reached or exceeded, the
Product number display in red.
Account V-Neck Dress Purchased By: Danna Henry

IMG Color: Black 1 Quantity Desired: 5
navigation
Price: $128.00 2 Quantity Purchased 1
In Stock
Lenox crystal vase Purchased By: Danna Henry

IMG Color: Clear Quantity Desired: 1
Price: $199.00 Quantity Purchased 1
In Stock
3
Content
Persistent footer
Gift registry - search results
1. Advanced search
When the customer clicks the Advanced Search button, the entire registry search
Header window opens.
2. View registry
When the customer clicks View, they are navigated to the gift registry page (see
My Account > Gift Registry Wireframe: Gift registry shopper’s view).
Find Someone’s Gift Registry • required
• LAST NAME • FIRST NAME EVENT TYPE
Find
Advanced Search 1
Account
navigation Search Results
LAST NAME FIRST NAME EVENT TYPE DATE LOCATION
Henry Danna Other 1/15/13 Phoenix, AZ 2 View
Scott Maddison Concord, NH 9/15/12 Hanover, MA View
George Victor Trembly, WI 1/15/03 Windsor, CT View
Content Frank Wong Richmond, VA 1/15/03 Hartford, CT View
Persistent footer
Gift registry - shopper’s view
1. Print
Header When the customer clicks Print, the browser’s print dialog opens. Content print is
controlled via the print style sheet.
My Account >
Gift Registries
LAST NAME FIRST NAME EVENT TYPE
Select...
Advanced Search
Account Find
navigation
50th Anniversary - 1/15/13 1 Print
User Information
Role Other
Name Danna Henry
Event Information
Event Type Other

Location: Phoenix, AZ
Black And White V-Neck Floral Dress Date Added: 6/27/12

PROD Item No: 701643843428 Quantity Desired: 1
Content IMG Color: Ivory & Black Quantity Purchased: 0
Size: 8 Priority: Medium
Price: $79.00 $38.99
In Stock QTY: 1 ADD TO CART
V-Neck Dress Date Added: 6/27/12

PROD Item No: 701644130732 Quantity Desired: 2
IMG Color: Black Quantity Purchased: 0
Size: 14 Priority: High
Price: $128.00
In Stock QTY: 1 ADD TO CART
Persistent footer
Store locator
Store locator
5
1. Store Locator in header
Header The header is persistent throughout the web site. When a customer clicks the store
1
locator icon, they are returned to this page.
2. Radius
Store Locator
The customer can refine the search by using the zip code and finding stores within the
specified mile radius.
Find a Store Near You Note: The store locator uses the pipelet GetNearestStores, which supports both miles
and kilometers. The SiteGenesis application uses miles only, but can be modified
The Store Locator is designed to help you find the closest store near you. via this pipelet. The SiteGenesis application supports the zip codes for the USA and
Germany, but you can upload data for other countries.
3. Country
SEARCH WITHIN THE US AND SEARCH INTERNATIONALLY required These are the valid countries in which a merchant has a store. This is configurable in
Account CANADA required Business Manager.
• Country 4. State/province
navigation • Zip Code
Select... These are the valid states and provinces.
5. Search results
• Radius Search
5
This is a “No results” inline display message.
15 Miles
Header United Kingdom customers can now get all our latest
products online.
Search
Store Locator • State/Province

Select...
Content Find a Store Near You
Search
The Store Locator is designed to help you find the closest store near you.
We’re sorry, we couldn’t find results for your search 5
SEARCH WITHIN Persistent

THE US AND Footer SEARCH INTERNATIONALLY required
Account CANADA required
• Country
navigation • Zip Code
Select... 3
2 • Radius Search
15 Miles
United Kingdom customers can now get all our latest
products online.
Search
4 • State/Province
Select...
Content
Search
Persistent footer
Store locator - results
1. Store name hyperlink

The store name is configured in Business Manager. The store name is rendered
Header as a hyperlink. When the customer clicks this link, an AJAX module window opens
displaying specific details on the selected store (see Wireframe: Store details window).
2. Store location results
My Account > Store Locator > The application returns valid store locations based on the zip code/postal code, state/
province, or country selection from the store locator selection page. The application
Your Search found 4 stores returns the state/province, zip code, or country name used in the selection criteria from
the store locator selection.
< Back to Store Locator 3. Map
The Map link returns the customer to a third party application that provides mapping
and driving directions to and from the store. An example is Google Maps. This is the
2 location in the wireframe where you would implement this application.
All Stores In Zip 01803
Account
navigation STORE NAME ADDRESS DIRECTIONS
1 Khale Street Electronics (Store Details) 150 Winthrop Ave Map 3

Lawrence, MA 01843
United States
Champaign Electronic Shop (Store Details) 1001 Cambridge St Map

Cambridge, MA 02141
United States
Short Electro (Store Details) 333 Washington St Map

Content Boston, MA 02108
United States
Wire-Wire (Store Details) 584 Columbus Ave Map

Boston, MA 02118
United States
Persistent footer
Store details window
1. Store image
This image is configured by a merchant within Business Manager in the Store Image
Header attribute.
2. Store attributes
Store attributes include store hours, store manager, and store events. Merchants can
Store Locator > Search Results
add additional attributes to the store locator object to meet their requirements.
3. Close button
Your
Y
Yourr S
Search
earc
ea rch
rc
STORE DETAILS
h fo
found
f un
und
nd 4 st
stor
stores
tor
ores
es
3 When the customer clicks the Close button, the Store Details window closes and the
< Back to Store Locator store results display.
4. Map
This is the Google map, for example, that shows the store address on a map.
Account
Acc
count
Navigation
Nav igation STORE NAME
Content:
ADDRESS DIRECTIONS
S
1 Picture Khale
of theStreet Electronics (Store Details) 150 Winthrop Ave 4
Map
store Lawrence, MA 01843
Content: A
United States
MAP
Champaign Electronic Shop (Store Details) 1001 Cambridge St Map
Cambridge, MA 02141
United States
Short Electro (Store Details) 333 Washington St Map

Content
Content Boston, MA 02108
Demandware United States
10 Presidential Way Wire-Wire (Store Details) 584 Columbus Ave Map

2 Boston, MA 02118
Woburn , MA 01801
United States United States
Mon - Sat: 10am - 9pm

Sun: 12pm - 6pm
Persistent Footer
Men’s Denim Jeans $20 off!
All Men’s T-shirts are 2 for $40!
Customer service
Customer service
Header
This page is accessed by a persistent link in the footer.
1. Customer Service content
My Account > Payment Settings This content is managed in Business Manager. This page is dynamically generated
showing links to all content located in the Customer Service folder managed in
Welcome to Customer Service Business Manager.
The global content is cs-landing.
Contact Us
FAQs
1
Account Privacy & Security
navigation Privacy Policy

Security Policy
Ordering
Checkout
Changing/Canceling Orders
Valid Payment Methods
Shipping
Information About Shipping

Shipping Methods
Super Saver Shipping
Returns
Help Information About Returns
My Account
Managing An Account
Opening An Account
Terms & Conditions
Terms & Conditions of Sale
Persistent footer
Customer service - left navigation
Left pane navigation is persistent throughout the Customer Service area. The My
Account navigation links also display in the left pane.
1. Customer Service navigation
Customer Service This content is managed in Business Manager. The links are dynamically generated
from content located in the Customer Service folder managed in Business Manager.
Welcome to Customer Service All links display individual content assets located within the Customer Service folder
˅ CONTACT US and its subfolders. These subfolder create the different navigational areas.
1 FAQs
Contact Us
˅ PRIVACY & SECURITY
Privacy Policy FAQs
Security Policy
Privacy & Security
˅ ORDERING
Checkout Privacy Policy
Changing/Canceling Orders Security Policy
Ordering
˅ SHIPPING
Information About Shipping Checkout
Shipping Methods Changing/Canceling Orders
Super Saver Shipping Valid Payment Methods
˅ RETURNS Shipping
Information About Returns
˅ MY ACCOUNT Shipping Methods
Managing An Account Super Saver Shipping
Opening An Account
Returns
˅ TERMS & CONDITIONS
Terms & Conditions of Sale Information About Returns
My Account
Managing An Account
Opening An Account
Terms & Conditions
Contact us
Contact us - confirmation
1. Email message
This is an example of what a contact us email message would look like to the
Header customer.
Customer Service
Contact Us required
• First Name
• Last Name
Account
• Email
navigation
Phone
Order Number
My Question General Information
From: [email protected] Sent: Mon 6/25/2010 2:11 PM

Comment
To: Maddison Scott
CC:
1 Subject: Order Status
Demandware SiteGenesis
Help 5 Wall Street
Phone: +1.888.553.9216
Submit
Thank you for your inquiry
This email conforms that we received your message. We will contact you shortly if your message
requires a response
Name: Danna Henry

Email: [email protected]
Phone: 333-333-7789
My Question: Order Status
Comment: Can you please see why I can’t access my orders?
Persistent
erThanks!
sistent Footer
Tooltips and confirmation windows
Tooltips
1. Tooltip box
This is a simple hidden div that displays when the customer mouses over the tooltip
1 text. On mouse out the box disappears. The text within is provided either by a content
asset or a resource bundle.
Content asset or resource bundle 2. Tooltip text
Tooltip text goes here
Text for tooltips displays inside (); and the text within it is an underlined link that when
moused over, displays the tooltip div on the page. For example, (Tooltip). On mouse
out the display disappears.
2 (Tooltip)
Error messages
Errors - disabled cookies or JavaScript

Your Browser Is Not Currently Set to Accept Cookies or
1 ! check to see if you have another program set to block cookies? 1. Cookies error message
This notifies the customer that the browser is not configured to except cookies. This
message is displayed in div above the header.
Header 2. JavaScript alert
This notifies the customer that the browser is not configured for JavaScript. This
message is displayed in div above the header.
Your browser’s Javascript functionality is turned off.

2 ! Please turn it on so that you experience this sites full capabilities.
Header
Errors - client side on focus validation
1. Required fields
All required fields have client-side validation to ensure an entry has been made.
Header More in-depth field validation is performed upon submit. Client-side and server-side
validation errors display the same way.
2. On focus alert
My Account This notifies the customer that they skipped a required field. This style error occurs
Global Slot: account-banner when the customer moves the cursor to a new field without entering data in a
previously required field. This client-side error occurs before the customer clicks
Apply.
Create Account This error can also occur when the customer attempts to submit the form without
completing the required fields. The form is not submitted to the server until the
customer completes the required fields and again clicks the Apply button.
New Customer
3. Errors
Account If there is a client-side error, the general error form displays, and the form is not
NAME • required submitted to the server.
navigation 4. Apply button
1
After the customer clicks the Apply button, server-side form validation occurs.
• First Name
• Last Name
• Email yyy
yy
yyyee
y
The email address is invalid 2
• Confirm Email yyyee
The email address is invalid
• Password
Help
5 - 20 characters
Please add me to the Demandware’s email list.
Apply 3
Persistent footer
Errors - client side required field
The customer clicked the Apply button but the form was not submitted to the
server.
Header 1. Required fields
All required fields have client-side validation to confirm that the customer has at least
entered data. The validation is triggered if the field has lost focus and nothing has
My Account been entered. Required fields display with a bullet before the label.
Global Slot: account-banner 2. Required field error
This notifies the customer that they left a required field empty. The customer attempted
to submit the form without completing the required fields. The form is not submitted to
Create Account the server until the customer completes the required fields and then clicks the Apply
button.
New Customer
Account
NAME • required
navigation
2
1 • First Name
• Last Name
• Email
• Confirm Email
• Password
5 - 20 characters
Help
Apply
Persistent footer
Errors - server side invalid data
The customer clicked Apply, and the form was submitted to the server, but the data
was invalid
Header 1. Field label error
When a specific field is in an error state, its field label displays in red italics.
2. Field error alert
My Account
If a specific field is in an error state, a message displays alerting the customer to the
required action.
Create Account
New Customer
Account
NAME • required
navigation
• First Name
• Last Name
• Email
• Confirm Email
1 • Password 888H
5 - 20 characters 2
Help
• Confirm Password 888H
5 - 20 characters
Apply
Persistent footer
Errors - coupons
The customer can enter coupons on the cart or billing page. Errors occur when the
coupon does not exist or exists but does not apply.
Header
1. The coupon code does not exist
Coupon code “xxxx” is unknown displays beneath the Coupon Code field.
2. The coupon code does not apply, but exists (for the cart page only)
Not Applied displays in the TOTAL PRICE column (in place of Applied).
3. A coupon has already been applied
PRODUCT QTY PRICE TOTAL
PRICE Coupon code [promo code name] is already in your cart.

Item No: 1 Add to Wishlist
PROD
Color: Red In Stock
Size: 12
Edit Details
Product A Remove $xx.00 $xx.00 $xx.00

- Promo Callout 1 Add to Wishlist
PROD Item No: Add to Gift Registry
IMG 701643471799 In Stock
Color: Red
Size: 12
Edit Details
Coupon 2 Not Applied

Coupon Number:
Update Cart
ENTER COUPON CODE
Order Summary
Apply
1 Coupon code “xxxxx” is unknown

Global Slot: cart-footer CHECKOUT
Persistent footer
Errors - credit card submissions
All required fields have client-side validation to assure the customer made an entry.
More in-depth field validation occurs upon submit. Client-side and server-side
validation errors display the same way.
SELECT PAYMENT METHOD • required 1. Select a Credit Card
There is no error message for this field. Not selecting an existing credit card is always
an option.
Credit Card: PayPal: Bill Me Later:
2. Name on Card
1 • Select a Credit Card: Select from Saved Cards There is no error processing here unless the customer skips this field, This style error
occurs when the customer moves the cursor to a new field without entering data in a
2 • Name on Card: previously required field. This client-side error occurs before and after the customer
clicks Apply.
3 • Type: Visa 3. Type
4 • Number The customer must select a card type. Visa is selected by default.
4. Number
Invalid Credit Card Number
A possible error message is Invalid Credit Card Number. The field label and the error
message display in red,
5 • Expiration Date: January 2012
The Credit Card is expired 5. Expiration Date
A possible error message is The Credit Card is expired. The field label and the error
6 • Security Code ( What is this? ) message display in red.
Invalid Security Code
6. Security Code
A possible error message is Invalid Security Code. The field label and the error
message display in red,
Errors - coupon codes | gift certificate check balance
1. Apply button
Discount codes cannot be validated until the customer clicks the Apply button. Valid
ENTER COUPON DISCOUNT CODES
codes are automatically applied to the order amount. Invalid codes result in an error
message above each field.
2. Coupon errors
one at a time. If there is a balance remaining on your order, you will be able to add another coupon These coupon entry errors might display:
code or gift certificate after you click “Apply”. - Coupon code x is unknown.
- Coupon code X is already in your cart.
To apply a coupon code, enter the code below. Coupon codes may void existing promotions that - Coupon code “ECC-MEXA-RDTC-6D2Q-XRP9” can currently not be added to your
have already been applied. cart.
- <coupon code name> is invalid or qualifications have not been met.
Enter Coupon Code
3. Gift certificate errors
These gift certificate entry errors may display:
Apply 1 a. - Invalid Gift Certificate
If you wish to use a gift certificate to pay for some or all of your order, b. - Insufficient Funds on the gift certificate
2 Coupon code X is already in your cart.
Apply
3 $XX.XX has been discounted from your order. Remove
Errors - Bill Me Later
1. Date of Birth
The customer must enter their valid date of birth. The Continue button is not available
until all parts of the date are selected.
2. Last 4 digits of social security number
The customer must enter the last four digits of their social security number. The
Continue button is not available until the customer enters something.
The following error message displays after the customer clicks Continue if the entry is
invalid, for example, non-integer or less than four integers:
SELECT PAYMENT METHOD • required Your entry is invalid.
3. Agree to terms
Credit Card: PayPal: Bill Me Later: The customer must select the agree to terms check box to submit a payment. This
is unchecked by default. When the customer clicks the Continue button and this is
You must provide the date of birth and the last four digits of your Social Security Number
unchecked, an error message displays.
This field is required.
Date of Birth: Year Month q Day 1
4. Continue button
Last 4 digits of your If any of the required fields, date of birth, social security number, or the agree to terms
2
SSN# check boxes are not pre-filled or selected, the Continue button remains inactive.
Your entry is invalid.
When the customer clicks the Continue button and all required fields are selected or
filled correctly (and Bill Be Later is integrated), the platform passes the correct data to
Bill Me Later® is an open-end credit plan offered through Chase Bank USA,
the Bill Me Later Web Service, which authorizes or declines the customer’s request.
N.A. (The Bank). By using Bill Me Later to complete this purchase, you apply
for credit and you agree that you have read the Terms and Conditions; you
|||
authorize The Bank to review your credit report and you understand that this
account is subject to finance charges and late fees and is governed by
Delaware and Federal law. You authorize the Merchant to share your personal
information, including email address, with The Bank, and authorize The Bank
to use that information for all lawful purposes in connection with the account.
The Terms and Conditions of Bill Me Later® include the following:
E-Sign Consent
Important Disclosures
Account Agreement
• I have read and agree to the terms above 3
CONTINUE 4
Errors - confirm email address
When a customer enters a confirm email address on any form, the application
checks the spelling compared to the original email. If there is a difference, an error
message displays.
NAME • required
• First Name
• Last Name
• Email
• Confirm Email
The email address is invalid.
• Password
5 - 20 characters
Errors - purchasing gift certificates
1. Dollar amount exception
Header a. If the customer does not enter a correct amount, either on the low or high scale, an er-
ror displays asking the customer to enter the correct value. This error also occurs if the
customer enters non-numeric information.
My Account Gift Certificates b. If the customer does not enter the required information, an error message displays.
c. If multi-currency is enabled and the customer enters a valid gift certificate number
• Your Name
using the wrong currency, an error message displays. See the Wireframe: Header |
global navigation | footer.
• Friend’s Name
Account
• Friend’s Email
navigation Content = gift-details
• Confirm Friend’s Email
Message
• Amount
ADD TO CART
Gift Certificate can only be

1
purchased with a minimum of
5 and maximum of 5000.
Help Content = gift-check-balance
Check Balance
Content = gift-additional-details
Persistent footer
Error - login form cart
1. Customer account credentials

If the customer enters an invalid email address or password, an error message
Header displays (see Wireframe: Error: my account login).
2. Invalid coupon code
Cart
If the customer enters an invalid coupon code, an error message displays.
Global Slot: cart-banner
Your Shopping Cart Checkout
PRODUCT QTY PRICE TOTAL RETURNING

PRICE CUSTOMERS 1
Product A Remove $xx.00 $xx.00 $xx.00 If you are a registered user, please
- Promo Callout 1 Add to Wishlist
PROD enter your email and password.
701643471799 In Stock Sorry, this does not match our
Color: Red records. Check your spelling and try
Size: 12 again.
Edit Details
*Email Address:
1
Item No: Add to Wishlist
PROD *Password:
IMG
Remember Me
Login
Forgot
Product C Remove $xx.00 $xx.00 $xx.00 Password?
Item No: Add to Wishlist
PROD 1
IMG
Color: Red In Stock
Size: 12
Edit Details
CHECKOUT
Order Discount OPTIONS
New Customer
Global Slot: cart-footer Sign up for an account
Update Cart
8 Create an Account
or
Guest Checkout
ENTER COUPON CODE
Order Summary
account
Apply
Checkout As Guest
Coupon code “000” is unknown
2 << Continue Shopping CHECKOUT
Persistent footer
Error - my account login | order tracking
1. Login error messaging

If the customer enters an incorrect email or password, the appropriate message
Header displays. The messages in SiteGenesis are as follows:
a. Customer enters an incorrect email address and/or login ID on the My Account page:
“Sorry, this does not match our records. Check your spelling and try again.”
b. Customer is locked out because they reached the maximum number of attempts
My Account permitted by the Demandware platform: “Sorry, this does not match our records. Check
your spelling and try again.”
NEW CUSTOMERS c. Customer will be locked out if he or she performs one more invalid login: “Invalid pass-
RETURNING CUSTOMERS required word. This account will be locked after one more invalid logins.”
Creating an account is easy. Just fill in the form below and d. Locked customer attempts to login: “This account ID currently locked. Please try again
If you are a registered user, please enter your email enjoy the benefits of having an account.
and password. later.
Within Business Manager, merchants can view/manage locked out customers and
Create an Account Now
Sorry, this does not match our records. Check specify site-specific preferences for the maximum invalid login attempts, lockout
1 ! effective period and the login attempt reset time.
Account your spelling and try again. Benefits of Creating an Account
e. CAPTCHA
navigation • Email Address News and exclusive offers! When SiteGenesis pipelines (and controllers) are called too many times in a session, a
Sign up to receive email updates on special promotions, CAPTCHA displays that requires human intervention, and slows down any brute force
new product announcements, gift ideas and more. attack. For example, the customer logs in with bad credentials six times The first five
• Password display errors, but the sixth time also displays a popup asking the customer to confirm
Order History their humanity. Configure the retry count in Business Manager.
Receive important information about your order. You can 2. Track orders error messaging
even track it up to the minute it arrives.
Remember Me If the customer enters an invalid order number and/or billing post code, an error
P Faster Checkout message displays telling the customer:
Forgot Password? Save your billing and shipping information to make it easier “Your order number or billing zip code is incorrect. Please enter a correct order
Login to buy your favorite gear. number and valid postal code.”
(read more about security) See CAPTCHA above.
CHECK AN ORDER required
See your order even if you are not a registered user.

Help Enter the Order Number and the Billing Address Zip
Code.
! Sorry, this order number or postal code does

not match our records. Check your records
2 and try again.
• Order Number
• Order Email
Persistent footer
404 - missing page
Every effort has been made to not display a generic 404 page. For example, it does
not open when the product ID, content asset ID, or category ID is not found. It can
display for other situations, such as a fallback for unmapped legacy URLs.
Header
1. Noresults
This page not found error message displays for situations that are not covered by
specific error content or resource messages. This content asset is 404-callout.
REFINE SEARCH Missing Page 2. No search results
We’re Sorry… This text is from resources referenced by templates, and display instead of the above
˅ CONTACT US 5
We seem to have misplaced this page result in an unfortunate error: message for when a product ID, content asset ID, or category ID is not found. The
FAQs 1
(Page or File Not Found: 404 error), Please feel free to use the search resources are: search.nohits.message and search.nohits.searchlabel, found in the
below to assist you in finding what you were looking for. search.properties resource file and referenced by the nohits.isml template.
Privacy Policy 3. No results help
Security Policy We’re sorry, no products were found for your search: 66789 This is the content help message that displays when the product ID is not found, the
Try a new search: 2
content asset ID (for page display) is not found, or the category ID is not found.
˅ ORDERING
This content asset is noresults-help.
Checkout
Changing/Canceling Orders 4. Search box
Valid Payment Methods Try your search again using these tips:
This is standard search functionality.
˅ SHIPPING • Double check the spelling. Try varying the spelling. 5. noresults-bottom
3 • Limit the search to one or two words.
Information About Shipping This represents as content message that tells the customer how to contact customer
Shipping Methods • Be less specific in your wording. Sometimes a more general
service. This content asset is noresults-bottom.
Super Saver Shipping term will lead you to the similar products.
6. Customer service navigation
˅ RETURNS Try a new search: The standard customer service navigation displays.
Information About Returns 4
˅ MY ACCOUNT Go
Managing An Account
Opening An Account

Global Slot: noresults-bottom 5
Persistent footer
General error page
This page opens when an error occurs in the application.

1. Customer service navigation
Header
Standard customer service navigation displays.
2. Error message
REFINE SEARCH 1 This represents a content message that calls out to the customer what has happened
An Error Occurred as a result of an error. The content asset is error-callout.
˅ CONTACT US An error occurred in the application. Please try again and contact our call 3. Error banner
2 3
FAQs center if the problem persists. Feel free to use the search below to assist you This represents a global slot called error-banner, which is maintained in Business
in finding what you were looking for. Manager.
Try a new search: 4. Search box
Privacy Policy
Security Policy This is standard search functionality.
4
5. Customer service messaging
˅ ORDERING Go
Checkout This represents a content asset that notifies the customer how to contact customer
Changing/Canceling Orders service. The content asset is error-service.
Valid Payment Methods Executed Request: 6. Global slot
Page- This represents a content asset slot that can be a promotional message or a targeted
˅ SHIPPING
message to the customer, used to promote the brand. The slot name is error-promo.
Shipping Methods Error Details:
If you can’t find what you are looking for, why not let our trained staff recom- 5
˅ RETURNS mend something?
Our Customer Service Representatives are available now to help. Email us or call
˅ MY ACCOUNT 800-555-1212.
Managing An Account
Opening An Account

Terms & Conditions of Sale Global Slot: 404-promo 6
Persistent footer
Responsive web design
Home page
On the home page, the content slots display vertically, while the navigation menu and
cart display as icons.
1. Open menu
1 2 Customers click the Open menu icon to view the storefront menu. Depending on the
screen width, some of the slot content displays to the right of the menu.
2. Cart icon
Customers click the cart icon to view the cart. The number of items in the cart displays
to the right of the icon.
Slot = header-banner 3 3. Home page - flash carousel
Enter Keyword or Item # The carousel content slot is sized differently to fit in each of the four modes.
4. Home page
For the Small and Medium modes, the display fits into a single column. The graphics
automatically size based on the mode. The content slots (header-banner, home-bottom-
Slot = home-bottom-left left, home-bottom-center, home-bottom-right, and home-bottom) display vertically.
Slot = home-bottom-center
Slot = home-bottom-right
Slot = home-bottom
HOME MY ACCOUNT CHECK ORDER

HELP CONTACT US ABOUT US TERMS
© 2004-2016 Demandware or its affiliates. All rights reserved.

This is a demo store only. Orders made WILL NOT be processed.
Navigation
Responsive web design (RWD) is an approach that enables web-based applica-

tions to respond to a customer's behavior and environment based on screen size,
platform and orientation. SiteGenesis supports RWD with the following sizes:
• Small - viewport < 480px - displays in one column
• Medium - 480px < viewport < 768px - displays in one column
Enter Keyword or Item # Enter Keyword or Item #
• Large - 768px < viewport < 960px - displays in three columns
• Standard - viewport >= 960px - displays in three columns
> NEW ARRIVAL > NEW ARRIVAL Responsive web design pages in this document only describe details related to
functional or visual differences in these four modes. See the non-RWD pages for
> WOMENS > WOMENS additional details.
2
The Standard mode is a standard PC browser view. In general, the Standard and
> MENS CLOTHING Large modes provide similar visual functionality, while the Medium and Small modes
also provide similar visual functionality.
> ELECTRONICS JEWELRY 1. Header | global navigation | footer
Headers, global navigational elements, and footers display differently based on the
mode:
GIFT CERTIFICATES ACCESSORIES
- Small and Medium: the following elements display vertically in the navigation
area:
TOP SELLERS > MENS Stores
Login/Register
Slot content Wishlist
> ELECTRONICS Gift Registry
Stores - Large and Standard: displays icons on one line in the header.
GIFT CERTIFICATES - The last two lines (copyright and the “this is a demo” statement, display on two
1
separate lines for all modes except Small, where each line wraps to a second line.
Login/Register
Login 2. Category navigation
TOP SELLERS
Register The Small and Medium modes provide category navigational elements in a single
Logged-in customer column.
Slot Content
a. Click the arrow to view the main categories.
b. Click a main category to view subcategories.
Stores
Stores
Login/ Register
Customer Name
Login
My Account
Register
Check Order
Wishlist
Gift Registry
Logout
Search suggestion
1 1. One-column support
For Small and Medium modes, the search suggestion displays within the confines of
a single column.
shi 2. Select a suggestion
The customer can select a suggested article, category, or product name.
Other popular search queries
Looking for these brands?

Dunn
Categories
2
Dress Shirts in Clothing
Pages that might be interesting

Checkout
Managing an account
shirt
prod Shimmer Blouse

img
from $65.99
prod V-Neck Top

img
from $100nt
Search results breadcrumbs
1. Search breadcrumbs
For Small and Medium modes, the breadcrumbs display. The customer must click the
Header
menu open icon to search again.
Search Results
2. Search refinement
Your search results for “keyword 1
The customer can further refine their search via the search refinement dropdown.
term” > in Category > Refinement
3. Search Results
Slot = header-banner For Small and Medium modes, the search results display in one column.
3 4. Category Refinement
PROD
Best Matches 2 IMG For Small and Medium modes, the category refinements display beneath the search
results.
3
Floral dress
Search results
$xxx.00
Product Rating
REFINE SEARCH
q CATEGORY 4 PROD
IMG
u New Arrivals
u Womens
u Mens
Black and White dress
q COLOR
$xxx.00
Product Rating
q PRICE
$50 - $99.99
$100 - $499.99
q BY BRAND
Apple
Arlene
Persistent footer
Search results page
1. Page numbering - Small and Medium modes

For Small and Medium modes, the numbering displays as simple clickable numbers,
where the current page number is a different color from the rest; and the paging
Header Header displays one line after the search refinement dropdown.
When you configure SiteGenesis to use the infinite scroll feature (in Business
Manager), the page numbers do not display.
2. Page numbering - Large mode
Your search results for “keyword Your search results for “keyword term” > in Category > Refinement
term” > in Category > Refinement For large mode, the search refinement dropdown and navigation dropdowns and
icons displays the same as for the normal size page.
2 Best Matches 12 Showing 1 - 12 of 24 Results 1 2
Best Matches 3. Product grid - Small and Medium modes
1 2 3 4 1 For Small and Medium modes, the product grid defaults to 12 items (12 X 1) products
per page, which the customer cannot change.
4
4. Product grid - Large mode
Product Product For Large mode, the product grid defaults to 12 items (6 X 2), and the customer can
Product tile tile optionally view a different number of items per page.
tile 3
Product Product
Product tile tile
tile
Product Product
Product tile tile
tile
Best Matches
1 2 3 4 1 Best Matches 12 Showing 1 - 12 of 24 Results 1 2
Search navigation Search navigation
Persistent footer Persistent footer
Search results page - full article
1. Article name
For Small and Medium modes, the search term and not the article name displays in
the breadcrumb.
Header
2. Article text
For Small and Medium modes, the article text displays after the breadcrumb. This text
includes headers and formatting as defined within the content.
Your search results for "giftware" 1 3. Content search refinements folders
<< Back to Results For Small and Medium modes, the Customer Service content folders display after the
article.
2
Article text
3
REFINE SEARCH
CUSTOMER SERVICE
u Customer Service
Persistent footer
1. Category landing slot

For Small and Medium modes, the category-specific slot displays beneath the breadcrumb.
Header
2. Category search refinements
For Small and Medium modes, the category navigation displays beneath the category
Category landing slot. Category navigation can be sub-categories, color selection, price
selection, and/or new arrivals.
Category landing slot:

cat-landing-slotbanner 1
2
Category navigation
Persistent footer
Unsupported features
1. Product details - compare products

For Small and Medium modes, the compare checkbox does not display: compare
PROD products is not supported with these modes.
IMG For Large mode, the graphics are smaller than for Standard mode.
2. Quickview
Product name For Small and Medium modes, there is no Quickview functionality.
Price
Promotion
Product Rating
3. Alert on Approaching discount
For Small and Medium modes, the alert on approaching message does not display.
1
4. Last visited on the cart page
For Small and Medium modes, last visited details do not display on the cart page.
PROD
IMG 2
Product name
Price
Promotion
Product Rating
PROD
IMG
Product name
Price
Promotion
Product Rating
Product details
1. Display order
For the Small and Medium modes, the display fits into one column, with the order of
1 display as shown:
Header • Header
• Breadcrumb
• Product main image
• Alternate views
• Product name
Category > Sub-category > • Item #
Product Name • Main attributes
• Product rating
• Price
Add to Wishlist • Promotion
PROD
• Variations
IMG Add to Gift Registry 3 • Options
• Availability
• Quantity
• Add To Cart
• Add to Wishlist
PROD PROD You Might Like
• Add To Gift Registry
IMG IMG 4
• Social media
• Product tabs
• You Might Also Like
Description
• Footer
Product Name Special face cream. 5
See the Wireframe: Product details - page markup.
2. Text wrap - variations
Item #
Main Attributes For the Small and Medium modes, the variation selection text wraps if space is
Product Details required.
10 oz bottle 3. Text wrap - add to

For the Small mode, the add to selections wrap.
$X,XXX.XX $XXX.XX .
4. You Might Like
2
SELECT COLOR
Reviews For the Small and Medium modes, Next and Previous product recommendations
navigation displays in the You Might Like section, replacing the navigation scroll
Red arrows that are used for the Standard and Large modes.
For the Small and Medium modes, the tooltip just shows the product name when the
OPTION:
customer mouses over a You Might Like product display graphics.
[$0.00] None
5. Product details - tabs
Persistent footer
˂ For the Small and Medium modes, the product details tabs (You Might Like (described
Customer scrolls above), Description, Product Details, and Reviews) display vertically in one column.
AVAILABILITY to view more. See Wireframe: Product details - tabs.
˂
Select styles for Availability
QTY 1 ADD TO CART
Cart page
1. One-column display
For the Small and Medium modes, the display fits into one column, with the order of
display as shown:
Header 1 2. Product name
To change an order with a page resolution under 768px, the customer must click the
product name. The Edit Details link is not available.
3. Product information
<< Continue Shopping CHECKOUT For Small and Medium modes, product information displays in one column.
4. Gift certificate
For Small and Medium modes, gift certificate details display in one column. For Small
Global Slot: cart-banner mode, the "Gift certificate will be delivered by email" text wraps to the next line.
5. Checkout - account login
Product A The customer clicks the Checkout button and then they are navigated to the Checkout
2
PROD Item No: 701643471799 Login page. See the Wireframe: Responsive web design - checkout login (the next page).
IMG Color: Red
Size: 12
3 Order summary
Home Delivery
In Stock
Remove
1 Add to Wishlist
ENTER COUPON CODE
Add to Gift Registry
In Stock
$xx.00 $xx.00
$xx.00 Apply
CHECKOUT 5
Gift Certificate
4
Gift - Gift certificate will be Last Visited
Cert delivered by e-mail
Price: $100.00
To: Maddison Scott,
[email protected]
From: Danna Henry
1 Remove
Edit Details
Featured Products
$100.00
Order discount
˂
Persistent footer
Global slot: cart-footer Customer scrolls
˂ to view more.
Update Cart
Checkout - login
For the Small and Medium modes, these checkout login forms display vertically.
1. Returning customers
Header
The customer enters an email address and password and clicks Login. Upon
successful authentication, they are navigated to the Shipping Address page.
My Account 2. Guest checkout
The customer enters address details as an anonymous user.
Checkout Login
3. Create account
The customer is navigated to the Wireframe: User profile - personal data - new user.
RETURNING CUSTOMERS • required 1
4. Account help text
If you are a registered user, please enter your e-mail and The customer can read checkout help.
password.
• Email Address
• Password
Remember Me
NEW CUSTOMERS
Login Forgot Password?
Creating an account is easy. Just fill in the form below
and enjoy the benefits of having an account.
Or login with an external provider:
Create an Account Now 3

GUEST CHECKOUT • required 2 News and exclusive offers! 4
Sign up to receive email updates on special promotions,
You can checkout without creating an account. You’ll new product announcements, gift ideas and more.
have a chance to create an account later.
˂
Customer scrolls
Order History
Checkout ˂ to view more.
Receive important information about your order.
You can even track it up to the minute it arrives.
Faster Checkout
Save your billing and shipping information to make
it easier to buy your favorite gear.
(read more about security)
Account navigation
Need help content
Persistent footer
Cart - with bundle
1. Product information
For Small and Medium modes, product information displays in one column.
Product A
PROD Item No: 701643471799 1
IMG Color: Red
Size: 12
Edit Details
Home Delivery
In Stock
Remove
1 Add to Wishlist
In Stock
$xx.00 $xx.00 $xx.00
PROD
IMG
Product B
Item No: 701643471799
Home Delivery
In Stock
1 Included
In Stock
PROD
IMG
Product C
Item No: 701643471799
Home Delivery
In Stock
1 Included
In Stock
Cart - promotions - choice of bonus products

1
1. One column
Header For Small and Medium modes, the choice of bonus products window opens in one
column.
2. Window display
ChoiceOfBonusProductOnOrderOfAmountAbove100 2
Select Bonus Product The window overlays the product details page, which is not visible.
3. Multiple products
Multiple products display in vertical tiles.
<<Continue CHECKOUT
Shopping
Product Name
PROD Shipping surcharge
IMG Item # 000Product ID1
Color: Hematite
Edit Details
Home Delivery
In Stock
Remove
1 Add to Wishlist
In Stock
3
$xx.00 ENTER COUPON CODE

$xx.00
Product Name
PROD Shipping surcharge Apply
IMG Item # 000Product ID1
Color: Hematite CHECKOUT
Edit Details
Home Delivery 3 <<Continue Shopping
In Stock
Remove
1 Add to Wishlist Last Visited
In Stock
$xx.00 Featured Products

$xx.00
ChoiceOfBonusProductOnOrderOfAmountAbove100
2
Select Bonus Product
Update Cart
˂
Subtotal $xxx.00 Customer scrolls Persistent footer
Shipping Ground $xx.00 ˂ to view more.
Sales Tax $x.00
Estimated Total $xx.00
Checkout - step 1 shipping/method page
1 The information on this page is for a logged-in user unless otherwise indicated.
CATALOG NAVIGATION ˅
Header 1. Display order
For the Small and Medium modes, this is the display order.
2. Guest user
These fields do not display for a guest user.
Checkout 3. Address tooltip
STEP 1: Shipping > STEP 2: Billing > STEP 2: Place
Order For Small and Medium modes, the APO/FPO tooltip link does not display.
4. Phone tooltip
SELECT OR ENTER A • required SELECT SHIPPING METHOD • required For the Small and Medium modes, the Why is this required? tooltip does not display.
SHIPPING ADDRESS
5. Shipping methods tooltip
Ground: $7.99 ( Details ) 5 For the Small and Medium modes, the Shipping Methods tooltips do not display.
Select an Address: 6. Gift certificate
days)
For the Small and Medium modes, gift certificate details display as shown.
Select from Saved Addresses 2
• First Name
• Last Name
CONTINUE >
• Address 1
3 Content - cs-contact-number
Address 2
ORDER SUMMARY
• Country Shipment # 1
6
Select...
Gift Certificate
PROD Qty: 1 $100.00 SHIPPING - DELIVERY
• State 6 VIA EMAIL
IMG
Select...
• City Maddison Scott

Product B
PROD Color: Aqua ( [email protected] )
IMG Size: 12
• Zip Code
Qty: 1 $168.00
Shipment # 2
• Phone SHIPPING ADDRESS edit

4 Subtotal $118.98
Order Discount - $11.90 Danna Henry
Example: 333-333-3333 Edit Shipping Express $22.99 4 State St
Shipping Discount - $22.99 Billings, MT 59102
Add to Address Book 2 Customer ˂
United States
Sales Tax $5.35
scrolls
Customer
˂
˂ to view
scrolls more.
Persistent footer Persistent footer
Is this a gift?: ˂ to view
more.
Yes No
Checkout - step 2 billing/payment method page

CATALOG NAVIGATION ˅ • Number
ENTER GIFT CERTIFICATE OR
COUPON/DISCOUNT CODES The information on this page is for a logged-in user, unless otherwise indicated.
Header 1 Example: 4111111111111111 1. Display order
You may apply more than one coupon code
or gift certificate to your order, but you must • Expiration Date:
apply them one at a time. If there is a balance 2. Guest user
Checkout
remaining on your order, you will be able to January 2102 These fields do not display for a guest user.
STEP 1: Shipping > STEP 2: Billing > STEP 2: Place
add another coupon code or gift certificate
Order 3. Security code tooltip
after you click “Apply”. • Security Code
3 For the Small and Medium modes, the Security Code tooltip does not display.
SELECT OR ENTER A • required To apply a coupon code, enter the code below.
4. Gift certificate
BILLING ADDRESS Coupon codes may void existing promotions Save this card Date:
that have already been applied. For the Small and Medium modes, two shipments display if the order includes gift
certificates: one for the items and one for the gift certificate.
Choose an Address: CONTINUE >
Enter coupon code
• First Name Content - cs-contact-number

Apply
Danna
If you wish to use a gift certificate to pay for
• Last Name ORDER SUMMARY
some or all of your order, please enter your gift
Henry
certificate number and click “Apply”.
• Address 1
4 State St
Address 2
Apply
Order summary
• Coun
Country
C try
y
Check Balance
United States
• Stat
State
e
Montana
Shipment # 1
• City
Credit Card:
Billings SHIPPING - DELIVERY
Pay Pal: VIA EMAIL
• Zip Code
4
59102 Maddison Scott
Bill Me Later:
( [email protected] )
• Phone
777-678-0001
• Select a Credit Card
Shipment # 2
Example: 333-333-3333
• Email Select from Saved Cards 2
[email protected] 2 • Name on Card Name
Danna Henry
Add to Address Book
4 State St
Customer ˂
• Type Billings, MT 59102
Billin
Please add me to the Demandware email scrolls
United States
Unite
list. Demandware does not share or sell
Customer ˂ ˂ to view
personal info.
scrolls more.
See Privacy Policy
˂ to view
Persistent footer
more.
Checkout - step 3 place order
The Place Order page represents the final page on which customers can make
1 ORDER SUMMARY edit
Header changes to their order, including items in their cart, billing/shipping addresses, and
payment methods. The sales tax calculation is done using the standard Demand-
Subtotal $118.98 ware tax functionality and displays with the order summary.
Checkout Order Discount - $11.90
1. Display order
STEP 1: Shipping > STEP 2: Billing > STEP 2: Place Shipping Express $22.99
Order Shipping Discount - $22.99 For the Small and Medium modes, this is the display order.
Sales Tax $5.35 2. Gift certificate
To: Maddison Scott ( Order Total: $112.43
Gift [email protected] )
For the Small and Medium modes, two shipments display if the order includes gift
Cert From: Danna Henry
certificates: one for the items and one for the gift certificate.
Shipment # 1
SHIPPING - DELIVERY
1 $100.00 VIA EMAIL
2
Maddison Scott
Product B ( [email protected] )
PROD Item No: 701643471721
IMG Color: Aqua
Size: 12 Shipment # 2

1 In Stock
$xx.00 Danna Henry
4 State St
Billings, MT 59102
Content - cs-contact-number United States
Subtotal $118.98
BILLING ADDRESS Edit
Order Discount - $11.90
Shipping Express $22.99
Danna Henry
Shipping Discount - $22.99
4 State St
Sales Tax $5.35
Billings, MT 59102
United States

Customer ˂ PAYMENT METHOD Edit
scrolls
Content - cs-contact-number ˂ to view Pay Pal
more. Amount: $1,161.09
Persistent footer
Checkout - receipt page

1. Display order
1 Shipment #1
Header NEW CUSTOMERS • required For the Small and Medium modes, this is the display order.
Long Sleeve Crew 1 $14.99 Danna Henry 3
4 2. Print page
Neck 4 State St
Creating an account is easy. Just fill in the For the Small and Medium modes, there is no print receipt link.
Thank you for your order Item No: Billings, MT
701642811398 59102
form below and enjoy the benefits of having 3. Gift certificate
If you have questions about your order, we’re
Color: Fire Red United States
an account.
happy to take your call (888-555-1212) Monday - For the Small and Medium modes, two shipments display if the order includes gift
Friday, 8AM - 8PM 2 Size: L • First Name certificates: one for the items and one for the gift certificate.
Method: Express
Danna 4. Guest checkout
Order Summary Hoop Clip On 1 $26.00 Shipping Status:
Earrings Not Shipped • Last Name For the Small and Medium modes, the new customer account creation form displays
Order Placed Jul 12, 2012 Item No: after the shipment details and before the persistent footer on the guest checkout
Henry
Order Number 00000203 013742002881 receipt.
Color: Gold • Email
Danna Henry
[email protected]
4 State St Shipment #2
Billings, MT 59102 • Confirm Email
United States ITEM PRICE SHIPPING
Phone: 777-678-0001 TO
• Password
Danna Henry Gift Certificate $100.00 Sent To:
Visa To: Maddison Maddison
************1111 Scott Scott 5 - 20 characters
Exp.01.2016 [email protected] [email protected]
Amount: $xx.xx From: Danna
Henry • Confirm Password
Method:
Subtotal $40.99 Delivery
Via Email
Order Discount - $4.10 Create an Account
Gift Message
Shipping Express $16.99
Hey Maddie, thanks for all your help!!
Sales Tax $2.69 Persistent footer
Return to Shopping
Order Total: $xx.xx
Persistent footer
Shipment #1
Long Sleeve Crew 1 $14.99 Danna Henry
Neck 4 State St
Item No: Billings, MT
701642811398 59102
Color: Fire Red United States
Size: L
Method: Express
Hoop Clip On 1 $26.00 Shipping Status:
Earrings Not Shipped
Item No:
013742002881
Color: Gold
Return to Shopping
Persistent footer
Checkout - multiple shipping - step 1 shipping
Header
See Wireframe: Checkout - step 1 shipping/method page for information (in the
Responsive web design section) on standard page functionality. Multiple shipping
Checkout is an alternative checkout process that is parallel to single shipping. The customer
STEP 1: Shipping > STEP 2: Billing > STEP 2: Place can checkout the standard way, or perform an alternative checkout using multiple
Order shipping. In the cart, removing the “flag” that leads to this alternative shipping is all
that is required to remove the multiple shipping functionality.
SELECT OR ENTER A • required Note: You must enable multi-shipping via a Business Manager custom site prefer-
SHIPPING ADDRESS ence.
1. Multiple ship addresses
Do you want to ship to multiple
1
addresses? Yes Ground: $7.99 ( Details )
When the customer clicks the Yes button or the link, they are returned to the New
Shipping Address page (see Wireframe: Checkout - Multiple Shipping - step 1 new
Select an Address: shipping - logged in in the Responsive web design section ). The customer must enter
days)
information into the fields on this page.
Select from Saved Addresses
2-Day Express: $11.99 ( Details ) 2. Select from saved addresses
(Order received in 2 business days) This section only displays for a logged in customer.
Select 2

• First Name
• Last Name CONTINUE >
• Address 1
Content - cs-contact-number
Address 2
ORDER SUMMARY Edit
• Country
Product A
Select... PROD Color: Aqua
IMG Size: 12
• State Qty: 1 $xxx.00
Select... Gift Certificate

PROD Qty: 1 $xxx.00
IMG
• City
• Zip Code Product B

PROD
Color: Red
IMG
Size: 12
Customer ˂
• Phone Qty: 1 $xxx.00
scrolls
˂ to view
more. Subtotal $118.98
Example: 333-333-3333 Order Discount - $11.90
Edit Shipping Express $22.99
Add to Address Book Shipping Discount - $22.99
Sales Tax $5.35
Use this address for Billing Order Total: $112.43
Is this a gift?: Persistent footer
Yes No
Checkout - multiple shipping - step 1 shipping addresses

Header Each item in a multiple shipping cart is split into a quantity of 1, thus enabling a
customer to ship products to multiple recipients.
Header
1. Shipping address steps
Checkout When the customer selects multiple shipping addresses, the checkout process splits
5
Step 1: Shipping Addresses > Step 2: Shipping the shipping address selection task into two steps: the shipping address page and
Methods > Step 3: Billing > Step 4: Place Order
Add or Edit shipping method page.
1 Addresses • required
2. Order summary image view
Checkout Select an Address: The customer toggles the expansion to hide or show an image of the product.
ORDER SUMMARY Edit 3. Shipping addresses
Add New Address
PRODUCT QUANTITY SHIPPING
For a registered/logged in customer, all stored addresses display in the drop down
LOCATION
2 Product A list, with the default address displaying for each line item. If the Demandware platform
PRG is configured to support multi-shipping, and one or more items are from one or more
Product A Color: Fuscia
IMG wishlists or gift registries (with multiple items in the cart), the wishlist or gift registry
Price: Select 3 Memory Size: 2 GB
Qty: 1 $xx.00 • First Name item drop down lists display with their respective default addresses.
$xxx.00
Color: Add/Edit 4 For an unregistered customer, a message displays asking them to click the Add
Aqua Address New Address link to add a new address. Each address a customer adds via the Add
Gift Certificate • Last Name Address link is included in the drop down list for all line items. If there is no address
Item No:
999348876 Qty: 1 $100.00 in the address book, the drop down list does not display. It displays as soon as the
customer adds the first address.
• Address 1
Gift 1 [email protected] 4. Add or edit addresses
2
Certificate Product B
Qty: 1 $xx.00 By default, text boxes are empty. The customer can optionally save the address or
-$xxx.00 -
Address 2 cancel.
Delivered
Via Email 5. Add new address
Subtotal $118.98 • Country When the customer clicks the Add/Edit Address link, the Add or Edit Addresses
Product B window opens.
Order Discount - $11.90
Price: Select
Shipping Express $22.99 Select...
$xxx.00
Shipping Discount - $22.99
Color: Add/Edit
Sales Tax $5.35 • State
Red Address
Estimated Total $112.43
Item No:
Select...
999923472
Shipment #1
• City
SHIPPING - DELIVERY VIA
EMAIL
• Zip Code
Maddison Scott
CONTINUE > ([email protected]
Customer ˂ • Phone
scrolls
Content - cs-contact-number to view Example: 333-333-3333
˂ Persistent footer
more.
Add to Address Book
Save Cancel
Persistent footer
Checkout - multiple shipping - step 2 shipping methods
1. Shipments
CATALOG NAVIGATION ˅
SHIPMENT # 3 Each address that represents a shipping destination is split into a separate shipment
CATALOG NAVIGATION ˅ with a message “Shipment X” where X is the shipment number.
Select Shipping Overnight: $xx.00 (Orders 2. Shipment methods
Method:
Header The shipping method defaults to ground shipping. The customer can select the
appropriate shipping method. Once they select a shipping method, the shipment total
Product Quantity Shipping
is adjusted to match the updated shipping method.
Step 1: Shipping Addresses > Step 2: Shipping
Details
3. Promotional shipping message
Product 1 Jane Subtotal $118.98
PROD If a specific shipment qualifies for a shipping discount, the appropriate discount
B Curtis Order Discount - $11.90
Checkout IMG message displays.
- Promo 1 Dover Shipping Express $22.99 5
1 Callout St Shipping Discount - $22.99 4. Gift certificate shipment
SHIPMENT # 1
Item No: Fairbanks Sales Tax $5.35 Gift certificates will always be their own shipment, with the shipping method set to
2 999923472 AK Estimated Total: $112.43 Delivery Via Email. This cannot be changed.
Select Shipping Express: $xx.00 (Orders
Method: Color: 99701
5. Shipment calculations
Red USA
Shipment # 1 Each shipment has its own shipping charge. Upon entering the Shipping Method
Product Quantity Shipping
page, the shipping totals that display use the default shipping method, with the costs
Details SHIPPING ADDRESS Edit 6
Is this a gift?: Yes No reflecting the corresponding shipping charges to the shipment. If the customer selects
other shipping methods, the order totals are refreshed.
Product 1 Danna Dana Henry
PROD
A Henry Message
4 State St 6. Edit shipping
IMG
- Promo 4 State St Billings, MT 59102
3 The customer returns to the Wireframe: Checkout - Multiple Shipping - step 1 new
Callout St United States
You have 250 characters left out of shipping.
Item No: Billings,
999348876 MT 250 7. Continue
Method: Express
Color: 59102 The Continue button is positioned beneath the shipment details, above the contact
Aqua United 7 Shipment # 2 number and Order Summary..
States
CONTINUE >
SHIPPING - DELIVERY VIA
Is this a gift?: Yes No Content - cs-contact-number EMAIL
Message Maddison Scott

([email protected])
ORDER SUMMARY Edit
You have 250 characters left out of Shipment # 3
250 Product A
Color: Laurel
SHIPMENT # 2 1 Size: 10
Qty: 1 $xx.xx
Jane Curtis
Shipping Method: Delivery via Email 1 Dover St
Gift Certificate
Fairbanks, AK 99701
Product Quantity Delivery Qty: 1 $xx.xx
United States
Details
Product B Customer ˂
scrolls Me
Method: Overnight
Gift Gift Certificate 1 - Color: Aqua
Size: 12 ˂ to view
Cert - ($xxx.xx) Delivered Customer ˂
Qty: 1 $xx.xx more. Persistent footer
Maddison Scott - Via 4 scrolls
([email protected]) Email ˂ to view
more.
Checkout - multiple shipping - step 3 billing

ENTER GIFT CERTIFICATE • Number 1. Saved addresses
CATALOG NAVIGATION ˅ OR COUPON/DISCOUNT
CODES No information is stored for a guest by default. A logged in user can select a stored
address.
Example: 4111111111111111
Header You may apply more than one coupon code See Wireframe: Checkout - step 2 billing/payment method page - logged in user for
or gift certificate to your order, but you must page functionality.
• Expiration Date:
apply them one at a time. If there is a balance 2. Shipping addresses
Checkout remaining on your order, you will be able to January 2102
Step 1: Shipping Addresses > Step 2: Shipping This page shows the multiple shipping addresses.
add another coupon code or gift certificate
Methods > Step 3: Billing > Step 4: Place Order after you click “Apply”. • Security Code
SELECT OR ENTER A • required To apply a coupon code, enter the code below.
SHIPPING ADDRESS Coupon codes may void existing promotions Save this card Date:
that have already been applied.
Choose an Address: CONTINUE >

Enter coupon code
Content - cs-contact-number
• First Name Apply
Danna
If you wish to use a gift certificate to pay for
ORDER SUMMARY
• Last Name
some or all of your order, please enter your gift
Henry
certificate number and click “Apply”.
Order summary
• Address 1
4 State St
Shipment # 1
Address 2
Apply SHIPPING ADDRESS Edit 2
• Country
Check Balance Dana Henry
United States
4 State St
Billings, MT 59102
• State
Montana
SELECT PAYMENT METHOD • required United States
Method: Express
• City
Credit Card:
Billings Shipment # 2
• Zip Code Pay Pal:
SHIPPING - DELIVERY VIA EMAIL
59102
Bill Me Later:
Maddison Scott
• Phone
( [email protected] )
777-678-0001
• Select a Credit Card
Shipment # 3
Example: 333-333-3333
• Email Select from Saved Cards
[email protected]
• Name on Card Name
Jane Curtis
Add to Address Book
1 Dover St
Customer ˂
• Type Fairbanks, AK 99701
Please add me to the Demandware email scrolls
United States
list. Demandware does not share or sell
Customer ˂ ˂ to view
personal info.
scrolls more.
Method: Overnight
See Privacy Policy
˂ to view
more. Persistent footer
Checkout - multiple shipping - step 4 place order
See Wireframe: Checkout - step 3 - place order user logged in for general page
functionality.
1. Edit cart
When the customer clicks the Edit Cart link, they are returned to the cart page where
Header they can change the ordered quantity. The customer must navigate to return to the
Subtotal $118.98 place order page. See Wireframe: Checkout - Multiple Shipping - step 4 place order
Order Discount - $11.90 page.
Step 1: Shipping Addresses > Step 2: Shipping Shipping Express $22.99
Shipping Discount - $22.99 2. Edit shipping
Sales Tax $5.35 When the customer clicks Edit in one of the Shipping Address sections, they are
Order Total: $112.43 returned to the shipping methods page. See Wireframe: Checkout - Multiple Shipping -
Shipment # 1 step 1 new shipping.
For example, a customer purchases 1 item and is shipping this product to his brother.
Product A He decides that he would like to purchase 2 items and ship the second to his sister.
<< Edit Cart PLACE ORDER 1
Item No: 999348876 He updates the quantity to 2 of the item needed, then clicks the Edit link at the
PROD
IMG Color: Aqua shipping address to return to the Multiple Shipments page to split the order into two
Size: 12 shipments.
Content - cs-contact-number The default is that the place order page does not allow customers to split shipments.
1
In Stock $xx.00
ORDER SUMMARY Edit
Shipment # 2
To: Maddison Scott (

Gift [email protected] )
Cert From: Danna Henry Shipment # 1
SHIPPING ADDRESS Edit 2

1
$xx.00 Danna Henry
4 State St
Shipment # 3 Billings, enix, AZ 33456
United States
Product B
Price: $xx.xx Shipment # 2
PROD BILLING ADDRESS Edit
Item No: 999923472
IMG Color: Red SHIPPING - DELIVERY
Danna Henry
Size: 9 VIA EMAIL
4 State St
1
Billings, MT 59102
In Stock Maddison Scott
United States
$xx.00 ( [email protected] )
Customer ˂ Shipment # 3 Customer ˂ PAYMENT METHOD Edit

scrolls scrolls
Content - cs-contact-number ˂ to view SHIPPING ADDRESS Edit to view Pay Pal
˂
more. more. Amount: $1,161.09
Jane Curtis
1 Dover St
Fairbanks, AK 99701 Persistent footer
United States
Checkout - multiple shipping - order receipt

Header
1. Shipment
Thank you for your Each shipping address is split into a separate shipment, providing the customer with
Print Receipt an easy-to-read layout.
order.
If you have questions about your order, we’re happy to
take your call (888-555-1212) Monday - Friday, 8AM -
8PM
Order Number CREATE

00000102 ACCOUNT
Order Placed Nov 4, 2016

PAYMENT TOTAL Creating an account is easy.
Subtotal $XXX.XX Just fill in the form below and
enjoy the benefits of having Shipment # 1 details
Shipping Ground $X.XX
Sales Tax $XX.XX an account.
SHIPPING STATUS SHIPPING TO
Order Total $XXX.XX • First Name Not Shipped Dana Henry
Danna METHOD 45 Drivenroot Tr
PAYMENT METHOD Ground Billings, MT 59102
PayPal • Last Name United States
Amount: $XXX.XX Henry 333-333-3333
BILLING ADDRESS • Email

Dana Henry ITEM QTY PRICE
[email protected]
45 Drivenroot Tr
Billings, MT 59102 • Confirm Email Black And White 1 $XX.XX
United States [email protected] V-Neck Floral Dress
Phone: 333-333-3333 Item No 701643843428
• Password Color Ivory & Black
1 Shipment # 1 Size 8
PRICE
5 - 20 characters $XX.XX
• Confirm Password V-Neck Dress 1 $XX.XX

Item No 701644130732
Shipment # 1 details Color Black
Size 14
PRICE
Create an Account $XX.XX
1
Shipment # 2
Shipment # 2 details
Return to Shopping
Persistent footer
1. Display order
Header 1
Gift Certificates • required
Content = gift-details
• Your Name
Content = gift-check-balance
• Friend’s Name
Check Balance
• Friend’s Email
• Confirm Friend’s Email Content = gift-additional-details
Message
Content = account-nav-unregistered
or
Content = account-nav-registered
• Amount
Content = account-nav-text
ADD TO CART
Gift Certificate can only be Customer ˂ Persistent footer

purchased with a minimum of scrolls
$5 and maximum of $5000. ˂ to view
more.
User profile - returning customer
1. Display order
Header
My Account Login NEW CUSTOMERS
RETURNING CUSTOMERS • required Creating an account is easy. Just fill in

the form below and enjoy the benefits of
If you are a registered user, please enter having an account.
your
ourr email
you
yo emaill and
emai and password.
passwo
pas sword
rd Create an Account Now
• Email Address
News and exclusive offers!

• Password Sign up to receive email updates
on special promotions, new product
announcements, gift ideas and more.
Order History
Login Remember Me Receive important information about your
order. You can even track it up to the
Forgot Password? minute it arrives.
OR Faster Checkout
Login using your account from Save your billing and shipping information
to make it easier to buy your favorite gear.
(read more about security)
CHECK AN ORDER • required

˅ ACCOUNT SETTINGS
See your order even if you are not a Create an Account
registered user. Enter the Order Number
and the Billing Address Zip Code. ˅ SHOP CONFIDENTLY
Privacy Policy
• Order Number Secure Shopping
• Billing Zip Code Content = acount-nav-text
Customer ˂
scrolls Persistent footer
˂ to view
Check Status more.
User profile - landing page - returning customer
1. Display order
Header
1
This is the global content slot 'account-banner'
My Account | Danna Henry
(Logout)
Icon Personal Data

description
Icon Orders
description
Icon Addresses
description
Icon Wishlist
description
Icon Payment Settings

description
Icon Gift Registries

description
Account navigation
Content = acount-nav-text
Persistent footer
User profile - personal data
1. Display order
1 For the Small and Medium modes, this is the display order.
Header
This is the global content slot 'account-banner'
Edit Account (or Create Account)

New Customer
NAME • required
• First Name
• Last Name
EMAIL/LOGIN • required
INFORMATION
• Email
• Confirm Email
• Password
5 - 20 characters
Account navigation
Please add me to the Demandware’s

email list. Content = acount-nav-text
Demandware does not share or sell personal

info. See Privacy Policy Customer ˂ Persistent footer
scrolls
Apply
˂ to view
more.
User profile - addresses/payment methods/order history
1. Addresses
2. Payment methods
Header 1 Header 2 Header
3. Order history
My Account My Account My Account
This is the global content slot 'account-banner' This is the global content slot 'account-banner' Order History
1 2 3
Addresses Credit Card Information
Date Ordered: 6/18/12 Order Details
ADDRESSES Create New Address CREDIT CARD Add a Credit Card Order Status: Being Processed
INFORMATION Order Number: 00000190
Default Address
Exp.. Shipped to: Items: Order Total:
Fairbanks Delete Card [email protected] Gift
Jane Custis Certificate $20.00
1 Dover St Danna Henry
Fairbanks, AK 99701 Visa
Date Ordered: 6/18/12 Order Details
United States ************1111
Phone: 444-333-3321 Order Status: Being Processed
Exp.01.2016
Edit | Delete Order Number: 00000189
Delete Card
Account navigation Shipped to: Items: Order Total:

Billings Danna Henry Product A $xxx.00
Danna Henry Product B
4 State St Content = acount-nav-text
Billings, MT 59102
United States s Date Ordered: 6/18/12 Order Details
Phone: 333-333-3333 Persistent footer Order Status: Being Processed
Make Default | Edit | Delete Order Number: 00000121

Account navigation
Danna Henry Product C $xxx.00
Product D
Product E
1 2 3
Persistent footer
Account navigation
Persistent footer
User profile - order details
1. Order details
Header 1
My Account > Order History
Order Summary
ORDER BILLING PAYMENT PAYMENT TOTAL

INFORMATION ADDRESS METHOD
Order summary
details
Shipment # 1
Shipment # 1
details
Account navigation
Persistent footer
Wishlist - unauthenticated user
1. Unauthenticate user
Header 1
My Account/Wishlist
My Account Login
RETURNING
CUSTOMERS • required
CREATE A WISHLIST
If you are a registered user, please enter
your email and password. Creating an account is easy. Just fill in
the form below and enjoy the benefits of
• Email Address having an account.
Create your very own Wishlist of items

you would like to have. You may share
• Password your list with family and friends, or you
can choose to keep it to yourself.
• Step 1 Register for an Account to

create your own Wishlist.
Login Remember Me
• Step 2 Find an item you'd like to add
Forgot Password? and click the "Add to Wishlist"
button.
OR
• Step 3 You will be brought to your
Login using your account from Wishlist where the item will be
added.
FIND SOMEONE'S WISHLIST Create an Account
You can also search for other people's

wishlist using the Wishlist Search Account navigation
Last Name First Name Email

Customer ˂
scrolls Persistent footer
Find
˂ to view
more.
Wishlist - authenticated user
1. No items
1 2
Header Header Black And White V-Neck For the Small and Medium modes, this is the display order.
PROD Floral Dress
IMG Item No: 701643843428 2. Items
My Account > My Account > Color: Ivory & Black For the Small and Medium modes, this is the display order.
Size: 8
Find Someone’s Wishlist: Find Someone’s Wishlist: Price: $79.00 $38.99
Edit Details
Last Name First Name Email Last Name First Name Email
In Stock
Date Added: June 22, 2012
Quantity Desired: 1
Find Find
Priority: Medium
Wishlist Shipping Address Wishlist Shipping Address
Make this item Public P
(Hilo) 76 Stirling Ave, Hilo, HI 55555 (Hilo) 76 Stirling Ave, Hilo, HI 55555 Update | Remove
QTY: 1 ADD TO CART

Add Gift Certificate Add Gift Certificate
Would you like Gift Certificates to appear on Would you like Gift Certificates to appear on V-Neck Dress
your Wishlist? Clicking "Gift Certificates" will your Wishlist? Clicking "Gift Certificates" will PROD Item No: 701644130732
let your friends and family know this is let your friends and family know this is IMG Color: Black
something you want. something you want. Size: 14
Price: $128.00
Edit Details
Make This List Private Make This List Private Out of Stock
Customer ˂
scrolls
˂ to view Quantity Desired: 2
more.
You have no items on your Wishlist. Priority: High
Click here to start adding items. Make this item Public

Update | Remove P
Account navigation QTY: 1 ADD TO CART
Account navigation
Persistent footer
Persistent footer
Wishlist - search results/public view
1. Search results
2. Public view
Header 1 Header 2
1)
My Account > My Account >
Find Someone’s Wishlist Find Someone’s Wishlist

LAST NAME FIRST NAME EMAIL LAST NAME FIRST NAME EMAIL
Last Name First Name Location Find
Scott Maddison Concord, NH

George Victor Trembly, WI
Madison Scott’s Wishlist
Frank Wong Richmond, VA View
Black And White V-Neck

Find
PROD Floral Dress
IMG Item No: 701643843428
Color: Ivory & Black
Size: 8
In Stock Price: $79.00 $38.99

Quantity Desired: 1
ADD TO CART
Priority: None
QTY: 1
Account navigation
ADD TO CART
Account navigation
Persistent footer
Persistent footer
Gift registry - unauthenticated user
1. Unauthenticate user
Header 1
My Account >
Gift Registry Login
RETURNING
CUSTOMERS • required
If you are a registered user, please enter
your email and password.
• Email Address
NEW CUSTOMERS
Creating an account is easy. Just fill in

• Password the form below and enjoy the benefits of
having an account.
Create an Account Now

Login Remember Me
Create your very own Gift Registry of
Forgot Password? items you would like to have. You may
share your list with family and friends, or
OR you can choose to keep it to yourself.
Login using your account from • Step 1 Log in to see your Gift
Registries OR Register for an
account to create your own Gift
Registry.
FIND SOMEONE'S • required • Step 2 Find an item you'd like to add

GIFT REGISTRY and click the "Add to Registry"
You can also search for other people's button.
Gift Registry using the Gift Registry
Search • Step 3 You will be brought to your
Gift Registry where the item will be
• Last Name • First Name Event Type added.
Account navigation
Advanced Search
Customer ˂
Find scrolls Content = acount-nav-text
˂ to view
more.
Persistent footer
Gift registry - authenticated user
1. No registries
2. Registries
1 2 For the Small and Medium modes, this is the display order.
Header Header
My Account > My Account >
FIND Someone's Gift Registry: FIND Someone's Gift Registry:
• Last Name • First Name Event Type • Last Name • First Name Event Type
Advanced Search Advanced Search
Find Find
New Registry New Registry
Account navigation Account Navigation
Content = acount-nav-text Content = acount-nav-text
Persistent footer Persistent Footer

50th Other 1/16/03 Phoenix, View
Anniversary AZ
Maddie's Baby 9/16/12 Hanover, View

new baby Shower MA
Open House Other 12/1/12 Hilo, HI View
Our Big Day Wedding 1/16/03 Windsor, View

CT
Account navigation
Persistent footer
Gift registry - creation - event/participants
1. Event/participants
Header 1
Gift Registry
• Event Type
Select...
• Event Name
• Event Date
Second Participant
Example: 03/28/12 Role
Select... First Name
• State
Last Name
Select...
• Event City Email
Continue
PARTICIPANT • required
INFORMATION
Account navigation
First Participant
• Role Content = acount-nav-text
Select...
Customer ˂ Persistent footer
• First Name scrolls
˂ to view
more.
• Last Name
• Email
Gift registry - creation - shipping

Post Event Shipping
1. Event shipping
Header 1 The address is the location where your
registry gifts will be sent after your event. For the Small and Medium modes, this is the display order.
2. Post event shipping address
Gift Registry SELECT AN ADDRESS: • required The customer can click this button to use the same address for post-shipping that they
used for pre-shipping, or specify a different address.
Pre-Event Shipping
Use Pre-Event
This address is the location where your Shipping Address 2
register gifts will be sent before your event.
Fill out the Post-event address if the deliv-
Select...
ery location will change after your event.
• First Name
SELECT AN ADDRESS: • required
Select from Saved Addresses • Last Name
Select...
• First Name • Address 1
• Last Name Street Address, P.O. Box
Address 2
• Address 1
Apartment, Suite, Unit, Floor
Street Address, P.O. Box • Country

Address 2 Select...
• State
Apartment, Suite, Unit, Floor
Select...
• Country
• City
Select...
• State
• Zip Code
Select...
• City • Phone
Example: 333-333-3333
• Zip Code
Account navigation
• Phone
Customer ˂
scrolls Content = acount-nav-text
Example: 333-333-3333 ˂ to view
more.
Persistent footer
Gift registry - registrant(s) view
1. Registrant(s) view
1 event info 2
Header For the Small and Medium modes, this is the display order.
2. Tabs
See the Wireframes - Respon-
sive Web Design - Gift For the Small and Medium modes, the customer clicks the tab to view event, shipping,
My Account > Gift Registry Registry: Creation - Event/ and purchase information.
Participants
Gift Registry
registry
event info shipping info
shipping info
See the Wireframes - Respon-
sive Web Design - Gift
purchases
Registry: Creation - Shipping
Add Gift Certificate
Would you like Gift Certificates to appear

purchases
on your Gift Registry? Clicking “Gift
Certificates” will let your friends and
family know this is something you want. PRODUCT
Product A Purchased By
Make This List Private
PROD Item No: Danna Henry
IMG 701643843428 Date Purchased
Our Big Day - 1/16/16 Color: Black 6/27/12
Size: 8 Quantity Desired
Product A Price: $79.00 5
PROD Item No: 701643843428 In Stock Quantity
IMG Color: Ivory & Black Purchased
Size: 8 Gift Certificate 1
Price: $79.00 $38.99 Gift - Delivered via Email
Edit Details Cert Date Added: June 22, 2012
In Stock Product B Purchased By
Date Added: June 22, 2012 Priority: Medium PROD Item No: Danna Henry
Quantity 1 IMG 701643843428 Date Purchased
Quantity Purchased: 0 Make this item Public P Color: Red 6/27/12
Update | Remove Size: 8 Quantity Desired
Priority: Medium Price: $20.00 5
QTY: 1 ADD TO CART In Stock Quantity
Make this item Public P Purchased
Update | Remove 1
Account navigation
QTY: 1
ADD TO CART
Customer ˂
scrolls Content = acount-nav-text
˂ to view
more.
Persistent footer
Gift registry - search results
1. Search results
Header 1

Scott Sue Wedding
Advanced Search
Find
SEARCH RESULTS
Scott Sue Wedding 1/15/03 Concord, View

NH
George Rick Wedding 2/10/13 Trembly, View

WI
Frank Zi Wedding 11/10/12 Orem, View

UT
Account navigation
Persistent footer
Gift registry - shopper's view
1. Shopper's view
Header

Scott Sue Wedding
Advanced Search
Find
New Registry
Anniversary25 Other 1/15/16 Concord, View

NH
Kate and Jack Baby 2/10/16 Trembly, View

WI
Sue and Sam Wedding11/10/12 Orem, View

UT
Account navigation
Persistent footer
Store locator
1. Store locator
2. Store locator - search results
Header 1 Header 2
My Account > Store Locator

Find a Store Near You Your Search found 4 stores
The Store Locator is designed to < Back to Store Locator
help you find the closest store near
you.
SEARCH WITHIN THE US AND
CANADA STORE NAME ADDRESS DIRECTIONS
• Zip Code Khale Street 150 Winthrop Ave Map

Electronics Lawrence, MA 01843
(Store Details) United States
Radius
Champaign 1001 Cambridge St Map
15 Miles
Electronics Cambridge, MA 02141
Shop United States
Search (Store Details)
• State/Province Short Electro 333 Washington St Map

(Store Details) Boston, MA 02108
Select...
United States
Search
Wire-Wire 584 Columbus Ave Map
(Store Details) Boston, MA 02118
United States
SEARCH INTERNATIONALLY
• Country Account navigation

Select...
Search
United Kingdom customers can now get Persistent footer

all our latest products online.
Account navigation
Persistent footer
Site content
1. Customer service content

This content is managed in Business Manager. This page is dynamically generated,
showing links to all content located in the Customer Service folder. The global content
is cs-landing.
Header
Customer Service > 1
˅ CONTACT US
FAQs

Privacy Policy
Security Policy
˅ ORDERING
Checkout
Changing/Canceling Orders
˅ SHIPPING
Shipping Methods
˅ RETURNS
˅ MY ACCOUNT
Managing An Account
Opening An Account

Need help content
Persistent footer

101 0 6 SiteGenesisWireframe

Uploaded by

Copyright:

Available Formats

101 0 6 SiteGenesisWireframe

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

101 0 6 SiteGenesisWireframe

Uploaded by

Copyright:

Available Formats

Demandware: The SiteGenesis Annotated Wireframes

Copyright © 2016 Demandware, Inc. All Rights Reserved

Header | global navigation | footer

Global Slot: header-banner Country A 6 Header | global navigation | footer

Sub-Category-1 PROD GET SPECIAL OFFERS & NEWS 2. Search box

Note: The locals/countries must be enabled in Business Manager.

1. Global slot homepage main

GET SPECIAL OFFERS & NEWS ON LATEST STYLES 3 Email Address

Header Enter Key Word or Item # 3 Reference Resource

Search suggestion is a dynamic search list that displays automatically as the

Search results page - enhanced search suggestion

Best Matches 12 Showing 1 - 12 of 20 Results 1 2

Product Product Product

Product Product Product

Product Product Product

Product Product Product

Best Matches 12 Showing 1 - 12 of 20 Results 1 2

Search results breadcrumbs

Search results page

Best Matches 12 Showing 1 - 12 of 20 Results 1 2

Search results page containing articles

Header Reference Resource

Jump down to: Products Found | Articles Found 1

Products Found (7)

Best Matches 12 Showing 1 - 7 of 7 Results

Assume that products are online and searchable.

View All Articles 4

View all articles

4 Results 2. Content search refinements

Search results page - articles only

u Electronics We’ve found 7 Article(s) 1 4. No results informational content

Try a new search:

Search results page - articles only list

Your search for “demandware” resulted in no products.

Search results page - sort and pagination

1 CSS containers .searchresultsheader,

2 Best Matches 12 Showing 1 - 7 of 7 Results 1 2 6

Best Matches 4 1 2 3 4 5 6 > >>

Product name Product name Product name

3 Pricing Pricing Pricing

on the product type (variation, standard or product set). 5. Compare

Product tiles - pricing

STANDARD/SINGLE VARIATION PRODUCT STANDARD PRODUCT SALE/PROMOTION CSS containers .pricing

PROD PROD PROD

b. Product set price

Search results page - no results

“suit” Search results refinement: by category

BREADCRUMB BREADCRUMB BREADCRUMB

NAV COLUMN NAV COLUMN NAV COLUMN

Price refinement displays with

“Pants” Search results refinement: by attributes

Header Reference Resource

Your search results for “xxx” in Category

Best Matches 12 Showing 1 - 12 of 24 Results 1 2

Best Matches 12 Showing 1 - 12 of 24 Results 1 2

Banner slot CSS containers .search_refine,

Your search results for “xxx” in Category

Best Matches 12 Showing 1 - 12 of 24 Results 1 2

Clear 1. Selectable colors

Category landing page