Salesforce Commerce Cloud FSD Template

[customer] FSD 1
Salesforce Commerce Cloud e-Commerce Design

SiteGenesis Modifications for
add Customer Logo Here
Functional Specification Document (FSD)

Date goes here
Version goes here
Project Resources
Stakeholders
[customer] FSD 2
Related Documents
Introduction
About This Document
Audience
Overview
Glossary
Key Performance Indicators (KPIs)
Environment Configurations
Business Manager Roles and Users
Internationalization and Locales
Browser Compatibility
Browser Window Scaling
Accessibility
iFrames
Search Engine Optimization (SEO) and Site URLs
1.0 Header | Footer | Global Elements

1.1 Header – Global Navigation - Footer
1.2 Category Navigation
2.0 Homepage | Search | Article | Search Refinements

2.1 Homepage
2.2 Search Suggestion
2.3 Search Results Page – Enhanced Search Suggestion
2.4 Search Results Breadcrumb
2.5 Search Results Page
2.6 Search Results with Articles
2.7 View All Articles
2.8 Article Detail Page
2.9 Search Results Page – Article Only
2.10 Search Results Page – Article Only List
2.11 Search Results – Sort and Pagination
2.12 Product Tiles
2.13 Product Tiles - Pricing
2.14 No Search Results
2.15 Search Refinements
2.16 Size Refinement
2.17 Color Refinements
3.0 Category Page | Product Grid | Compare

3.1 Category Landing Page
3.2 Category Results Grid Display
3.3 Compare Bucket
3.4 Product Compare
4.0 Product Detail Page

4.1 Standard Product
4.1.1 Product Details – Product Single Variation
[customer] FSD 3
4.1.2 Product Details – Variation Product
4.1.3 Product Details – Variation Product with Options
4.1.4 Product Details – Product Set
4.1.5 Product Details – Product Bundle
4.1.6 Product Details – Page Markup
4.1.7 Product Details – Product Imagery
4.1.8 Product Details – Recommendation Scroll Carousel
4.1.9 Product Details - Pricing and Promotions
4.1.10 Product Details – Color and Size Selections
4.1.11 Product Details - Add to Cart
4.1.12 Product Details – Tabs
4.1.13 Product Details – Limited Inventory
5.0 Product Reviews

5.1 Product Details - Product Reviews
5.2 Product Review - Unauthenticated Customer Login
5.3 Product Review - Preview
5.4 Product Review – Submit
6.0 Quickview
6.1 Quickview – Standard / Single Variation Product
6.2 Quickview – Variation Product
6.3 Quickview – Product Set
7.0 Gift Cards | eCertificates

7.1 Gift Certificate Details Page
7.2 Gift Certificates in Cart
7.3 Gift Certificates Only In Cart – Checkout Billing
7.4 Gift Certificates Only In Cart – Place Order
7.5 Gift Certificates Only In Cart – Order Receipt
8.0 In-Store Pickup

8.1 In-Store Pickup: Product Details
8.2 In-Store Pickup: Quickview
8.3 In-Store: Enter Zip Code / Select Store
8.4 In-Store Pickup: Cart Page
8.5 In-Store Pickup: Shipping Addresses
8.6 In-Store Pickup: Shipping Method Page
8.7 In-Store Pickup: Billing Page
8.8 In-Store Pickup: Place Order Page
8.9 In-Store Pickup: Order Receipt Page
8.10 In-Store Pickup: Order History Page
8.11 In-Store Pickup: Order Summary Page
8.12 In-Store Pickup: Single-Shipping Page
8.13 In-Store Pickup: Single-Shipping with only In-store Pickup
9.0 Mini-Cart | Cart

9.1 Mini-Cart
9.2 Shopping Cart
9.2.1 Cart - With Bundle
[customer] FSD 4
9.2.2 Cart – Pricing and Promotions
9.2.3 Cart – Coupons
9.2.4 Cart – Bonus Products
9.2.5 Cart – Promotions – Choice of Bonus Products
9.2.6 Cart – Alert on Approaching Discount
10.0 Checkout – Returning Customers

10.1 Checkout Login
10.2 Checkout: Step 1 Shipping/Method Page - Logged in User
10.2.1 Checkout: Step 1 Shipping/Method Page – Multiple Countries
10.2.2 Checkout: Step 1 Shipping/Method Page – Shipping Promotions
10.3 Checkout: Step 2 Billing/Pay Method Page - Logged in
10.3.1 Other Payment Methods – Bill Me Later
10.3.2 Other Payment Methods – Paypal
10.4 Checkout: Step 3 Place order - User Logged In
10.5 Checkout – Receipt Page
10.6 Checkout: Order Receipt Confirmation Email
11.0 Checkout – Guest Checkout

11.1 Checkout: Step 1 Shipping Address/Method Page – Guest
11.2 Checkout: Step 2 Billing/Pay Method Page – Guest
11.3 Checkout: Step 3 Place Order - Guest
11.4 Checkout: Receipt Page – Guest
12.0 Order Summary

12.1 Order Summary – Costs and Discounted Details
13.0 Other Payment Methods

13.1 Other Payment Methods – Bill Me Later
13.2 Other Payment Methods – Paypal
14.0 Checkout: Multiple Shipping Address

14.1 Checkout: Multiple Shipping: Step 1 Shipping
14.2 Checkout: Multiple Shipping: Step 1 Shipping Addresses
14.3 Checkout: Multiple Shipping: Step 2 Shipping Methods
14.4 Checkout: Multiple Shipping: Step 3 Billing
14.5 Checkout: Multiple Shipping: Step 4 Place Order
14.6 Checkout: Multiple Shipping: Order Receipt
15.0 Purchasing Gift Certificates

15.2 Purchasing Gift Certificates – Gift Certificates only in Cart
15.3 Gift Certificates only in Cart – Checkout Billing
15.4 Gift Certificates only in Cart – Place Order
15.5 Gift Certificates only in Cart – Receipt
15.6 Purchasing Gift Certificates – Cart Multiple Products
16.0 My Account
16.1 My Account Login
16.2 My Account Landing – Returning Customer
16.3 My Account – Personal Data
[customer] FSD 5
16.4 My Account – Addresses
16.4.1 My Account – Add | Edit Address
16.5 My Account – Payment Method
16.5.1 Add | Edit Payment Method
16.6 My Account Left Navigation
17.0 Create An Account

17.1 Create Account
18.0 Reset Password

18.1 Password Recovery
19.0 Order History

19.1 My Account – Order History
19.2 Order History: Details
19.3 Order History: Multiple Shipping
20.0 Wish List

20.1 Wishlist – Unauthenticated User
20.2 Wishlist – Search Results
20.3 Wishlist – Public View
20.4 Wishlist – Authenticated User – No Items
20.5 Wishlist – Authenticated User
21.0 Gift Registry

21.1 Gift Registry – Unauthenticated User
21.2 Gift Registry: User’s Registries
21.3 Gift Registry: Creation – Event / Participants
21.4 Gift Registry - Creation - Shipping
21.5 Gift Registry - Confirmation
21.6 Gift Registry- Registrant(s) View
21.6.1 Gift Registry: Registrant(s) View - Tabs
21.6.2 Gift Registry: Registrant(s) View - Purchases
21.7 Gift Registry: Search Results
21.8 Gift Registry: Shoppers View
22.0 Store Locator

22.1 Store Locator
22.2 Store Locator - Results
22.3 Store Locator - Store Details
23.0 Customer Service

23.2 Customer Service – Left Navigation
24.0 Contact Us
24.1 Contact Us
25.0 Tooltips and Confirmation Windows

25.1 Tooltips
26.0 Error Pages

[customer] FSD 6
26.1 Errors: Disabled Cookies or Javascript
26.2 Errors: Client Side On Focus Validation
26.3 Errors: Client Side Required Field
26.4 Errors: Server Side Invalid Data
26.5 Errors: Coupons
26.6 Errors: Credit Card Submissions
26.7 Errors: Coupon Codes – Gift Certificate Check Balance
26.8 Errors: Bill Me Later
26.9 Errors: Confirm Email Address
26.10 Errors: Purchasing Gift Certificates
26.11 Errors: Login from Cart
26.12 Errors: My Account Login – Order Tracking
26.13 404 Missing Page
26.14 General Error Page
27. Responsive Web Design

27.1 Home page
27.2 Navigation
27.4 Search Results Breadcrumbs
27.5 Search Results Page
27.6 Search Results Page – Full Article
27.7 Category Landing Page
27.8 Unsupported Features
27.9 Product Details
27.10 Cart
27.10.1 Cart with Bundle
27.10.2 Cart: Promotions – Choice of Bonus Products
27.11 Checkout – Login
27.12 Checkout: Step 1 – Shipping / Method Page
27.13 Checkout: Step 2 – Billing / Pay Method Page
27.14 Checkout: Step 3 – Place Order
27.15 Checkout: Receipt Page
27.16 Checkout: Multiple Shipping – Step 1 Shipping
27.18 Checkout: Multiple Shipping Step 2 Shipping Methods
27.19 Checkout: Multiple Shipping Step 3 Billing
27.20 Checkout: Multiple Shipping Step 4 Place Order
27.21 Checkout: Multiple Shipping Order Receipt
27.23 My Account: Returning Customer
27.24 My Account Landing Page
27.25 My Account: Edit Personal Data
27.26 My Account: Addresses / Payment Methods / Order History
27.27 My Account: Order Details
27.28 Wish List: Unauthenticated User
27.29: Wish List: Authenticated User
27.30 Wish List: Search Results / Public View
27.31 Gift Registry: Unauthenticated User
[customer] FSD 7
27.32 Gift Registry: Authenticated User
27.33 Gift Registry: Creation – Event / Participants
27.34 Gift Registry: Creation - Shipping
27.35 Gift Registry: Registrant(s) view
27.37 Gift Registry: Shopper’s View
27.38 Store Locator
27.39 Site Content
[customer] FSD 8
Project Resources
Stakeholders
Name Role Company Email
[Customer]
[Customer]
[Customer]
[Systems Integrator/Partner]
Commerce Cloud
Commerce Cloud
Commerce Cloud
Related Documents
Document Title Company
Style Guide [customer]
UI Guidelines [customer]
Technical Specification Document (TSD) [Systems Integrator/Partner]
Data Mapping Documentation [Systems Integrator/Partner]

[customer] FSD 9
Introduction
About This Document
This document is intended to provide a framework and reference for the functional differences between the Commerce Cloud
SiteGenesis eCommerce reference storefront and the [customer] eCommerce custom Storefront solution. The [customer] eCommerce
site will be using the Commerce Cloud SiteGenesis application to provide the customer experience with slight modifications to the Site
Genesis experience. This document will identify the modifications made to Site Genesis components to meet the [customer]
eCommerce experience. Each component leverages a set of standard features and capabilities as provided by the Commerce Cloud
SaaS platform in conjunction with certain customizations and points of data integration as described herein.
The following conventions are used in this document:

Convention Description
Denotes Content Slot

Denotes Content Asset
Denotes a call out area
Requirement Denotes deviations from Site Genesis
Requirement Outstanding Requirement - Needs Architect
Guidance
Requirement Open Question
[customer] FSD 10
Audience
[customer] Business Stakeholders
[customer] Technical Team
Salesforce Commerce Cloud Project Team
QA Testers
Overview
The scope of this document is to capture and describe the functional differences between the Site Genesis eCommerce Reference
Storefront and the [customer] eCommerce website. Each section will specify the functional differences or deltas between the reference
site and [customer]. It is assumed that all functionality not included in this document will mimic that of SiteGenesis.
[customer] has provided/will provide a style guide. If differences exist between the annotated design provided in this document and the
style guide, the style guide will be the point of reference.
Glossary
List all acronyms and unique terminology used throughout this document in alphabetical order.
Type Description
BM Business Manager
BOPIS Buy Online Pickup In Store
CSS Cascading Style Sheets
HTML Hypertext Markup Language
ISML Internet Store Markup Language
PDP Product Detail Page
PLP Product Listing Page
SaaS Software as a Service
SAYT Search As You Type
SFCC Salesforce Commerce Cloud
SG SiteGenesis
[customer] FSD 11
Key Performance Indicators (KPIs)

List Client KPI’s here.
E.g., Sales Increase, Conversion Rate Increase, Average Order Value Increase, Shopping Cart Abandonment Rate Decrease, Shopping Funnel Improvements,
Performance Improvements, etc.
Environment Configurations
Business Manager Roles and Users
The following roles will be used by [customer] staff to manage the storefront using the Business Manager tool. See CC Recommended User Roles and
Permissions (xchange link) for a baseline to work from.
User Role Description Users – Staging Instance Users – Development Instance Users - Production Instance
E.g., Administrator
E.g., Marketer
E.g., Merchandiser
[customer] FSD 12
Internationalization and Locales
List all locales that are in scope for this release.
Site Name Locales
E.g., See locale list below for examples.
Locale Examples
Locale ID Locale Name
zh Chinese
zh_CN Chinese (China)
nl Dutch
en English
en_CA English (Canada)
en_FR English (France)
en_GB English (United Kingdom)

[customer] FSD 13
en_US English (United States)
fr French
fr_CA French (Canada)
fr_FR French (France)
de German
de_DE German (Germany)
it Italian
it_IT Italian (Italy)
ja Japanese
ja_JP Japanese (Japan)
pt_BR Portuguese (Brazil)
es Spanish
es_MX Spanish (Mexico)
es_ES Spanish (Spain)

[customer] FSD 14
Browser Compatibility
List all browser versions in each format that will be tested for compatibility.
Desktop Tablet Mobile
Browser Window Scaling
The site will scale to fit the pixel width of the browser window of each device type as follows:
Desktop Tablet Mobile

[customer] FSD 15
Accessibility
List all accessibility requirements. For more information refer to https://www.w3.org/standards/webdesign/accessibility
Requirement Description
iFrames
List all iFrames with the location in the storefront. Recommendation from SFCC is to minimize the use of iframes where possible.
Name Location
[customer] FSD 16
Search Engine Optimization (SEO) and Site URLs
Describe the approach for Search Engine Optimization. Will the client engage with a third party vendor to populate SEO information into Business Manager?
Will the client make use of search-friendly and user-friendly urls within the product records (pageDescription, pageKeywords, pageTitle, pageURL,
shortDescription) to help optimize the site’s ranking in search engine results by entering data in those fields and honing it over time?
How will client approach 301 Redirects/URL Mappings from Legacy site to New site?
Who will own this?
● Page Meta Title

● Page Meta Description
● Canonicalization
● Heading Tags
● Sitemaps
● Robots.txt
[customer] FSD 17
1.0 Header | Footer | Global Elements

[customer] FSD 18
1.1 Header – Global Navigation - Footer

Header – Global Navigation – Footer
1. Company Logo
2. Search Box
When the customer places the cursor in the Search box, the text disappears. When the
customer enters text into the Search box and clicks the Search icon, the customer is
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 him or
her to the search results page. The search box has search suggestions enabled (see
Wireframe: Search Suggestion).
3. Stores icon
The customer clicks this icon to navigate to the Store Locator page.
4. Login icon
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 user
name displays in a tooltip.
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.
11. Persistent footer

The footer remains persistent throughout the site. Each link points to either content
assets (set up within the Business Manager) or a specific pipeline. Each content asset
uses its literal name as its naming convention. For example, Terms will be terms. The
content asset for the persistent footer is called footer-copy
[customer] FSD 19
1.2 Category Navigation

Category navigation
1. Tabular category navigation

The application determines which of the root level child categories are sorted within
Business Manager. The tabular navigation is built using the online sorted list of child
categories at the root level. Child categories of the root that are online are displayed
using the showInMenu custom attribute in the tabular navigation. A category that is
offline, regardless of sort order, does not display. Unsorted categories can be linked
to within content assets, etc., as needed. When a customer clicks a tab, they are
navigated to that category.
2. Category menu
When the customer mouses over a top-level category, a menu displays showing the
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 menu closes and the customer is navigated to the subcategory landing
page that they Selected.
4. Content assets
The content asset, visually represented by a graphic or HTML, can link to a category
or subcategory page, product detail page, or a static page, for example, Gift
Certificates.
[customer] FSD 20
2.0 Homepage | Search | Article | Search Refinements

[customer] FSD 21
2.1 Homepage
Homepage
1. Global slot homepage main

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 assets that are configured in Business
Manager.
3. Email Address
The customer can enter an email address to opt-into a newsletter or other
email notification.
[customer] FSD 22

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

On the search results page, when enhanced search suggestions is
enabled, the breadcrumbs show the search phrase entered and the actual
phrase used.
See the Enhanced search suggestion documentation.

[customer] FSD 24
2.4 Search Results Breadcrumb

Search Results Breadcrumb
1. Search Results Message

The “Your search results for” message displays followed by the <keyword
term> that was entered in the search box. The keyword is linked to the
original search. Clicking the link removes any further refinements made by
the customer and the original results page reopens.
2. Sorted by message
The “Sorted by” message displays for search results based on fake
categories such as Top Sellers, which is not a category with assigned
products. It is a product search sorted by Top Sellers.
3. Category Refinement
Category refinements are linked to the category landing pages. Clicking a
category refinement link removes all refinements, including the searched
on term.
4. Refined Search Message

This element displays “refined by <Refinement attribute (s)>”.
5. Refinements
The refinements breadcrumb is formed as additional attributes are
selected. The specific refinements displays as a label for each attribute
(for example “color Blue X”).
The text “and” separates specific refinement where applicable (for
example, Color and Size). Specific values within these refinements are
separated with a comma.
6. Refinement Values
Each refinement value displays as text with an icon to its right. Clicking the
x removes that refinement from the breadcrumb and causes the search
results to relax. The page is then refreshed with the updated refinement
breadcrumb.
7. Breadcrumb Wrapped
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 the containing breadcrumb div.
[customer] FSD 25
Search Results Page

2.5 Search Results Page 1. Search Results Banner Slot
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

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>”>
The sort order depends on the sort configuration settings in Business

Manager (for product results). See Wireframe: Search Results Page
Containing Articles, for content results.
The search refinement navigation affects 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.

This is done via CSS.
4. Infinite Scrolling feature

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 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.
[customer] FSD 26
Search Results with Articles

2.6 Search Results with Articles Assume that products are online and searchable.
Note: An article is a content asset.
1. Articles Anchorlink
Clicking the Articles Found link navigates the customer 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 whenever a related article was
found. A maximum of 6 articles display at the bottom of product search
results, if more than 6 articles are returned, with a link to View All
Articles. Related articles display on every Search Results page,
independent of any paging or refinement.
3. Individual Article
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 results page (see Wireframe: View
All Articles).
[customer] FSD 27
View All Articles
This page opens either when the customer clicks the View All Articles
2.7 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”.
1. Back to Product Results

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 message “Your Search for “<keyword>”
resulted in no products” displays.
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 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.
[customer] FSD 28
Article Detail Page

2.8 Article Detail Page
1. Breadcrumb
The article name as defined in the Business Manager displays in the
breadcrumb.
2. Back to Results
Click the Back button to return to the previous page.
3. Article Body
The content asset body displays here. Styling can be done within the
HTML editor in the Business Manager.
4. Content Search Refinements Folders

This navigation is set by the library folder structure as defined in the
Business Manager. It acts the same as category navigation. In this case,
the Customer Service content folders display.
[customer] FSD 29
Search Results Page – Article Only
2.9 Search Results Page – Article Only The following elements can occur when there are only articles for search
results:
1. Articles found
The number of articles displays as a link. Clicking this navigates the
customer to the Articles list page.
2. Try again
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’.
3. Search Box
The standard search box displays, allowing the customer to enter another
search term if the list of articles does not meet his or her search needs.
The customer clicks Go to initiate the search.
4. No Results Informational Content

This content asset, maintained in the Business Manager, provides the
customer with the appropriate business information when the search did
not locate what he or she was looking for. The content asset is ‘noresults-
bottom’.
[customer] FSD 30
Search Results Page - Articles Only List
2.10 Search Results Page – Article Only List The following elements can occur when there are only articles for search
results:
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”.
1. Back to Product Results

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 message “Your Search for “<keyword>”
resulted in no products” displays.
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 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.
4. Paging
Paging is handled the same as for search results (see Wireframe: Search
Results Page - Pagination).The content asset is ‘noresults-bottom’.
[customer] FSD 31
Search Results – Sort and Pagination represents the total number of

products returned.
1. Search Results Header for Keyword
2.11 Search Results – Sort and Pagination This displays “home > Search Results for
“[keyword]”.”
6. Paging
This displays a maximum of 5
pages, with previous, next, first page
2. Sort By Drop down and last page icons, as appropriate
Clicking the drop down icon causes Best Matches based on position in the results set.
(default set in the Business
Manager) to display sorted by Name, Price and 7. Items per page drop down
Brand in ascending and descending order. Selecting this causes the
appropriate number of items to
3. Sort Selection display on the product grid.
Selecting a sort option from the drop down list
refreshes the product grid based on the selection 8. Items per page selection
(for example, Product Name [A-Z] sorts products in Selecting a number refreshes the
ascending order by product name within the grid). number of products in the grid. For
This sort is persistent as the customer pages example, if a search returns 27
through the results or adds more refinements, but products, 12, 24 and View All (27)
returns to the default if a new search occurs. display in the drop down list. If less
Changing the sort order causes the first results than 12 products the page bar is
page to open. disabled and the drop down list is
not shown. If more than 60 products
4. Paging Links result, View All is removed from the
When the customer clicks the page number, he or list. This selection should be
she is navigated to the selected page. Clicking persistent as the customer paginates
Previous navigates the customer to the previous through the results or adds more
page. Clicking Next navigates the customer to next refinements, but returns to the
page. Clicking the fi rst page icon navigates the default for a new search.
customer to first page of the results. Clicking the
last page icon returns customer to the last page of
results. When navigating to a results page within
page ranges that do not include the first or last
page, the selected page opens in the center,
allowing for 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
[customer] FSD 32
Product Tiles
This wireframe represents product thumbnail layouts and the functionality within a
2.12 Product Tiles search result grid and a category landing grid.
1. Color swatches
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 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 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. 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 Business Manager) displays.
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 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 promotion is active, the reviews area displays beneath the
pricing.
5. Compare
This enables the customer to compare similar products when locating a product
via guided search (see Wireframe: Compare products). Compare only displays on
the Category grid page.
6. Quickview
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 on the product type (variation, standard or product set). See
Wireframe: Quickview.
7. Width and height of the product container

The width and height for the product container is fixed and the overflow hidden
with the style sheet to assure that the grid will always display properly.
[customer] FSD 33
Product Tiles - Pricing
This wireframe represents the product search results display of pricing.

2.13 Product Tiles - Pricing All products are online and in stock.
1. Standard product
This shows the list price.
2. Standard product sale/promotion

This shows the list price and the promotion price side by side. The list
price has a strike through.
3. Variation master
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.
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: [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 represents a product bundle image, the standard image that
displays for the product bundle.
[customer] FSD 34
No Search Results
2.14 No Search Results 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.
2. Did You Mean

The application uses the spelling index to fi nd a suggested spelling for
the misspelled word.
Clicking this word causes the search results for the word selected to be
refreshed. Only one suggested word displays.
3. No Results Content
This content asset, maintained in the Business Manager, is intended to
instruct the customer on how to obtain better search results. The
content asset is ‘noresults-help’.
4. Search Box
The standard search box displays, enabling the customer to enter a
search term if the Did You Mean recommendation does not meet his or
her search needs.
5. No Results Informational Content

This content asset, maintained in the Business Manager, provides the
customer with the appropriate business information when no search
results occur. This links to other existing content assets. The content
asset is ‘noresults-bottom’.
[customer] FSD 35
Search Refinements
Refinements for search results display based on the deepest category in

2.15 Search Refinements the catalog tree that all products in the search result have in common.
For example, if there are products categorized in multiple top-level

categories, refinement options display based on the catalog root.
If the search results only contains products categorized in multiple

subcategories of the “Mens” refinement, options display based on the
“Mens” category.
By default, all refinements display as simple value lists.
Certain refinements, such as color and size, display with swatches using
CSS to render them. This custom logic is handled in a template.
Each refinement is expandable and collapsible, causing only the

refinement option to display or hide. By default, all refinements are
expanded.
[customer] FSD 36
Size Refinement
These refinement displays are controlled by appending CSS styles to the
containing div. If a size does not apply to the search results, it will not
2.16 Size Refinement display as possible refinement.
1. Size Refinement Selection

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.
Swatches can have three possible states: “selectable”, “selected” and “not
selectable”.
2. Selectable Sizes
Selectable sizes based on search results (and enabled) display with the
size number 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.
3. Selecting Sizes
After a customer selects an available size, the size swatch shows a blue
border, indicating to the customer the size has been selected. The product
grid refreshes, showing the products that match the size refinement. When
the customer hovers his or her mouse, the size swatch tooltip displays.
4. Selected Sizes
Multiple selected sizes display in bold. When customers select multiple
sizes, only 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.
[customer] FSD 37
Color Refinements
These refinement displays are controlled by appending CSS styles to the
containing div. The color refinement functionally behaves in a manner
2.17 Color Refinements similar to the size refinement.
1. Selectable Colors
Selectable colors based on the search results display as color swatches,
using CSS to render the actual swatches. A specific color swatch will have
its own CSS style, which is referenced dynamically. A default CSS style is
used so that colors can be rendered even if they do not have a specific
CSS style (for example, new refinement colors in the catalog).
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 these colors in the product grid. For example,
when the customer selects blue, green 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.
3.0 Category Page | Product Grid | Compare

[customer] FSD 38
Category Landing Page
The category landing page opens when a customer navigates the

3.1 Category Landing Page categories with 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 the Business Manager.
Note: Page templates support as many slots as required.
2. Category Search Refinements

The search refinements are created at the category level within the
Business Manager (see Wireframe: Results Refinement).
[customer] FSD 39
Category Results Grid Display
3.2 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 defined, the default product grid template is used. See
Wireframe: Product Grid Display.
1. Category Slot Banner

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 the Business Manager. If no banner is
defined for the category, a default banner displays, if defined. If not, the
product grid displays.
2. Search Refinements
Search refinements are defined at the category level within the Business
Manager (see Wireframe: Results Refinement).
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
For less than 12 items, “Showing 1-X items” displays. For more than 12
items, “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).
6. Paging
The paging bar provides the same functionality as in the Search Results
product grid (see Wireframe: Search Results).
[customer] FSD 40
[customer] FSD 41
[customer] FSD 42
Compare Bucket
The compare functionality enables the merchant to display a compare

3.3 Compare Bucket bucket within the search results, showing the items that are already being
compared and how many more items can be added to the bucket. The
compare bucket only displays after the customer has added an item to the
compare bucket list. Customers can remove a product from the compare
grid by clicking the checkbox again, or mousing over the product in the
compare list where an x displays, and clicking the thumbnail. Product Sets
and Bundles are not comparable.
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

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 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) 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 the addition of another item
removes the first product added. The Clear All button removes all items
from the compare list.
4. Compare Check Box

When the customer clicks 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 checks the box, adding the product to the
compare list. Both master products and variants can be compared; based
on what product displays when the product is added to the compare
bucket.
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.
[customer] FSD 43
Product Compare
1. Compare bucket select box

3.4 Product Compare This is the select box used to toggle the different active compare
categories. These categories are created in Business Manager. If a
customer selects one product or products that all follow the same category
path (for example, Catalog > Category > Subcategory), the select box
does not display.
2. Print button
When the customer clicks the Print button, the Product Comparison is
formatted into a printable version. The print view is controlled via a CSS
print style sheet.
3. Product rating
This element shows the customer ratings average for the product. The
customer cannot rate an item on this page.
4. Color swatch
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 change the color of the item displayed, but to view
the available colors.
5. Remove Item
Clicking Remove Item removes an item from the compare list and replaces
the product with a blank column. This remove functionality does not
perform a full page reload.
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 does not apply for the product, the comparison
displays as a “-”.
7. Responsive compare slots

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 window. When there are less than six items, each
item expands to take up more width.
8. Quickview
When the customer mouses over the product image, the Quickview
mouseover displays (see Wireframe: Search results: product grid display).
When the customer clicks the product image, they are navigated to the
Quickview module window (see Wireframe: Quickview).
9. Add to Cart
When the customer clicks the Add to Cart button, they are navigated to the
Quickview module window (see Wireframe: Quickview).
4.0 Product Detail Page

[customer] FSD 44
[customer] FSD 45
Standard Product
The product details page for a standard product has the same functionality
4.1 Standard Product as the product details page for a variation product, except that with a
standard product, only the main attributes display below the pricing. See
also Wireframe: Product details: product single variation and Wireframe:
Product details - tabs.
1. Product name
The product display name is defined in Business Manager and controlled
via CSS to assure the length and height fi t within the area.
2. Item number
The product display ID (sku) is defined in Business Manager.
3. Pricing
See Wireframe: Product details: pricing and promotions.
4. Main attributes
These are standard attributes designated to display within this area of the
page. They display with the standard metadata. No customization is
required.
5. Promotion details
This is a tooltip that upon hover opens the promotion details configured in
Business Manager.
6. Product thumbnail images

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 changes to the thumbnail that was clicked.
7. Availability messaging
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.
8. Social media
This is an integration with various social media applications. When the
customer clicks the mail icon, a window opens, showing a selection of mail
applications.
9. Tooltips
The customer hovers their mouse over the social media icons, and the
Add this product to the Wishlist and Add this product to Gift Registry icons,
and the respective tooltip displays.
[customer] FSD 46
Product Details – Product Single Variation
4.1.1 Product Details – Product Single Variation 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 standard product with a special rendering. All
other visible attributes display here (see Wireframe: Product detail page
makeup).
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 the thumbnail that was clicked.
2. Product name
The product display name is defined in Business Manager. Product name
display is controlled via CSS to ensure that the length and height fi t within
the area.
3. Item number
The product display ID (sku) is defined in Business Manager.
4. Pricing
5. Single variation attributes

These attributes for size and color are designated as variation attributes,
but only have a single variation. This enables merchants to customization
the look.
If a product is on backorder, availability messaging shows the date if it is
known;
[customer] FSD 47
Product Details – Variation Product
4.1.2 Product Details – Variation Product A product is either a master product or a variant (as configured in
Business Manager). If the product is a master, no variation attributes are
pre-selected. If the product is a variant, the variation attribute values for
that variant are pre-selected. No other information to pre-select variation
attributes can be passed (for example, color). If the product is a master,
then the image defi ned as the master image displays. See
Wireframe: Product details - product imagery.
1. Quantity based pricing

This displays the pricing options for different quantities. It is identified in
Business Manager at the pricebook level (see Wireframe: Product details:
pricing and promotions).
2. Promotions
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).
3. Color selection
This is populated with available colors, with the selected color indicated.
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.
5. Size chart
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.
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 variation is configured.
[customer] FSD 48
Product Details – Variation Product with Options
4.1.3 Product Details – Variation Product with Options All option and variation selections update the product information without a
full page refresh.
1. Default variation display

If no custom display is defined for a variation attribute, the variation
displays as a standard select box. When a customer selects a variation,
the server is updated and the product displays without a full page refresh.
If nothing is selected, the default text is: “Select <Attribute Name>“.
2. Product option display

Options display as a standard select box. Selecting an option here
updates the price without a full page refresh. When the page opens, the
default option is preselected on page open.
[customer] FSD 49
Product Details – Product Set
4.1.4 Product Details – Product Set Individual product names are clickable and will navigate the customer to
that product’s detail page.
1. Product set image

A larger image of the entire product set displays to the left of the individual
items within the product set.
2. Product thumbnail
This shows a thumbnail of the product along with the product name and
appropriate variations for the product.
3. Product variations
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 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 master for all
products displays.
4. Add to cart
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.
5. Set individual product pricing

Standard pricing and promotional pricing display (see Wireframe: Product
details: pricing and promotions).
6. Add All to Cart

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 the entire outfit to the cart and
the price are not enabled/displayed until the customer configures all
variations.
[customer] FSD 50
Product Details – Product Bundle
4.1.5 Product Details – Product Bundle 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 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.
1. Price
This is the price for the entire bundle. It uses standard pricing and
promotional display (see Wireframe: Product Details: Pricing and
Promotions).
2. Add to Cart
Add to cart is enabled for all variations selected for the bundle, enabling
customers to add the product to the cart.
[customer] FSD 51
Product Details – Page Markup
4.1.6 Product Details – Page Markup The product detail page includes the following components:
• Product main Image
• Product alternate images
• Product name
• Item number
• Visible attributes (attributes assigned to MainAttributes)
• Similar product images (Previous and Next)
• Pricing
• Promotional callout message (defined in Business Manager)
• Color swatches (colors the product comes in, regardless of availability)
• Size (sizes the product is available in, regardless of availability)
• Other variants for products, for example, Show width.
• Product availability
• Quantity
• Add to Cart button
• Social media icons
• Add to Wishlist
• Add to Gift Registry
• Recommended items (cross-sells defined in Business Manager)
• Product tabs
These attributes are assigned to the MainAttributes attribute group. All

other attribute groups display on the product details tab.
[customer] FSD 52
Product Details – Product Imagery
4.1.7 Product Details – Product Imagery 1. Previous and Next product

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 list, only Next displays. If the product is
the second product in the list, only Previous 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.
2. Product main image

The Main image stored within Business Manager as a standard image.
3. Alternate image
An alternate image can be stored within Business Manager as a custom
attribute for an alternate image. When the customer clicks the alternate
image, the alternate image replaces the product main image.
4. Image display for multiple variations

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 a combination is not found, the Commerce
Cloud 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.
[customer] FSD 53
Product Details – Recommendation Scroll Carousel
4.1.8 Product Details – Recommendation Scroll Carousel This is a customer-controllable display based on the same code that
controls the carousel/scroller on the homepage. How many products
display and how they 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
If the customer mouses over the product display, a Tool Tip displays with a
more detailed product display for that product, as seen to the left (see
Wireframe: Tooltips).
[customer] FSD 54
Product Details - Pricing and Promotions
1. Standard Price Display

4.1.9 Product Details - Pricing and Promotions If a product has no sales price or promotions, the price displays in this fashion, with
the price visual display handled within the CSS (for example, red text or strike
through). This is the lowest price book price.
2. Sale/promotion price
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 product has a list price, sales price, and promotion price, only two prices display:
the sales price or the promotion price on which the sales or promotion price is based.
3. Tiered pricing
If a product has tiered pricing, prices display here. If a product has a promotion, then
promotion price. If this behavior is not supported, then the value displays as “X-X
Items 10% off” with no price.
4. Promotion message
Product promotional messaging displays in this area. The promotions that displays is
determined by promotion ranking. This is also where a bonus product(s) promotion
(not choice of bonus products) displays.
5. Multi-currency pricing
a. Currency symbol: When multi-currency is enabled and the customer changes the
currency, the currency symbol and the pricing, as defined in the associated price
book, also change.
b. Option pricing:
Option prices change when the customer selects a different currency. If an option (or
option price) is not defined for one option in a set of options for a selected currency,
then that option does not display in the dropdown. If an entire set of options (or prices
for an entire set of options) is not defined for a selected currency, then the entire
option dropdown does not display for that currency.
See the Wireframe: Header | global navigation | footer.
6. Bonus product selection window

If a customer adds a product to the cart that makes him or her eligible for a Choice of
Bonus Product discount, a window opens asking if they would like to select bonus
products. If they click Select Bonus Product, the bonus product selection window
opens. If they click No Thanks, the window closes. The customer still has the option
of selecting the bonus products for which they are eligible in the cart.
[customer] FSD 55
Product Details – Color and Size Selections
4.1.10 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 to match the inventory of the selected swatch. The
display of unavailable attributes is controlled within the CSS.
1. Color
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 the swatch. Color or color swatches
are controlled via CSS with background color or images; as are the
different button states.
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”.
[customer] FSD 56
[customer] FSD 57
Product Details - Add to Cart
1. Add to Cart
4.1.11 Product Details - Add to Cart For each master product, default variants such as size and color are
automatically selected. The customer can click Add to Cart and order one
or more products based on the selections, or change the selections and
then click Add to Cart. You can set the defaults in Business Manager for
each master product. If there is no default set, the Commerce Cloud
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
If an authenticated customer clicks Add to Wishlist, the product is added to
their wishlist. A non-authenticated customer is navigated to the Wireframe:
User profile - personal data - new user. This is only enabled for a valid
selected variation product.
[customer] FSD 58
Product Details - Tabs
4.1.12 Product Details – Tabs These dynamic tabs, defined within the ISML template, display a variety of
product data across the entire page width. Developers can add custom
tabs or modify the following standard tabs.
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

When the customer clicks this tab, information from all other attribute
groups except MainAttributes display.
4. Tab title - Reviews

When the customer clicks this tab, a graphic displays as a placeholder.
Developers can integrate their product reviews system here.
[customer] FSD 59
Product Details – Limited Inventory
4.1.13 Product Details – Limited Inventory 1. Availability Prompt

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.
The customer can still add the items to the cart by clicking the Add to Cart
button.
2. Add to Cart Quantity

If the quantity is greater than 0 for a product in the quantity input box, the
Commerce Cloud platform checks the availability of that quantity. If a
customer changes 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

In this example, the customer has added the three items to the cart. While
in the cart, the customer receives the message that “X item(s) are in stock
and ready to ship. The 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 the customer must adjust his or her quantity before
checkout.
5. Limited Availability Cart, Not Available - Cart Message

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 quantities.
5.0 Product Reviews

[customer] FSD 60
[customer] FSD 61
Product Details - Product Reviews
The Product Reviews section displays as a tab within the Reviews tab.
5.1 Product Details - Product Reviews This is the standard PowerReviews integration. For more information, see
the “PowerReviews Integration Guide.”
1. Average Customer Rating

This element shows the average rating for the product based on all
reviews submitted by customers as a number of stars.
2. Write a Review
Unauthorized/Not Logged-In customers are navigated to Wireframe:
Product Review - Unauthenticated Customer Login. Authorized/Logged-In
customers are returned to Wireframe: Product Review Entry.
3. Individual Customer Rating

Individual customer ratings display as a number of stars, along with the
customer’s name and location.
4. Individual Review
The review displays, entered by the customer on the Wireframe: Product
Review Entry.
5. Print
The customer clicks this to create a print friendly version of all product
reviews that the customer can print. This display is controlled via CSS.
[customer] FSD 62
Product Review – Unauthenticated Customer Login
When an unauthenticated customer clicks the Write a Review link, they

5.2 Product Review - Unauthenticated Customer Login are navigated to a page to login or register.
Authenticated customers are returned to the Wireframe: Product Review
Entry once they login.
New Customers are returned to the Wireframe: Product Review Entry after
they have created an account.
[customer] FSD 63
Product Review – Preview
5.3 Product Review - Preview 1. Review Preview

This is an example of the content of the Write Your Review form in
preview prior to submission.
[customer] FSD 64
Product Review – Submit
5.4 Product Review – Submit 1. Submitted Review

This is the standard Power Reviews page after a review has been
submitted.
[customer] FSD 65
6.0 Quickview
[customer] FSD 66
Quickview – Standard / Single Variation Product
Functionality on the standard Quickview is standard for all Quickview products unless stated
6.1 Quickview – Standard / Single Variation Product 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 promotional message can display with any merchandising or
message content (for example, Special Offer).
1. Close button
When the customer clicks the Close button, the Quickview panel closes and the customer is
returned to the parent page.
2. Next and previous buttons

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, and not for products on a
new page of the search results.
3. Product name - view full details

The customer clicks the View Full Details link beneath the product ID to view the full product
details. This link closes the Quickview and the customer is navigated to the product details
page. The product name display is controlled via CSS to assure the length and height fi t within
the area.
4. Product attributes and options area

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 this display has no
other user interaction. If the product has no options or display variations, the availability
information is moved up.
5. Pricing and promotions

6. Product images
If a product has more then one image associated with it, those thumbnails display beneath the
large image. When the customer clicks the thumbnail, the large image changes to the thumbnail
that was clicked. If the product only has one image, no thumbnail displays. See Wireframe:
Product details - product imagery.
7. Add to Cart
This closes the Quickview and returns the customer to the parent page while the Mini
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 the
customer is not registered, the module closes and they are navigated to the Create Account
page (see Wireframe: Create an account).
10. Tooltips
The customer hovers their mouse over the social media, Add to Wishlist, or Add to Gift Registry
icons, and a respective tooltip displays.
11. Add to Gift Registry

Registered customers can add an item to their gift registry (see Wireframe: Gift registry). If the
customer is not registered, the module closes and they are navigated to the Create Account
page (see Wireframe: Create an account). If master products are not configured, the link is
disabled.
[customer] FSD 67
Quickview – Variation Product
6.2 Quickview – Variation Product Variation Products display variations in a visual way that enables
customers to interact with the possible variations. This interaction
affects the price and availability of 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:
Product Details - Product Imagery.
1. Promotional Call Out Message

The promotional message is configured using the callout attribute of the
promotion within the Business Manager. When the customer clicks the
View Full Details link, a module opens describing the promotion.
2. Variation Attribute: Color

Products with different color variations display in a manner that is similar
to results refinements, where each product color can display via CSS
and with an assigned background-color or background-image, thus
providing the customer with an accurate visualization of the product
color. When the customer clicks an available color, product images
change on the left.
3. Content Asset for Variation Attributes

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 Width is called variation-help-<variation
attribute name>.
4. Add to Cart
This closes the Quickview and returns the customer to the parent page
while the Mini 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.
[customer] FSD 68
Quickview – Product Set
6.3 Quickview – Product Set 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 within the Product Set are
made available. All other Quickview functionality is made available.
Promotions and Availability are treated the same as other
Quickviews.
See Wireframe: Quickview: Variation Product.
1. View Full Details

After the customer clicks the View Full Details link, they are
returned to the Product Set Details page.
2. Scroll Bar
This enables the customer to scroll through all items of the
product set. It is set via CSS.
3. Add to Cart
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 are returned to the top of the
page so the mini-cart is visible with the item added.
Clicking an individual Add to Cart button does not close the
Quickview window.
4. Add All to Cart

When the customer clicks the Add All to Cart button, the mini-cart
opens with the All Products in the product set and the Quickview
window closes.
This button is only enabled when all product variations have been
selected.
5. Product Set Price

When the product set fi rst opens in Quickview, the price displays
a Buy All or One, once all products in the set have been confi
gured, the product set price displays and the Add All to Cart
button is enabled enabling the customer to add all products in the
set to the cart.
[customer] FSD 69
7.0 Gift Cards | eCertificates

[customer] FSD 70
Gift Certificate Details Page
1. Customer Information
7.1 Gift Certificate Details Page This is the gift certificate customer information.
2. Gift Certificate Image

The image is uploaded as a content image in the Business
Manager. The content Asset is gift-details.
3. Gift Certificate Amount/Add to Cart

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
(Wireframe: Mini-Cart) opens (drops down), showing the recently
added gift certificate.
4. Gift Certificate Error

See Errors Messages chapter.
5. Check Balance
The check balance text is defined as a content asset in the
Business Manager. If the customer clicks this button, a module
window opens with a field that shows the gift certificate balance
(similar to the button in checkout).
The content asset is gift-check-balance.
6. Gift Certificate Additional Details

The content asset is gift-additional-details.
[customer] FSD 71
Gift Certificates in Cart
Gift Certificate Only in Cart

7.2 Gift Certificates in Cart Customers that add only gift certificates to their shopping cart are
not charged for shipping because the gift certificate is sent
electronically through email to the gift certificate’s recipient. See
Wireframe: Gift Certificates: Cart Multiple Products for details on
orders containing products and gift certificates.
1. Gift Certificate
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 certificate amount and
customer details. The gift certificate purchase form displays with
the existing gift certificate information.
2. Shipping Message
This message indicates that the order will be sent via email
because the only item ordered is a gift certificate.
3. Active Message
This message indicates when the gift certificate will be available
for redemption.
4. Checkout
If the cart contains only gift certificates, checkout begins with the
payment step, 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.
Gift Certificate Multiple Products in Cart

Customers that add a gift certificate to their shopping cart along
with other products 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.
1. Checkout
When the customer clicks this button, he or she is navigated to the
Shipping and Shipping Method page.
[customer] FSD 72
Gift Certificates Only in Cart - Checkout Billing
7.3 Gift Certificates Only In Cart – Checkout Billing The customer bypasses the shipping address and shipping
methods page when 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 the
customer (see Wireframe: Cart for information on registered and
guest checkout).
Note: 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 certificate payment instrument
created in a previous, unfinalized checkout session is removed if
the customer reenters checkout with a gift certificate in his or her
the basket.
1. Edit Product
When the customer clicks this button, they are returned to the
Wireframe: Purchasing Gift Certificates to modify the amount and
recipient information..
[customer] FSD 73
Gift Certificates Only in Cart – Place Order
7.4 Gift Certificates Only In Cart – Place Order After a customer submits an order that contains a gift certificate,
the Commerce Cloud 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.
[customer] FSD 74
Gift Certificates Only in Cart – Order Receipt
7.5 Gift Certificates Only In Cart – Order Receipt 1. Gift Certificate Information
This part of the order receipt contains all gift certificate
information, including the amount, purchaser and recipient
information.
2. Shipping Details
This information indicates delivery via email for a gift certificate
only purchase. Each gift certificate is contained in a separate
shipment, and thus displays in separate shipping box on the Order
Receipt page.
[customer] FSD 75
8.0 In-Store Pickup

[customer] FSD 76
In-Store Pickup: Product Details
This feature must be enabled in Business Manager site

8.1 In-Store Pickup: Product Details preferences. Also, the master variant product must have the
custom attribute availableForInStorePickup configured and the full
variant selected on the storefront product details page. See the
product documentation for other implementation requirements.
1. Check store availability

The customer clicks the Check store availability link, and the zip
code entry window opens.
[customer] FSD 77
In-Store Pickup: Quickview
1. Check store availability

8.2 In-Store Pickup: Quickview The customer clicks the Check store availability link, and the zip
code entry window opens.
[customer] FSD 78
In-Store: Enter Zip Code / Select Store
8.3 In-Store: Enter Zip Code / Select Store 1. Enter zip code
The customer enters a zip code, which is used to search for stores,
and then clicks Find.
2. Select Store
The window expands to show up to three store addresses, and the
item’s availability at each store.
3. Stock not available

If there is no stock available at a store, the button to select that
store as the customer’s preferred store is disabled.
4. Preferred store
The customer can select a new address or select the preferred
store address. When the customer clicks Select Store, that store is
set as the preferred store for the remainder of the session.
5. Change location
When the customer clicks the Change location link, the What’s
Available At A Store Near You window redisplays showing the
Enter zip code entry field.
6. Continue
If a preferred store is already configured for the session, the
Continue with preferred store button displays. If the preferred
store is to be configured for the first time, the Continue button
displays. When the customer clicks either button, the preferred
store is saved and the product details or Quickview page reopens.
[customer] FSD 79
In-Store Pickup: Cart Page
Storefront addresses can only be changed from the cart page.

8.4 In-Store Pickup: Cart Page
1. Home delivery/in store pickup
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 details page or cart
page is set as the preferred store.
3. No in-store pickup
Items that are not configured for in-store pickup only show Home
Delivery.
[customer] FSD 80
In-Store Pickup – Shipping Addresses
1. Multi-shipping
8.5 In-Store Pickup: Shipping Addresses 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.
3. Shipments
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.
4. Edit - IN STORE PICKUP

When the customer clicks Edit beside SHIPPING ADDRESS for
home delivery, they are navigated to the Cart page
[customer] FSD 81
In-Store Pickup: Shipping Method Page
1. Shipping method
8.6 In-Store Pickup: Shipping Method Page On the Shipping Methods page, shipments that will be picked up in
stores show the zero cost shipping method for store pickup. The
customer cannot select a different method for this shipment type.
2. Message for the store

The customer can enter a short message for the store, for
example, the desired date and time of pickup

home delivery, they are navigated to the Cart page.
4. Cart summary
The cart summary in the right column label pickup shipments as
such and displays the address of the store designated for pickup.
[customer] FSD 82
In-Store Pickup: Billing Page
1. Order summary
8.7 In-Store Pickup: Billing Page On the Billing page, Shipping Store Pickup is a line item with the
value of zero.
2. Shipment address
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.

home delivery, he or she is navigated to the Cart page.
[customer] FSD 83
In-Store Pickup: Place Order Page
8.8 In-Store Pickup: Place Order Page 1. Order summary

On the Place Order page, Shipping Store Pickup is a line item with
the value of zero.
2. Shipment address
pick up.

home delivery, he or she is navigated to the Cart page.
[customer] FSD 84
In-Store Pickup: Order Receipt Page
1. Order Summary
8.9 In-Store Pickup: Order Receipt Page On the order receipt page, Shipping Store Pickup is a line item with
the value of zero.
2. Shipping Address
pick up.
[customer] FSD 85
In-Store Pickup: Order History Page
1. Shipped To
8.10 In-Store Pickup: Order History Page 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.
[customer] FSD 86
In-Store Pickup: Order Summary Page
1. Order Summary
8.11 In-Store Pickup: Order Summary Page On the Order Details page, Shipping Store Pickup is a line item
with the value of zero.
2. Shipped to
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
[customer] FSD 87
In-Store Pickup: Single-Shipping Page
1. Order summary
8.12 In-Store Pickup: Single-Shipping Page On the Shipping page, Shipping Store Pickup is a line item with the
value of zero.
2. Select Shipping Method

The shipping method for in-store pickup is suppressed for the
home delivery shipment, and that shipping method is assigned to
the shipment meant for in store pick up.
3. Shipping method
The store addresses has already been assigned for in store pick
up.
4. Store Message
The customer can enter a short message for the store, for
example, the desired date and time of the pickup.
[customer] FSD 88
In-Store Pickup - Single-Shipping with only In-store Pickup
1. Shipment
8.13 In-Store Pickup: Single-Shipping with only In-store The address form does not display if there is no shipment that is
designated for home delivery.
Pickup
[customer] FSD 89
9.0 Mini-Cart | Cart

[customer] FSD 90
[customer] FSD 91
Mini-Cart
The mini-cart automatically opens (and updates its value) when the
9.1 Mini-Cart customer adds a product to his or her shopping cart. The mini-cart
times out and closes after five seconds. Having a mouse cursor
within the mini-cart keeps it from closing.
1. Cart
When the customer mouses over the cart text in the header, the
mini-cart opens. If there are no items in the cart, the mouseover
state is disabled. If the customer clicks the text, he or she is
navigated to the Cart page. If the cart is empty, the text, “Your Cart
is Empty” displays.
Note: The number of items that display represent the quantity of

items. If there are 2 items in the cart, one with a quantity of 2, then
number of items is 3. A bundle is technically a single product. A
discount is not counted towards the quantity.
2. Subtotal
This is the aggregate subtotal of the items in the cart (item price
only, without tax or shipping).
3. View Cart
When the customer clicks the View Cart button, he or she is
navigated to the cart.
4. Mini-Cart Product Display

The visible mini-cart shows four products. A scroll bar displays in
the product area if more than 4 products display in the cart. The
number of products that display in the mini-cart is configurable
within the template.
A newly added product displays on top with the product name,

quantity, product total, variations and the product image.
For additional products, the product image is hidden. The full

display only opens if the 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.
5. Mini-Cart Slot
The global slot is configured within the Business Manager as an
HTML slot called ‘minicart-banner’.
[customer] FSD 92
Shopping Cart
The Cart page layout and all the checkout pages have a right sidebar
9.2 Shopping Cart 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
Empty “ message displays, and the mini-cart is disabled within the
cart and checkout process.
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 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.
2. Quantity
The customer can remove or increase the total quantity of an item
in the cart. Pricing and Order summary are updated when the
customer clicks the Update Cart button below.
3. Cart footer global slot

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.”
The global slot name is cart-footer.
4. Update Cart button

Updates quantity and order summary changes made by the
customer.
5. Order Summary
See Wireframe: Order summary - costs and discounts details.
6. Checkout
If the customer is authenticated/logged in, clicking this button
navigates them to the first step of the checkout process. If they are
unauthenticated or a guest shopper, they are navigated to the
Checkout Login page (see Wireframes: My Account - login).
7. Cart examples
See the respective wireframes for details.
a. Nearest promotion example (alert on approaching)
b. Gift certifi cate example
c. Applied coupon code example
d. Order promotion discount example
[customer] FSD 93
Cart - With Bundle
9.2.1 Cart - With Bundle 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

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.
[customer] FSD 94
[customer] FSD 95
Cart – Pricing and Promotions
9.2.2 Cart – Pricing and Promotions Pricing and promotions display as shown in the example.
1. Price column
Shows a product line item base price and, if different, the crossed
out list price from price book usd-list-prices.
2. Total price column

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 promotions.
a. In this case, the total price is 3 times the price.
3. List price with sale price
4. Multi-currency
Customers cannot change currency once the checkout
[customer] FSD 96
Pricing and promotions display as shown in the example.

[customer] FSD 97
Pricing and promotions display as shown in the example.

[customer] FSD 98
Cart – Coupons
9.2.3 Cart – Coupons The customer can enter coupons on the cart or billing page. This
wireframe describes valid coupons entered on the cart page.
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)
b. Applied
2. The following displays beside the Remove button:

Coupon
Coupon Number
SPECIAL24
Special24 (-$6.00)
[customer] FSD 99
Cart – Bonus Products
9.2.4 Cart – Bonus Products 1. Bonus products

Bonus products display as individual product line items in the cart
after all the product line items, in the order of their qualifying
product line items. Bonus product quantities cannot be changed.
a. Qualifying products displays first.
b. Bonus products display after all the qualifying products, each
bonus product with the 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 page. If the customer changes the bonus
product’s quantity on this page, the product displays as an
additional line item in the cart. If the bonus product is configured
as unsearchable, the product name displays as regular text, and
not as a link.
2. Multiple bonus products

Multiple bonus product line items that share the same qualifying
product line item can 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
configure the Business Manager Bonus Product Positioning
promotion site preference.
a. Qualifying products display in the order in when they were
added to the cart.
b. Bonus products display after their qualifying products,
incrementing the quantity as the qualifying product is
incremented, up to the maximum allocation.
[customer] FSD 100
Cart – Promotions – Choice of Bonus Products
9.2.5 Cart – Promotions – Choice of Bonus Products If a customer is eligible for a choice of bonus product promotion,
they can select and configure those products in the cart.
1. Order promotion
An order based on a choice of bonus product promotion displays a
message above the cart, enabling the customer to open the choice
of bonus product configuration Quickview window.
2. Order and/or product promotion

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.
3. Choice of bonus products Quickview

A Quickview window opens, enabling a customer to configure their
bonus products.
A single variation product displays the same as for the product
Quickview. Multiple products display tiles the same as for product
set or bundled products.
4. Rule-based choice of bonus products

The More button displays for a rule-based choice of bonus product
discount. When the customer clicks More, another ten bonus
products display in a manner similar to infinite scrolling.
[customer] FSD 101
Cart – Alert on Approaching Discount
9.2.6 Cart – Alert on Approaching Discount 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:

• Order promotions With amount of order merchandize total
• Shipping promotions With amount of shipment merchandize total
1. Alert on approaching discount

For a logged-in user and a guest, this displays in the area beneath
the Checkout – product list section.
[customer] FSD 102
10.0 Checkout – Returning Customers

[customer] FSD 103
Checkout Login
10.1 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 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.
2. Create account
New customers can create accounts from the cart. They will be
prompted to create an account after they click Checkout without
having created an account.
3. Returning customers
Registered customers can log into the site from the cart page. If
the customer does not log in, they will be prompted to login after
they click Checkout.
[customer] FSD 104
Checkout: Step 1 Shipping/Method Page - Logged in User
1. Logout
10.2 Checkout: Step 1 Shipping/Method Page - Logged in The cart is cleared if the customer logs out.
2. Checkout steps
User 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 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. Shipping address
These fields are empty by default, enabling the customer to add a new
address.
The customer can select a saved address from the drop down list, which fills
the corresponding form fields with the customer’s saved address.
Customers can edit the 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
Wireframe: Order summary - costs and discounts).
5. Tooltip
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: Tooltips).
6. Country selection
The selection of the country controls the validation and list of selectable
values for other fields, such as zip code, state/province, and telephone.
7. Zip code
The application verifies the correct zip code format. For example, for a US
address, the application requires a minimum of 5 digits and a maximum of 9
digits, while a Canadian address requires 6 alpha numeric characters.
8. Address options
Customers can save the entered address to their address book (unchecked
by default). They can select this address to pre-fi ll as the billing address
(unchecked by default).
9. Gift options
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 renders using the available width. The message is sent in
the order export to the Order Management System.
10. Ship method
Standard shipping methods display and do not change per locale. This list is
dynamically reloaded as the customer enters data into the form. When multi-
currency is enabled, and the customer selects a different currency, only the
defined and enabled shipping methods for that currency display. See the
Wireframe: Header | global navigation | footer.
11. Continue checkout
Throughout the checkout process, the Continue button is disabled until all
the required data has been entered.
[customer] FSD 105
Checkout: Step 1 Shipping/Method Page – Multiple Countries
10.2.1 Checkout: Step 1 Shipping/Method Page – Multiple 1. Country

The country drop down list determines the label and options for
the State/Province, telephone and zip code. If the customer selects
Countries the United States, the State/Province label shows “State” and the
drop down list contains all valid Ship-To-States. If the customer
selects Canada, the label shows Province.
2. State/Province
Valid ship-to states and provinces display based on the selected
country.
3. Shipping Methods
Valid shipping methods display based on the shipping methods
rules. This list is dynamically reloaded as the customer enters data
into the form.
[customer] FSD 106
10.2.2 Checkout: Step 1 Shipping/Method Page – Shipping Promotions

[customer] FSD 107
Checkout: Step 1 Shipping/Method Page – Shipping Promotions
1. Shipping Method Name

Displays the name field of the shipping method.
2. Shipping Method Pricing

Displays proper tier for that specific shipping method.
3. Shipping Method Description

Display the value of the Shipping Method description field
4. Shipping Promotion Price

Displays price value of shipping promotion, if the price is 0 then it would
display as FREE.
5. Shipping Promotion Name

Display value name field of the promotion.
6. Shipping method and excluded products

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.
7. Shipping Surcharge Total

This would display the total of all surcharges presently in the shipment.
8. Shipping Costs Breakdown

Clicking or mousing over this icon would display a tooltip containing the
shipping cost breakdown, each surcharge would be specifically called out and
the Total Shipping Costs would be the total of the Shipping Cost and
Surcharges.
9. Shipping Promo
Display of Shipping Promo Name.
10. Adjusted Shipment Total

Adjusted total the Shipping Cost is calculated from, this total adjusted
11. Product Shipping Information Icon

Clicking or mousing over this icon would display a tooltip containing a content
asset that would have information stating that this shipping method is a
promotional shipping method available for products within the shipment.
12. Shipping Promotion Names

Loop of all shipping promotions that are applied to this shipment
13. Fixed Price Product Shipping Information Icon

Clicking or mousing over this icon would display a tooltip containing a content
asset that would have information stating that some products in your shipment
have fixed price shipping which overrides standard shipping costs.
14. Fixed Price Shipping Costs Breakdown

Loop of all the fixed price shipping that would be added to the total shipping
cost.
[customer] FSD 108
Checkout: Step 2 Billing/Pay Method Page - Logged in
This page represents the billing address section of the

10.3 Checkout: Step 2 Billing/Pay Method Page - Logged billing/payment method page.
in 1. Billing address
Billing address selection provides the same functionality as the
shipping address 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.
If the customer chooses to use the shipping address as the billing
address, this form is pre-filled with this address, otherwise it is
pre-filled with the customer’s default address.
2. Address options
The customer can optionally add the used address to their address
book.
3. Edit Shipping
When the customer clicks Edit, in the Shipment section, they are
returned to the shipping/shipping method page to edit the shipping
address. (See Wireframe:
Checkout - step 1 shipping/method page - logged in user.) The
updated shipping address and method data is carried forward
throughout the checkout process.
4. Gift certificate check balance

When the customer clicks Check Balance, the application checks
the balance of the gift certificate entered into the field. If the gift
certificate is invalid, an error message displays. See Wireframe:
Error messages.
Clicking Check Balance does not result in a full page refresh; only
a validation of the
Gift Certificate.
Note: This information pertains to an already purchased gift
certificate. See
Wireframe: Gift certificate for more information.
5. Security code tooltip

The customers hovers their mouse over this tooltip and the
checkout-security-code ontent asset displays telling the customer
where they can find their security code.
Note: The Select Payment Method section displays beneath the

Enter Gift Certificate or Coupon/Discount Codes section.
Note: Checkout with the Discover card is only available in the USA.
[customer] FSD 109
Checkout: Step 2 Billing/Pay Method Page - Logged in (cont)
1. Gift certificate
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 payment section is disabled.
If the gift certificate is invalid, a message displays that the gift
certificate is invalid (see Wireframe: Error messages). If the gift
certificate has a zero balance, a message displays that there is no
value left on the gift certificate. Clicking Apply does not cause a full
page refresh. It merely applies or validates the gift certificate. It is not
possible to pay for a gift certificate with another gift certificate.
created in a previous, unfinalized checkout session is removed if the
customer reenters checkout with a gift certificate in their basket.
2. Coupon code
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 -coupons. If a promotion is applied
upon the entry of a coupon code, it will be reflected in the
cart/checkout process in the same manner as for any other
promotion. Clicking Apply does not cause a full page refresh.
3. Gift certificate remove

The remove icon [X] beside the message enables the customer to
remove the gift certificate as a payment method.
Note: This information pertains to a gift certificate that has already
been purchased.
4. Additional payment methods

When the customer selects a payment method, the form fields for
that method display beneath it, with the form fields for the previously
selected payment method hidden.
The default method, Credit Card, is always selected when this page
opens.
The required fields are validated at the client. See Wireframe: Errors -
credit card submissions.
Add any other payment methods should be implemented here (see
Wireframe: other payment methods).
5. Save this card

A registered customer can save this credit card for future use by
selecting this box. By default, the box is checked.
6. Continue checkout
This element returns the customer to the Wireframe: Checkout - step
3 place order.
[customer] FSD 110
Other Payment Methods – Bill Me Later
10.3.1 Other Payment Methods – Bill Me Later 1. Date of Birth

The customer must enter his or her valid date of birth.
2. Bill Me Later Pay Method

There will be no real integration with Bill Me Later in the
SiteGenesis Application.
When the customer selects Bill Me Later, they are returned the Bill
Me Later form that enables them to enter the appropriate
information to pay with Bill Me Later.
The merchant must have a relationship with Bill Me Later to accept
Bill Me Later as a pay method.
3. Last 4 digits of social security number

The customer must enter the last four digits of his or her social
security number.
4. Agree to Terms
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 unchecked, an error
message displays.
5. Continue Checkout Button

If any of the required fields, date of birth, social security number,
or the Agree to Terms check box are not populated or selected, an
error message displays. The Continue
Checkout button passes the correct data to the Bill Me Later Web
Service and authorize or decline the customer’s request.
[customer] FSD 111
Other Payment Methods – Paypal
10.3.2 Other Payment Methods – Paypal 1. PayPal Pay Method

The SiteGenesis Application will not showcase the PayPal
functionality: there will be no real integration with PayPal.
When the customer selects PayPal, they are returned an iFrame
directly from PayPal that enables them to use their PayPal account
to pay for the order. The customer may also be returned directly to
a full PayPal page, depending on the integration.
The merchant must have a relationship with PayPal to accept
PayPal as a valid payment.
2. PayPal iFrame
This content block represents the PayPal iFrame sent by PayPal
for the customer to enter their PayPal information. The content
area is determined by PayPal and the merchant and can be
customized to meet merchant branding requirements..
[customer] FSD 112
Checkout: Step 3 Place order - User Logged In
10.4 Checkout: Step 3 Place order - User Logged In The Place Order page represents the fi nal 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 Commerce Cloud tax
functionality and displays with the order summary.
1. Product In-Cart Editing

Each line item on the Place Order page includes an Edit Details
link that returns the customer to the Cart page, enabling him or her
to make last-minute changes to product attributes such as size
and color. The customer can also update the quantity, remove the
product from the cart and add the product to his or her wish list.
After the customer submits his or her changes, the Commerce
Cloud platform launches the QuickView panel (see Wireframe:
Quickview),
2. Edit Shipping
When the customer clicks the Edit link, he or she is returned to the
shipping step of checkout, with the information pre populated in
the fields. Customer-saved addresses display on a drop down list,
making them easily selectable.
3. Edit Billing
billing step of checkout, with the information pre populated in the
fields. Customer-saved addresses also display on a drop down list,
making them easily selectable.
4. Edit Payment Method

Edit Payment Module (see Wireframe: Edit Payment Module). Each
payment method has its own edit link, opening the appropriate
payment method module.
5. Submit Order
When the customer clicks the Submit Order button, the payment
method is authorized. Upon successful authorization, the
customer is navigated to the Order Receipt page. A failed
authorization returns appropriate messaging to the customer (see
Wireframe: Error Messages).
[customer] FSD 113
Checkout – Receipt Page
10.5 Checkout – Receipt Page 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 products and shipping
address, is contained in a separated box below.
2. Print
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 as the header and navigation.
3. Cart (n)
When the cart is empty, it shows 0 items.
4. Return to shopping
This link returns the user to the Home page or the last
search/product/category page if that was what was viewed before
navigating to the cart page.
[customer] FSD 114
Checkout: Order Receipt Confirmation Email
10.6 Checkout: Order Receipt Confirmation Email 1. Email Header

The email header at the top contains retailers logo, address and
thank you message.
2. 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 products and shipping
address, is contained in a separated box below.
[customer] FSD 115
11.0 Checkout – Guest Checkout

[customer] FSD 116
Checkout: Step 1 Shipping Address/Method Page – Guest

11.1 Checkout: Step 1 Shipping Address/Method Page –
On the login interception page, a customer can choose to checkout
Guest as a guest and is redirected to this page.
The default for guest checkout is that no shipping information is pre-

filled in the 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: Step 1 Shipping
Address/Method Page - Logged in User for page functionality).
[customer] FSD 117
Checkout: Step 2 Billing/Pay Method Page – Guest

11.2 Checkout: Step 2 Billing/Pay Method Page – Guest The default is that no information is stored for a guest. The
form fields are empty, as shown in this wireframe. Billing
information is only populated when the customer selects
“Billing same as Shipping” on the Shipping Address page.
For page functionality, see Wireframe: Checkout: Step 2

Billing/Pay Method Page - Logged in User.
[customer] FSD 118
Checkout: Step 3 Place Order – Guest
For page functionality, see Wireframe: Checkout: Step 3 Place

11.3 Checkout: Step 3 Place Order - Guest Order - Logged in User.
[customer] FSD 119
Checkout: Receipt Page – Guest
11.4 Checkout: Receipt Page – Guest 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 successfully completes this form,
they are navigated to the My Account landing page.
2. Create an Account button

When the customer clicks the Create an Account button, they are
returned to the My Account landing.
[customer] FSD 120
12.0 Order Summary

[customer] FSD 121
Order Summary - Costs and Discounts Details
12.1 Order Summary – Costs and Discounted Details 1. Update Cart

The customer clicks this to add changes to the cart.
2. Order Subtotal
This is the total of all line items in the cart after product
promotions have been applied.
It is the merchandize total price without order level discount. The
sum of all order level discounts display below as “Order
Discount”.
3. Shipping/Tax
The Shipping and Sales Tax fields indicate the total shipping and
total sales tax that are known at the last step of the checkout
(“Place Order”). Both are unknown in the cart and do not display
here.
4. Estimated Total
This is the total of the all the lines added or subtracted from the
Order Subtotal.
5. Order Summary
The right column of the checkout provides a persistent review
section that shows the items in the cart and all checkout
information as it becomes complete. The shipping, tax and
promotion amount changes dynamically as the customer enters or
changes personal information. The product price is the price of the
product line item in the basket, including product level
promotional discounts.
6. Edit My Cart
When the customer clicks Edit My Cart, they are returned to the
Cart page where they can make changes. When the customer
proceeds to check out again, the previous selections and data are
remembered.
7. Receipt Page
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 the checkout
process. Estimated Total becomes Order Total after all applicable
fields are complete, enabling the Commerce Cloud platform to
calculate a true Order Total for the customer.
13.0 Other Payment Methods

[customer] FSD 122
[customer] FSD 123
Other Payment Methods – Bill Me Later
13.1 Other Payment Methods – Bill Me Later 1. Date of Birth

The customer must enter their valid date of birth. See Wireframe:
Errors-Bill Me Later.
2. Bill Me Later payment method

The SiteGenesis application does not showcase Bill Me Later
functionality: there is no real integration with Bill Me Later. The
merchant must have a relationship with Bill Me
Later to accept this as a payment method. When Bill Me Later is
integrated, and the customer selects Bill Me Later, they are
returned a Bill Me Later form that enables them to enter the
appropriate information to pay with Bill Me Later.

The customer must enter the last four digits of their social security
number. See Wireframe: Errors-Bill Me Later.
4. Agree to terms
The customer must select the Agree to Terms check box to submit
a payment. This is unchecked by default. See Wireframe: Errors-
Bill Me Later.
5. Continue button
or the Agree to Terms check box are not pre-filled or selected, an
error message displays. See Wireframe: Errors-Bill Me Later.
6. Continue
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 Bill Me Later has been
activated (see #2). If not activated, the application continues,
simulating authorization.
[customer] FSD 124
Other Payment Methods – Paypal
13.2 Other Payment Methods – Paypal 1. PayPal Pay Method

The SiteGenesis Application will not showcase the PayPal
functionality: there will be no real integration with PayPal.
When the customer selects PayPal, they are returned an iFrame
directly from PayPal that enables them to use their PayPal account
to pay for the order. The customer may also be returned directly to
a full PayPal page, depending on the integration.
The merchant must have a relationship with PayPal to accept
PayPal as a valid payment.
2. PayPal iFrame
This content block represents the PayPal iFrame sent by PayPal
for the customer to enter their PayPal information. The content
area is determined by PayPal and the merchant and can be
customized to meet merchant branding requirements.
[customer] FSD 125
14.0 Checkout: Multiple Shipping Address

[customer] FSD 126
Checkout: Multiple Shipping: Step 1 Shipping
14.1 Checkout: Multiple Shipping: Step 1 Shipping See Wireframe: Checkout: Step 1 Shipping/Method Page - Logged in
User for information on standard page functionality. Multiple
shipping is an alternative checkout procedure in parallel to single
shipping. Within the application, the customer can check out the
standard way, or using this setting, perform an alternative checkout
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.
Note: You must enable multi-shipping via a Business Manager

custom site preference.
1. Multiple Ship Addresses

When the customer clicks the Yes button or the link, he or she is
returned to the New Shipping Address page (see Wireframe:
Checkout: Multiple Shipping: Step 1 New Shipping - Logged In).
The customer must enter information into the fields on this page.
2. Select from Saved Addresses

This section only displays for a logged in customer.
[customer] FSD 127
Checkout: Multiple Shipping: Step 1 Shipping Addresses
14.2 Checkout: Multiple Shipping: Step 1 Shipping Each item in a Multiple Shipping Cart is split into a quantity of 1, thus
enabling the customer to ship products to various recipients.
Addresses
1. Shipping Address Breadcrumb
When the customer selects multiple shipping addresses, the
checkout process splits the shipping address selection task into
two steps: the shipping address page and shipping method page.
2. Add New Address

When the customer clicks the Add/Edit Address link, an AJAX
window opens, enabling the customer to enter and save a new
address for the multiple ship-to.
3. Shipping Addresses
For a registered/logged in customer, all stored addresses display
in the drop down list, with the default address displaying for each
line item. If the platform is configured to support multi-shipping,
and one or more items are from one or more wish lists or gift
registries (with multiple items in the cart), the wish list or gift
registry item drop down lists display with their respective default
addresses.
For an unregistered customer, a message displays asking him or

her to click the Add New Address link to add a new address. Each
address a customer adds via the Add
Address link is included in the drop down list for all line items. If
there is no address in the address book, the drop down list does
not display. It displays as soon as the customer adds the first
address.
4. Add or Edit Addresses

By default, text boxes are empty. The customer can optionally save
the address or cancel.
[customer] FSD 128
Checkout: Multiple Shipping: Step 2 Shipping Methods
1. Shipments
14.3 Checkout: Multiple Shipping: Step 2 Shipping Each address that represents a shipping destination is split into a
separate shipment with a message “Shipment X” where X is the
Methods shipment number.
2. Ship Methods
The shipping method defaults to ground shipping. The customer
can select the appropriate shipping method. Once he or she
selects a shipping method, the shipment total is adjusted to match
the updated shipping method.
3. Promotional Shipping Message

If a specific shipment qualifies for a shipping discount, the
appropriate discount message displays.
4. Gift Certificate Shipment

Gift certificates will always be their own shipment, with the
shipping method set to Delivery Via Email. This cannot be
changed.
5. Shipment Calculations
Each shipment has its own shipping charge. Upon entering the
Shipping Method page, the shipping totals that display use the
default shipping method, with the costs reflecting the
corresponding shipping charges to the shipment. If the customer
selects other shipping methods, the order totals are refreshed.
6. Edit Shipping
The customer returns to the Wireframe: Checkout: Multiple
Shipping: Step 1 New Shipping.
7. Continue
The Continue button is actually positioned in the right frame,
beneath the Shipment details.
[customer] FSD 129
[customer] FSD 130
Checkout: Multiple Shipping: Step 3 Billing
14.4 Checkout: Multiple Shipping: Step 3 Billing 1. Saved addresses

No information is stored for a guest by default. A logged in user
can select a stored address.
See Wireframe: Checkout: Step 2 Billing/Pay Method Page -
Logged in User for page functionality.
2. Shipping addresses
This page shows the multiple shipping addresses.
[customer] FSD 131
Checkout: Multiple Shipping: Step 4 Place Order
See Wireframe: Checkout - step 3 - place order user logged in for

14.5 Checkout: Multiple Shipping: Step 4 Place Order page functionality.
1. Edit order
When the customer clicks Edit to change the order, they are
returned to the cart page. The customer must navigate to return to
the place order page.
2. Edit shipping
When the customer clicks Edit in one of the shipping address
sections, they are returned to the new shipping address page. See
Wireframe: Checkout – Multiple Shipping - step 1 new shipping.
For example, a customer purchases 1 item and is shipping this
product to his brother.
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 address to return
to the multiple shipments page to split the order into two
shipments.
Note: The default is that the Place Order page does not allow
customers to split shipments.
[customer] FSD 132
Checkout: Multiple Shipping: Order Receipt
1. Shipment
14.6 Checkout: Multiple Shipping: Order Receipt Each shipping address is split into a separate shipment, providing
the customer with an easy-to-read layout.
[customer] FSD 133

[customer] FSD 134
Purchasing Gift Certificates
1. Customer information
15.1 Purchasing Gift Certificates This is the gift certificate customer information.
2. Gift certificate image

The image is uploaded as a content image in Business Manager.
The content asset is gift-details.
3. Gift certificate amount/add to cart

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
(Wireframe: Mini-cart) opens (drops down), showing the recently
added gift certificate.
4. Gift certificate error

See Wireframes: Error messages.
5. Check balance
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 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 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 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
Manager.
6. Gift certificate additional details

The content asset is gift-additional-details.
[customer] FSD 135
Purchasing Gift Certificates – Gift Certificates only in Cart
15.2 Purchasing Gift Certificates – Gift Certificates only 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 recipient.
in Cart See Wireframe: Gift certificates: cart multiple products for details
on orders containing products and gift certificates.
1. Gift certificate
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 certificate amount and
customer details. The gift certificate purchase form displays with
the existing gift certificate information.
2. Shipping message
This message indicates that the order will be sent via email
because the only item ordered is a gift certificate.
3. Active message
This message indicates when the gift certificate will be available
for redemption.
4. Multi-currency
When multi-currency is enabled and the customer selects a
different currency from 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 not
change (no automatic currency conversion). See the Wireframe:
Header | global navigation | footer.
5. Checkout
If the cart contains only gift certificates, checkout begins with the
payment step, 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.
[customer] FSD 136
[customer] FSD 137
Gift Certificates only in Cart – Checkout Billing
15.3 Gift Certificates only in Cart – Checkout Billing The customer bypasses the shipping address and shipping
methods page when 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 the
customer (see Wireframe: Cart for information on registered and
guest checkout).
Note: It is not possible to pay for a gift certificate with another gift
certificate.
created in a previous, unfinalized checkout session is removed if
the customer reenters checkout with a gift certificate in their
basket.
1. Edit product
When the customer clicks this button, they are returned to the gift
certificates page to modify the amount and recipient information.
See Wireframe: purchasing gift certificates.
[customer] FSD 138
Gift Certificates only in Cart – Place Order
15.4 Gift Certificates only in Cart – Place Order After a customer submits an order that contains a gift certificate,
the Commerce Cloud 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.
[customer] FSD 139
Gift Certificates only in Cart – Receipt
15.5 Gift Certificates only in Cart – Receipt 1. Gift certificate information

This part of the order receipt contains all gift certificate
information, including the amount, purchaser, and recipient.
2. Shipping details
This information indicates delivery via email for a gift certificate
only purchase. Each gift certificate is contained in a separate
shipment, and thus displays in a separate shipping box on the
order receipt page.
[customer] FSD 140
Purchasing Gift Certificates – Cart Multiple Products
15.6 Purchasing Gift Certificates – Cart Multiple Products Customers who add a gift certificate to their shopping cart along
with other products 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.
1. Checkout
When the customer clicks this button, they are navigated to the
shipping method page.
[customer] FSD 141
16.0 My Account
[customer] FSD 142
Login
16.1 My Account Login 1. Left navigation

The left navigation pane provides the customer with the ability to create a
new account, review shipping and return policies, and engage with customer
service (see Wireframe: My Account - returning customer).
Customers enter their login credentials, which consist of an email address
and password. Upon successful login, the customer is returned to the My
Account landing page (see Wireframe: My Account - landing page - returning
customer). If the customer enters invalid login information, an invalid login
error message displays. (See # 7 in this list.)
Remember Me checkbox: This saves the customer’s email and password
information for future sessions.
Forgot Your Password link: This navigates the customer to the password
recovery window.
3. Account help text

This text is a content asset managed in Business Manager. This content
asset is account-help.
4. External provider
The customer can select an external authentication provider, per OAuth
support.
5. Check order
To check an order, the customer must enter an order number, order email,
and billing zip code. Both registered and unregistered customers can enter
their order information in this area. After correctly entering a valid order
number and zip code, the customer is returned to the order details page (see
Wireframe: My Account - order details).
6. Create account
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).
7. Create account text

This text is a content asset managed in Business Manager. This content
asset is create-account-benefits.
8. Error messaging my account

See Wireframe: Error - my account login.
9. Error messaging track orders

If the customer enters an invalid order number and/or billing post code, an
error message displays: “Your order number or billing zip code is incorrect.
Please enter a correct order number and valid postal code.”
[customer] FSD 143
My Account Landing – Returning Customer
16.2 My Account Landing – Returning Customer The following wireframes are the pages where the customer is
returned upon clicking the corresponding link in the left navigation
pane or the navigation buttons. The landing page is a content
asset.
· Personal Data link - My Account: Personal Data

· Addresses link - My Account: Address Book
· Payment Settings link - My Account: Credit Card Information
· Orders link - My Account: Order History
· Gift Registries link - Gift Registry
· Wish List link - Wish List on page
1. Account Slot Banner

Account Banner is a global slot within the Business Manager. The
banner remains persistent through the My Account experience.
The global slot, ‘account-banner’, contains the content asset,’
account-banner’.
2. Returning Customer Personalization

Returning customers, once they log in, will see a personal
message welcoming them back. The customer also has the option
to log out.
3. Left Navigation
The left navigation pane enables returning customers to navigate
to account information pages such as personal data, addresses,
wish lists and stored payment methods. Returning customers can
also view order history and track existing orders.
The left navigation pane also provides links to Add to Wish List
and Gift Registry.
4. Account Landing Content

Navigation information is provided to the returning customer as a
landing page for 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 asset is
account-landing.
[customer] FSD 144
My Account – Personal Data
16.3 My Account – Personal Data 1. Left navigation

The left navigation pane enables returning customers to navigate
to account 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.
2. Edit account - new customer

The New Customer selection only displays when the customer
wants to create an account. It does not display when the customer
edits an existing account.
3. Name
The returning customer’s first name and last name are pre-filled
from stored account information. The returning customer can
change their first and last name and then click the Apply button to
save the change.
4. Login information
The returning customer’s login information is pre-filled from stored
account 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
information.
5. Commerce Cloud email list

When the customer selects this checkbox, they will be added to
the email list. This feature would have to be integrated into the
application.
[customer] FSD 145
My Account – Addresses
This view shows the customer’s saved addresses. The default

16.4 My Account – Addresses address always displays first. After that, there is no special
sorting. The layout consists of three addresses per row with no
paging.
1. Create New Address

This opens the Add Address module window (see: My Account -
Add/Edit Address).
2. Default Address
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.
3. Delete Address
When the customer clicks the Delete Address link, the address is
removed from the address book. A confirmation module opens to
complete the operation (see: Tool Tips and Confirmation
Windows).
4. Edit Address
This opens the Edit Address AJAX window (see: My Account -
Add/Edit Address).
[customer] FSD 146
My Account – Add | Edit Address
16.4.1 My Account – Add | Edit Address Customers can add or edit their addresses via a module window.
The address nickname must be unique. However, a customer can
enter the same address twice as long as the nicknames are
different and the address valid.
The country field dynamically changes the fields that follow,

depending on the selected country. All validation occurs on the
server when the customer clicks Apply. All fields are mandatory,
except Address 2 and Nickname. If no nickname is provided, one is
automatically created: for example, Address 1.
1. Add/Edit Address Window

When a returning customer clicks Create New Address or the Edit
Address button from the stored address book, the Add/Edit
Address module opens. The Header label changes to reflect
whether a customer is adding or editing an address (see: My
Account -Address Book).
2. Address Form
The Address form is pre-filled with a returning customer’s address
information. When a customer is creating a new address, this form
is blank.
3. Action Buttons
The address module displays three action buttons: Apply, Cancel
and Delete.
· The Apply button saves the valid form within the Customer’s
Address Book, closes the module and returns the customer to
the Address Book page.
· The Cancel button closes the module and returns the
customer to the Address Book page.
· The Delete button removes the address from the customer’s
Address Book, closes the module window and returns the
customer to the Address Book page. The delete button does
not display when the customer is creating a new address.
See: My Account - Address.
[customer] FSD 147
My Account – Payment Method
This view shows the customer’s saved payment methods. The

16.5 My Account – Payment Method default payment method always displays first; after which there is
no special sorting. The layout contains 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

This opens the Add Credit Card Module window (see: My Account:
Add Credit Card Information Module).
2. Delete Card
When the customer clicks the Delete Card link, the card is
removed. A confirmation module opens to complete the operation
(see: Tool Tips and Confirmation Windows).
[customer] FSD 148
Add | Edit Payment Method
1. Credit Card Window

16.5.1 Add | Edit Payment Method When a returning customer clicks either to add or edit a credit card
from the stored credit cards (see: My Account - Credit Card
Information), they are returned to the add/edit credit card module.
2. Credit Card Form

The Add form is blank, enabling customers to enter information for
new credit cards.
3. Action Buttons
The credit card module displays two action buttons:
Apply and Cancel.
When the customer clicks Apply, the form is validated, the
information is saved as a payment method for that customer, the
window closes, and the customer is returned to the payment
methods page.
When the customer clicks Cancel, the window closes and the
customer is returned to the module and the customer is returned
to the payment methods page.
[customer] FSD 149
My Account Left Navigation
Left hand navigation for logged in customers is persistent

16.6 My Account Left Navigation throughout the account area.
1. Account Settings Links - Registered

· Personal Data links to Personal Data (see - My Account:
Personal Data).
· Addresses links to Addresses (see: My Account - Personal
Data).
· Payment Methods links to Payment Methods (see: My
Account - Payment Methods).
2. Order Information
· Order History links to customer order history (see: Order
History).
· Check Order links to customer order history (see: Order
History, Check Orders).
3. Wishlist
The customer clicks Modify Wishlist to open the Wishlis home
page and clicks
Search Wishlists to open the Wishlist: search results page (see
Wireframe: Wishlist).
4. Gift Registries
· Create Registry links to Gift Registry Creation (see: Gift
Registry, Gift Registry Creation).
· Search Registries links to Gift Registry Home (see: Gift
Registry).
· Modify Registries links to Gift Registries list (see: Gift
Registry).
5. Persistent Account Links

Persistent Account links display to both registered and
unregistered customers. They link to the content assets for
Privacy Policy and Secure Shopping.
6. Account Navigation Content

This text is controlled within the 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: Create an
Account).
[customer] FSD 150
17.0 Create An Account

[customer] FSD 151
Create Account
17.1 Create Account 1. Create account

New customers can create accounts from the cart, using the
Register links in the cart header, Wishlist and Gift Registry. If the
customer clicks Checkout without creating 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 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 error message displays and the confirm password
label is highlighted in red (see
Wireframe: Error messages).
18.0 Reset Password

[customer] FSD 152
[customer] FSD 153
Password Recovery
1. Forgot Password
18.1 Password Recovery When a customer selects the Forgot Your Password link, a Reset
Password window opens (see Wireframes: Error: My Account
Login).
2. Customer email
The customer must enter a valid email address, but as a security
feature, they are no notified of an invalid password. The message
that displays in the window (shown in #3) is the same whether or
not the email entered is correct.
3. Password reset request sent

The customer receives an email.
[customer] FSD 154
19.0 Order History

[customer] FSD 155
My Account – Order History
19.1 My Account – Order History 1. Order header

This header includes the date the order was placed, the order
status, and the order number.
2. Order details
Order details include the ship-to address, item names, and order
total. Gift certificate email addresses are masked.
3. Paging
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, 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 fi rst or last page displays.
4. Order details action button

When the customer clicks the Order Details button, they are
returned to the order details page (see Wireframe: My Account -
order details), which shows the full order details for the order
selected.
5. Multi-currency
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.
[customer] FSD 156
Order History: Details
19.2 Order History: Details 1. Order Header

This header includes the date the order was placed, the order
status and the order number.
2. Order Details
Order details include Item name and item attributes (for example,
color, size, item level discounts, pricing and quantity ordered).
3. Billing/Shipping Summary
This summary includes all billing and shipping information,
payment totals and the payment method used to place the order.
4. Return to Shopping
These links return the customer to the Home page
[customer] FSD 157
Order History: Multiple Shipping
This displays the Order History with multiple shipments.

19.3 Order History: Multiple Shipping
[customer] FSD 158
20.0 Wish List

[customer] FSD 159
Wishlist – Unauthenticated User
20.1 Wishlist – Unauthenticated User 1. Customer Login

Customers with accounts can login, which navigates them to their
Wishlist (see: Wishlist Authenticated User).
· Remember Me checkbox: This saves the customer’s email

and password information for future sessions.
· Forgot Your Password link: This navigates the customer to
the Password Recovery module.
2. Create Wishlist Text

This text is a content asset managed in the Business Manager.
This content asset is ‘create-wishlist-benefits’.
3. Create Wishlist
Unauthenticated customers can optionally create a Wishlist. But
this requires that they create an account. When a customer clicks
Create Wishlist, he or she is navigated to the Create an Account
page (see: My Account: New User).
4. Wishlist Search
Wishlist search is performed for unauthenticated customers in the
same manner as for authenticated customers. A customer can
search for a wishlist by email or name.
[customer] FSD 160
Wishlist – Search Results
20.2 Wishlist – Search Results Wishlist search results display as shown here. If no results are
found, a simple message displays: “No Wishlist has been found
for your search for <searchterms>, please try again”.
1. Wishlist Global Slot

The global slot name is ‘wishlist-banner’.
2. Wishlist Search
Customers can search for a wish list by either email or name.
Wishlist search is performed using last name, first name or email
address. The customer will only see the lists to which he or she
has access. Text entry is not case-sensitive.
3. Wishlist Search Results

When wishlist search results display, the customer can click View
to see that wishlist (see: Wishlist - Public View).
[customer] FSD 161
Wishlist – Public View
20.3 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.
2. Out of stock Item

If an item is out of stock, the following message displays above the
quantity.
This product is currently not available.
Note: When the corresponding product for a wishlist item is
deleted from a catalog, the wishlist item no longer displays on the
public wishlist.
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.
[customer] FSD 162
Wishlist – Authenticated User – No Items
20.4 Wishlist – Authenticated User – No Items 1. Wishlist address
2. Add gift certificates

When the customer clicks the Add Gift Certificate button, the
option for the customer to purchase gift certificates is added to
their wishlist.
3. Make private/public
When the wishlist owner clicks Make This List Public, their wishlist
is now searchable by all customers.
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 clicking. A wishlist is private (nor searchable) by
default.
4. Adding items link

This link navigates the customer to the home page.
5. Get share link

The customer clicks this to see the share link, which they can copy
and paste into an email.
[customer] FSD 163
Wishlist – Authenticated User
20.5 Wishlist – Authenticated User 1. Wishlist search

Customers can search for another customer’s wishlist by entering
the email address or last name of a customer.
2. Social media/get share link

This is an integration with various social media applications. When
the customer clicks the mail icon, a window opens, showing a
selection of mail applications.
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.
4. Quantity desired
The customer can set a specific quantity for a certain item. The
value is set to 1 by default.
5. Make this item public

When the customer deselects this checkbox, the individual item is
only viewable by the wishlist account holder.
6. Update
When the customer clicks the Update button, the requested
changes are made to the
Priority and Quantity fields.
7. Remove
When the customer clicks the Remove link/button, the item is
removed from the wishlist.
8. Out of stock Item

If an item is out of stock, the following message displays above the
quantity.
This product is currently unavailable, please remove it from your
list.
The following message displays beside the product ID:

This product is currently not available.
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
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
21.0 Gift Registry

[customer] FSD 164
[customer] FSD 165
Gift Registry – Unauthenticated User
21.1 Gift Registry – Unauthenticated User 1. Customer login

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).
2. Create gift registry

Unauthenticated customers can optionally create a registry. But
this requires that they 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 the
Wireframe: Gift registry - creation - event/participants.
3. Find a gift registry

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.
See Wireframe: Gift registry - search results.
4. Advanced Gift Registry Search

When the customer clicks Advanced Search, hidden non-required
search fields display.
The Advanced Search section is beneath the Find Someone’s Gift
Registry section.
[customer] FSD 166
Gift Registry: User’s Registries
21.2 Gift Registry: User’s Registries 1. Advanced search

When the customer clicks the Advanced Search button, the
additional fields display.
2. New registry
When the customer clicks the New Registry button, they are
navigated to the create gift registry page (see Wireframe: Gift
registry - Creation – Event/Participants).
3. View registry
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
When the customer clicks Delete a window opens asking them to
confirm that they would like to delete this registry.
[customer] FSD 167
Gift Registry: Creation - Event/Participants
21.3 Gift Registry: Creation – Event / Participants 1. Gift Registry Header Slot
The global slot name is registry-header.
2. Event Information
These fields provide details on event information.
3. Participant Information
These fields provide details on participant information.
[customer] FSD 168
Gift Registry - Creation – Shipping
21.4 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.
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 address associated to with a gift registry
cannot be deleted.
The Select an Address section continues as the customer scrolls
down.
2. Post event shipping address

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.
[customer] FSD 169
Gift Registry - Confirmation
After the customer has entered all the required information, the
21.5 Gift Registry - Confirmation information displays in a new window, asking for confirmation
prior to allowing the customer to add products.
If the customer clicks the Submit button, he or she is navigated to

the Wireframe: Gift Registry: Registrant(s) View.
[customer] FSD 170
Gift Registry - Registrant(s) View
1. Registry tabs
21.6 Gift Registry- Registrant(s) View 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 registry.
3. Make private/public
When the registry owner clicks Make This List Public, their registry
becomes searchable by all customers.
When the registry owner clicks Make This List Private, other
customers can no longer search for the registry.
The button text toggles Make This List Public to Make This List
Private upon clicking the button. A registry is private (not
searchable) by default.
4. Multi-currency
When multi-currency is enabled, gift registry 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
5. Priority
The customer can change a product’s priority level.
6. Remove
When the customer clicks Remove, the item is removed from the
gift registry.
7. Quantity
The customer can set a specific quantity for a certain item. The
value is set to 1 by default.
8. Make this item public

When the customer deselects this checkbox, the individual item is
only viewable by the registry account holder.
9. Update
When the customer clicks Update, the requested changes are
made to the priority and quantity fields.
[customer] FSD 171
Gift Registry: Registrant(s) View – Tabs
When the customer clicks on any tab the information displays for
21.6.1 Gift Registry: Registrant(s) View - Tabs that specific tab.
The customer can edit this information.
1. Event Information
2. Pre-Event / Post Event Shipping
3. Purchases
[customer] FSD 172
Gift Registry: Registrant(s) View - Purchases
1. Quantity desired
21.6.2 Gift Registry: Registrant(s) View - Purchases 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 |
global navigation | footer).
3. Quantity purchased
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.
[customer] FSD 173
Gift Registry: Search Results
1. Advanced Search
21.7 Gift Registry: Search Results When the customer clicks this button, the entire registry search
window opens.
2. View Registry
When the customer clicks View registry, he or she is navigated to
the Wireframe: Gift Registry Shopper’s View.
[customer] FSD 174
Gift Registry: Shoppers View
1. Print
21.8 Gift Registry: Shoppers View When the customer clicks Print, the browser’s print dialog opens.
Content print is controlled via the print style sheet
[customer] FSD 175
22.0 Store Locator

[customer] FSD 176
Store Locator
1. Store Locator At Header

22.1 Store Locator The header is persistent throughout the web site. When a
customer clicks the Store Locator link, he or she is returned to this
page.
2. Radius
The customer can refine the search by using the zip code and
finding stores within the mile radius specified.
Note: The store locator uses the pipelet GetNearestStores, which

supports both miles and kilometers. The SiteGenesis Application
uses miles only, but can be modified 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
These are the valid countries in which a merchant has a store. This
is configurable in the Business Manager.
4. State/Province
These are the valid states and provinces.
5. Search Results
This is a “No results” inline display message.
[customer] FSD 177
Store Locator – Results
1. Store name hyperlink

22.2 Store Locator - Results The store name is configured in Business Manager. The store
name is rendered 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

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 returns the
state/province, zip code, or country name used in the selection
criteria from the store locator selection.
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 location in the wireframe
where you would implement this application.
[customer] FSD 178
Store Locator – Search Details
1. Store Image
22.3 Store Locator - Store Details This image is set up by a merchant within the Business Manager in
the Store Image attribute.
2. Store Attributes
Store attributes include store hours, store manager and store
events. Merchants can add additional attributes to the store locator
object to meet their requirements.
3. Close Button
When the customer clicks the Close button, the Store Details Hop
Up closes and the store results display.
4. Map
This is the Google map that points to the store address.
[customer] FSD 179

[customer] FSD 180
Customer Service
This page is accessed by a persistent link in the footer.

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 managed in
Business Manager.
The global content is cs-landing.
[customer] FSD 181
Customer Service – Left Navigation
23.2 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

This content is managed in Business Manager. The links are
dynamically generated from content located in the Customer
Service folder managed in Business Manager.
All links display individual content assets located within the
Customer Service folder and its subfolders. These subfolder create
the different navigational areas.
[customer] FSD 182
24.0 Contact Us
[customer] FSD 183
Contact Us
24.1 Contact Us 1. Email Message

This is an example of what a contact us email message will look
like to the customer.
[customer] FSD 184
25.0 Tooltips and Confirmation Windows

[customer] FSD 185
Tooltips
1. Tooltip box
25.1 Tooltips This is a simple hidden div that displays when the customer
mouses over the tooltip text. On mouse out the box disappears.
The text within is provided either by a content asset or a resource
bundle.
2. Tooltip text
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.
[customer] FSD 186
26.0 Error Pages

[customer] FSD 187
Errors: Disabled Cookies or Javascript
26.1 Errors: Disabled Cookies or Javascript 1. Cookies Error Message

This notifies the visitor that the browser is not configured to
accept cookies. This message is displayed in div above the
header.
2. JavaScript Alert
This notifies the visitor that the browser is not configured for
JavaScript. This message is displayed in div above the header.
[customer] FSD 188
Error - Client Side On Focus Validation
1. Required fields
26.2 Errors: Client Side On Focus Validation All required fields have client-side validation to ensure an entry
has been made.
More in-depth field validation is performed upon submit. Client-
side and server-side validation errors display the same way.
2. On focus alert
This notifies the customer that they skipped a required field. This
style error occurs 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.
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.
3. Errors
If there is a client-side error, the general error form displays, and
the form is not submitted to the server.
4. Apply button
After the customer clicks the Apply button, server-side form
validation occurs.
[customer] FSD 189
Errors: Client Side Required Field
The customer clicked the Apply button but the form was not
26.3 Errors: Client Side Required Field submitted to the server.
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 been entered. Required
fields display with a bullet before the label.
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 the server until the
customer completes the required fields and then clicks the Apply
button.
[customer] FSD 190
Errors: Server Side Invalid Data
The customer clicked Apply, and the form was submitted to the
26.4 Errors: Server Side Invalid Data server, but the data was invalid
1. Field label error

When a specific field is in an error state, its field label displays in
red italics.
2. Field error alert

If a specific field is in an error state, a message displays alerting
the customer to the required action.
[customer] FSD 191
Errors: Coupons
The customer can enter coupons on the cart or billing page. Errors
26.5 Errors: Coupons occur when the coupon does not exist or exists but does not
apply.
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

Coupon code [promo code name] is already in your cart.
[customer] FSD 192
Errors: Credit Card Submissions
All required fields have client-side validation to assure the

26.6 Errors: Credit Card Submissions customer made an entry. More in-depth field validation occurs
upon submit. Client-side and server-side validation errors display
the same way.
1. Select a Credit Card

There is no error message for this field. Not selecting an existing
credit card is always an option.
2. Name on Card
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 previously required field.
This client-side error occurs before and after the customer clicks
Apply.
3. Type
The customer must select a card type. Visa is selected by default.
4. Number
A possible error message is Invalid Credit Card Number. The field
label and the error message display in red.
5. Expiration Date
A possible error message is The Credit Card is expired. The field
label and the error message display in red.
6. Security Code
A possible error message is Invalid Security Code. The field label
and the error message display in red.
[customer] FSD 193
Errors: Coupon Codes – Gift Certificate Check Balance
26.7 Errors: Coupon Codes – Gift Certificate Check 1. Apply button

Discount codes cannot be validated until the customer clicks the
Apply button. Valid codes are automatically applied to the order
Balance amount. Invalid codes result in an error message above each field.
2. Coupon errors
These coupon entry errors might display:
- Coupon code x is unknown.
- Coupon code X is already in your cart.
- Coupon code “ECC-MEXA-RDTC-6D2Q-XRP9” can currently not
be added to your cart.
- <coupon code name> is invalid or qualifications have not been
met.
3. Gift certificate errors

These gift certificate entry errors may display:
a. - Invalid Gift Certificate
b. - Insufficient Funds on the gift certificate
[customer] FSD 194
Errors: Bill Me Later
1. Date of Birth
26.8 Errors: Bill Me Later The customer must enter their valid date of birth. The Continue
button is not available until all parts of the date are selected.

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:
Your entry is invalid.
3. Agree to terms
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 unchecked, an error
message displays.
This field is required.
4. Continue button
or the agree to terms check boxes are not pre-filled or selected, the
Continue button remains inactive.
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 the Bill Me
Later Web Service, which authorizes or declines the customer’s
request.
[customer] FSD 195
Errors: Confirm Email Address
When a customer enters a confirm email address on any form, the

26.9 Errors: Confirm Email Address application checks the spelling compared to the original email. If
there is a difference, an error message displays
[customer] FSD 196
Errors: Purchasing Gift Certificates
26.10 Errors: Purchasing Gift Certificates 1. Dollar amount exception

a. If the customer does not enter a correct amount, either on the
low or high scale, an error displays asking the customer to enter
the correct value. This error also occurs if the customer enters
non-numeric information.
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 using the wrong currency, an error message
displays. See the Wireframe: Header | global navigation | footer.
[customer] FSD 197
Errors: Login from Cart
1. Customer account credentials

26.11 Errors: Login from Cart If the customer enters an invalid email address or password, an
error message displays (see Wireframe: Error: my account login).
2. Invalid coupon code

If the customer enters an invalid coupon code, an error message
displays.
[customer] FSD 198
Errors: My Account login – Order Tracking
26.12 Errors: My Account Login – Order Tracking 1. Login error messaging

If the customer enters an incorrect email or password, the
appropriate message 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 permitted by the Commerce Cloud platform:
“Sorry, this does not match our records. Check your spelling and
try again.”
c. Customer will be locked out if he or she performs one more

invalid login: “Invalid password.
This account will be locked after one more invalid logins.”
d. Locked customer attempts to login: “This account ID currently

locked. Please try again later.
Within Business Manager, merchants can view/manage locked out
customers and specify site-specific preferences for the maximum
invalid login attempts, lockout effective period and the login
attempt reset time.
e. 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 logs in
with bad credentials 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 Manager.
2. Track orders error messaging

If the customer enters an invalid order number and/or billing post
code, an error message displays telling the customer:
“Your order number or billing zip code is incorrect. Please enter a
correct order number and valid postal code.”
See CAPTCHA above.
[customer] FSD 199
404: Missing Page
26.13 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.
1. Noresults
This page not found error message displays for situations that are
not covered by
specifi c error content or resource messages. This content asset is
404-callout.
2. No search results
This text is from resources referenced by templates, and display
instead of the above message for when a product ID, content asset
ID, or category ID is not found. The resources are:
search.nohits.message and search.nohits.searchlabel, found in the
search.properties resource fi le and referenced by the nohits.isml
template.
3. No results help
This is the content help message that displays when the product
ID is not found, the content asset ID (for page display) is not found,
or the category ID is not found.
This content asset is noresults-help.
4. Search box
This is standard search functionality.
5. noresults-bottom
This represents as content message that tells the customer how to
contact customer service. This content asset is noresults-bottom.
6. Customer service navigation

The standard customer service navigation displays.
[customer] FSD 200
General Error Page
This page opens when an error occurs in the application.

26.14 General Error Page
1. Customer service navigation
Standard customer service navigation displays.
2. Error message
This represents a content message that calls out to the customer
what has happened as a result of an error. The content asset is
error-callout.
3. Error banner
This represents a global slot called error-banner, which is
maintained in Business Manager.
4. Search box
This is standard search functionality.
5. Customer service messaging

This represents a content asset that notifi es the customer how to
contact customer service. The content asset is error-service.
6. Global slot
This represents a content asset slot that can be a promotional
message or a targeted message to the customer, used to promote
the brand. The slot name is error-promo.
[customer] FSD 201
27. Responsive Web Design

[customer] FSD 202
Home page
On the home page, the content slots display vertically, while the
27.1 Home page navigation menu and cart display as icons.
1. Open menu
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.
3. Home page - flash carousel

The carousel content slot is sized differently to fi t 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-bottomleft, home-bottom-
center, home-bottom-right, and home-bottom) display vertically.
[customer] FSD 203
Navigation
Responsive web design (RWD) is an approach that enables web-

27.2 Navigation based applications 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
• Large - 768px < viewport < 960px - displays in three columns
• Standard - viewport >= 960px - displays in three columns
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 additional details.
The Standard mode is a standard PC browser view. In general, the

Standard and Large modes provide similar visual functionality,
while the Medium and Small modes also provide similar visual
functionality.
1. Header | global navigation | footer

Headers, global navigational elements, and footers display
differently based on the mode:
- Small and Medium: the following elements display vertically in
the navigation area:
Stores
Login/Register
Wishlist
Gift Registry
- Large and Standard: displays icons on one line in the header.
- The last two lines (copyright and the “this is a demo” statement,
display on two separate lines for all modes except Small, where
each line wraps to a second line.
2. Category navigation
The Small and Medium modes provide category navigational
elements in a single column.
a. Click the arrow to view the main categories.
b. Click a main category to view subcategories.
[customer] FSD 204
Search Suggestion
1. One-column support
27.3 Search Suggestion For Small and Medium modes, the search suggestion displays
within the confines of a single column.
2. Select a suggestion
The customer can select a suggested article, category, or product
name.
[customer] FSD 205
Search Results Breadcrumbs
27.4 Search Results Breadcrumbs 1. Search breadcrumbs

For Small and Medium modes, the breadcrumbs display. The
customer must click the menu open icon to search again.
2. Search refinement
The customer can further refine their search via the search
refinement dropdown.
3. Search Results
For Small and Medium modes, the search results display in one
column.
4. Category Refinement
For Small and Medium modes, the category refinements display
beneath the search results.
[customer] FSD 206
Search Results Page
1. Page numbering - Small and Medium modes

27.5 Search Results Page 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 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

For large mode, the search refinement dropdown and navigation
dropdowns and icons displays the same as for the normal size
page.
3. Product grid - Small and Medium modes

For Small and Medium modes, the product grid defaults to 12
items (12 X 1) products per page, which the customer cannot
change.
4. Product grid - Large mode

For Large mode, the product grid defaults to 12 items (6 X 2), and
the customer can optionally view a different number of items per
page.
[customer] FSD 207
Search Results Page - Full Article
27.6 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.
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.
3. Content search refinements folders

For Small and Medium modes, the Customer Service content
folders display after the article.
[customer] FSD 208
Category Landing Page
1. Category landing slot

27.7 Category Landing Page For Small and Medium modes, the category-specific slot displays
beneath the breadcrumb.
2. Category search refinements

For Small and Medium modes, the category navigation displays
beneath the category landing slot. Category navigation can be sub-
categories, color selection, price selection, and/or new arrivals.
[customer] FSD 209
Unsupported features
1. Product details - compare products

27.8 Unsupported Features For Small and Medium modes, the compare checkbox does not
display: compare products is not supported with these modes.
For Large mode, the graphics are smaller than for Standard mode.
2. Quickview
For Small and Medium modes, there is no Quickview functionality.
3. Alert on Approaching discount

For Small and Medium modes, the alert on approaching message
does not display.
4. Last visited on the cart page

For Small and Medium modes, last visited details do not display on
the cart page.
[customer] FSD 210
Product Details
1. Display order
27.9 Product Details For the Small and Medium modes, the display fi ts into one
column, with the order of display as shown:
• Header
• Breadcrumb
• Product main image
• Alternate views
• Product name
• Item #
• Main attributes
• Product rating
• Price
• Promotion
• Variations
• Options
• Availability
• Quantity
• Add To Cart
• Add to Wishlist
• Add To Gift Registry
• Social media
• Product tabs
• You Might Also Like
• Footer
See the Wireframe: Product details - page markup.
2. Text wrap - variations

For the Small and Medium modes, the variation selection text
wraps if space is required.
3. Text wrap - add to

For the Small mode, the add to selections wrap.
4. You Might Like

For the Small and Medium modes, Next and Previous product
recommendations navigation displays in the You Might Like
section, replacing the navigation scroll 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 customer mouses over a You Might Like
product display graphics.
5. Product details - tabs

For the Small and Medium modes, the product details tabs (You
Might Like (described above), Description, Product Details, and
Reviews) display vertically in one column.
See Wireframe: Product details - tabs.
[customer] FSD 211
Cart
1. One-column display
27.10 Cart For the Small and Medium modes, the display fits into one column,
with the order of display as shown:
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
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 mode, the "Gift certificate will be delivered by
email" text wraps to the next line.
5. Checkout - account login

The customer clicks the Checkout button and then they are
navigated to the Checkout Login page. See the Wireframe:
Responsive web design - checkout login (the next page).
[customer] FSD 212
Cart - with Bundle
1. Product Information
27.10.1 Cart with Bundle For Small and Medium modes, product information displays in one
column.
[customer] FSD 213
Cart - Promotions - Choice of Bonus Products
27.10.2 Cart: Promotions – Choice of Bonus Products 1. One column

For Small and Medium modes, the choice of bonus products
window opens in one column.
2. Window display
The window overlays the product details page, which is not visible.
3. Multiple products
Multiple products display in vertical tiles.
[customer] FSD 214
Checkout – Login
27.11 Checkout – Login For the Small and Medium modes, these checkout login forms
display vertically.
The customer enters an email address and password and clicks
Login. Upon successful authentication, they are navigated to the
Shipping Address page.
2. Guest checkout
The customer enters address details as an anonymous user.
3. Create account
The customer is navigated to the Wireframe: User profi le -
personal data - new user.
4. Account help text

The customer can read checkout help.
[customer] FSD 215
Checkout: Step 1 Shipping/Method Page
27.12 Checkout: Step 1 – Shipping / Method Page The information on this page is for a logged-in user unless
otherwise indicated.
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.
3. Address Tooltip
For Small and Medium modes, the APO/FPO tooltip link does not
display
4. Phone Tooltip
For the Small and Medium modes, the Why is this required? tooltip
does not display.
5. Shipping Methods Tooltip

For the Small and Medium modes, the Shipping Methods tooltips
do not display.
6. Gift Certificate
For the Small and Medium modes, gift certificate details display as
shown.
[customer] FSD 216
Checkout: Step 2 Billing/Pay Method Page
27.13 Checkout: Step 2 – Billing / Pay Method Page The information on this page is for a logged-in user, unless
otherwise indicated.
1. Display order
2. Guest user
These fields do not display for a guest user.
3. Security code tooltip

For the Small and Medium modes, the Security Code tooltip does
not display.
4. Gift certificate
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.
[customer] FSD 217
Checkout: Step 3 Place Order
27.14 Checkout: Step 3 – Place Order The Place Order page represents the final page on which customers can
make changes to their order, including items in their cart, billing/shipping
addresses, and payment methods. The sales tax calculation is done using
the standard Commerce Cloud tax functionality and displays with the order
summary.
1. Display order
2. Gift certificate
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.
[customer] FSD 218
Checkout: Receipt Page
1. Display Order
27.15 Checkout: Receipt Page For the Small and Medium modes, this is the display order.
2. Print Page
For the Small and Medium modes, this is no Print Receipt link.
3. Gift Certificate
For the Small and Medium modes, two shipments will display if the order
includes gift certificates: one for the items and one for the gift certificate.
4. Guest Checkout
For the Small and Medium modes, the new customer account creation
form displays after the Shipment details and before the persistent footer on
the guest checkout receipt.
[customer] FSD 219
Checkout: Multiple Shipping: Step 1 Shipping
27.16 Checkout: Multiple Shipping – Step 1 Shipping See Wireframe: Checkout - step 1 shipping/method page for information
(in the Responsive web design section) on standard page functionality.
Multiple shipping is an alternative checkout process that is parallel to
single shipping. The customer can checkout the standard way, or perform
an alternative checkout 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.
Note: You must enable multi-shipping via a Business Manager custom site
preference.
1. Multiple ship addresses

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 shipping - logged in in the Responsive web design
section). The customer must enter information into the fields on this page.
2. Select from saved addresses

This section only displays for a logged in customer.
[customer] FSD 220
Checkout: Multiple Shipping: Step 2 Shipping Methods
1. Shipments
27.18 Checkout: Multiple Shipping Step 2 Shipping Each address that represents a shipping destination is split into a separate
shipment with a message “Shipment X” where X is the shipment number.
Methods
2. Shipment methods
The shipping method defaults to ground shipping. The customer can select
the appropriate shipping method. Once they select a shipping method, the
shipment total is adjusted to match the updated shipping method.
3. Promotional shipping message

If a specific shipment qualifies for a shipping discount, the appropriate
discount message displays.
4. Gift certificate shipment

Gift certificates will always be their own shipment, with the shipping
method set to Delivery Via Email. This cannot be changed.
5. Shipment calculations
Each shipment has its own shipping charge. Upon entering the Shipping
Method page, the shipping totals that display use the default shipping
method, with the costs reflecting the corresponding shipping charges to
the shipment. If the customer selects other shipping methods, the order
totals are refreshed.
6. Edit shipping
The customer returns to the Wireframe: Checkout - Multiple Shipping -
step 1 new shipping.
7. Continue
The Continue button is positioned beneath the shipment details, above the
contact number and Order Summary.
[customer] FSD 221
Checkout: Multiple Shipping: Step 3 Billing
1. Saved addresses
27.19 Checkout: Multiple Shipping Step 3 Billing No information is stored for a guest by default. A logged in user can select
a stored address.
See Wireframe: Checkout: Step 2 Billing/Pay Method Page - Logged in

User for page functionality.
This page shows the multiple shipping addresses.
[customer] FSD 222
Checkout: Multiple Shipping: Step 4 Place Order
See Wireframe: Checkout - step 3 - place order user logged in for general
27.20 Checkout: Multiple Shipping Step 4 Place Order page functionality.
1. Edit cart
When the customer clicks the Edit Cart link, they are returned to the cart
page where they can change the ordered quantity. The customer must
navigate to return to the place order page. See Wireframe: Checkout -
Multiple Shipping - step 4 place order page.
2. Edit shipping
When the customer clicks Edit in one of the Shipping Address sections,
they are returned to the shipping methods page. See Wireframe: Checkout
- Multiple Shipping - step 1 new shipping.
For example, a customer purchases 1 item and is shipping this product to
his brother.
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 address to return to the Multiple Shipments page to split the
order into two shipments.
The default is that the place order page does not allow customers to split
shipments.
[customer] FSD 223
Checkout: Multiple Shipping - Order Receipt
1. Shipment
27.21 Checkout: Multiple Shipping Order Receipt Each shipping address is split into a separate shipment, providing the
customer with an easy-to-read layout.
[customer] FSD 224
Checkout: Multiple Shipping: Step 1 Shipping Addresses
Each item in a multiple shipping cart is split into a quantity of 1, thus

enabling a customer to ship products to multiple recipients.
1. Shipping address steps

When the customer selects multiple shipping addresses, the checkout
process splits the shipping address selection task into two steps: the
shipping address page and shipping method page.
2. Order summary image view

The customer toggles the expansion to hide or show an image of the
product.
For a registered/logged in customer, all stored addresses display in the
drop down list, with the default address displaying for each line item. If the
Commerce Cloud platform is configured to support multi-shipping, and one
or more items are from one or more wishlists or gift registries (with multiple
items in the cart), the wishlist or gift registry item drop down lists display
with their respective default addresses.
For an unregistered customer, a message displays asking them to click

the Add New Address link to add a new address. Each address a
customer adds via the Add Address link is included in the drop down list
for all line items. If there is no address in the address book, the drop down
list does not display. It displays as soon as the customer adds the first
address.
4. Add or edit addresses

By default, text boxes are empty. The customer can optionally save the
address or cancel.
5. Add new address

When the customer clicks the Add/Edit Address link, the Add or Edit
Addresses window opens.
[customer] FSD 225
Gift Registry: Search Results
1. Search Results
[customer] FSD 226
Purchasing Gift Certificates
1. Display Order
27.22 Purchasing Gift Certificates For the Small and Medium modes, this is the display order.
[customer] FSD 227
User Profile: Returning Customer
1. Display Order
27.23 My Account: Returning Customer For the Small and Medium modes, this is the display order.
[customer] FSD 228
User Profile: Landing Page - Returning Customer
1. Display Order
27.24 My Account Landing Page For the Small and Medium modes, this is the display order.
[customer] FSD 229
User Profile: Personal Data
1. Display Order
27.25 My Account: Edit Personal Data For the Small and Medium modes, this is the display order.
[customer] FSD 230
User Profile: Addresses/Payment Methods/Order History
1. Addresses
27.26 My Account: Addresses / Payment Methods / Order For the Small and Medium modes, this is the display order.
History 2. Payment Methods

3. Order History
[customer] FSD 231
User Profile: Order Details
1. Order Details
27.27 My Account: Order Details For the Small and Medium modes, this is the display order
[customer] FSD 232
Wish List: Unauthenticated User
1. Unauthenticated User
27.28 Wish List: Unauthenticated User For the Small and Medium modes, this is the display order.
[customer] FSD 233
Wish List: Authenticated User
1. No Items
27.29: Wish List: Authenticated User For the Small and Medium modes, this is the display order.
2. Items
[customer] FSD 234
Wish List: Search Results / Public View
1. Search Results
27.30 Wish List: Search Results / Public View For the Small and Medium modes, this is the display order.
2. Public View
[customer] FSD 235
Gift Registry: Unauthenticated User
1. Unauthenticated User
27.31 Gift Registry: Unauthenticated User For the Small and Medium modes, this is the display order.
[customer] FSD 236
Gift Registry: Authenticated User
1. No registries
27.32 Gift Registry: Authenticated User For the Small and Medium modes, this is the display order.
2. Registries
[customer] FSD 237
Gift Registry: Creation - Event/Participants
27.33 Gift Registry: Creation – Event / Participants 1. Event/Participants

[customer] FSD 238
Gift Registry: Creation - Shipping
1. Event shipping
27.34 Gift Registry: Creation - Shipping For the Small and Medium modes, this is the display order.
2. Post event shipping address

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.
[customer] FSD 239
Gift Registry: Registrant(s) View
1. Registrant(s) View
27.35 Gift Registry: Registrant(s) view For the Small and Medium modes, this is the display order.
2. Tabs
For the Small and Medium modes, the customer clicks the tab to view
event, shipping, and purchase information.
[customer] FSD 240
Gift Registry: Shopper's View
27.37 Gift Registry: Shopper’s View 1. Shopper's View

[customer] FSD 241
[customer] FSD 242
Store Locator
1. Store Locator
27.38 Store Locator For the Small and Medium modes, this is the display order.
2. Store Locator - Search Results

[customer] FSD 243
Site Content
1. Customer Service Content

27.39 Site Content This content is managed in the Business Manager. This page is
dynamically generated showing links to all content located in the Customer
Service folder managed in the Business Manager. The global content is
cs-landing.

Salesforce Commerce Cloud FSD Template

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Salesforce Commerce Cloud FSD Template

Caricato da

Copyright:

Formati disponibili

[customer] FSD 1

Salesforce Commerce Cloud e-Commerce Design

Functional Specification Document (FSD)

Key Performance Indicators (KPIs)

1.0 Header | Footer | Global Elements

2.0 Homepage | Search | Article | Search Refinements

3.0 Category Page | Product Grid | Compare

4.0 Product Detail Page

5.0 Product Reviews

7.0 Gift Cards | eCertificates

8.0 In-Store Pickup

9.0 Mini-Cart | Cart

10.0 Checkout – Returning Customers

11.0 Checkout – Guest Checkout

12.0 Order Summary

13.0 Other Payment Methods

14.0 Checkout: Multiple Shipping Address

15.0 Purchasing Gift Certificates

17.0 Create An Account

18.0 Reset Password

19.0 Order History

20.0 Wish List

21.0 Gift Registry

22.0 Store Locator

23.0 Customer Service

25.0 Tooltips and Confirmation Windows

26.0 Error Pages

27. Responsive Web Design

Style Guide [customer]

Technical Specification Document (TSD) [Systems Integrator/Partner]

Data Mapping Documentation [Systems Integrator/Partner]

The following conventions are used in this document:

Denotes Content Slot

BOPIS Buy Online Pickup In Store

CSS Cascading Style Sheets

HTML Hypertext Markup Language

ISML Internet Store Markup Language

PDP Product Detail Page

PLP Product Listing Page

SaaS Software as a Service

SAYT Search As You Type

SFCC Salesforce Commerce Cloud

Key Performance Indicators (KPIs)

Internationalization and Locales

List all locales that are in scope for this release.

Site Name Locales

E.g., See locale list below for examples.

Locale ID Locale Name

zh_CN Chinese (China)

en_CA English (Canada)

en_FR English (France)

en_GB English (United Kingdom)

en_US English (United States)

fr_CA French (Canada)

fr_FR French (France)

de_DE German (Germany)

it_IT Italian (Italy)

ja_JP Japanese (Japan)

pt_BR Portuguese (Brazil)

es_MX Spanish (Mexico)

es_ES Spanish (Spain)

Desktop Tablet Mobile

Browser Window Scaling