Salesforce Commerce Cloud FSD Template
Salesforce Commerce Cloud FSD Template
Project Resources
Stakeholders
[customer] FSD 2
Related Documents
Introduction
About This Document
Audience
Overview
Glossary
Environment Configurations
Business Manager Roles and Users
Internationalization and Locales
Browser Compatibility
Browser Window Scaling
Accessibility
iFrames
Search Engine Optimization (SEO) and Site URLs
6.0 Quickview
6.1 Quickview – Standard / Single Variation Product
6.2 Quickview – Variation Product
6.3 Quickview – Product Set
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
24.0 Contact Us
24.1 Contact Us
Project Resources
Stakeholders
Name Role Company Email
[Customer]
[Customer]
[Customer]
[Systems Integrator/Partner]
[Systems Integrator/Partner]
[Systems Integrator/Partner]
Commerce Cloud
Commerce Cloud
Commerce Cloud
Related Documents
Document Title Company
UI Guidelines [customer]
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.
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
SG SiteGenesis
[customer] FSD 11
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
Locale Examples
zh Chinese
nl Dutch
en English
fr French
de German
it Italian
ja Japanese
es Spanish
Browser Compatibility
List all browser versions in each format that will be tested for compatibility.
The site will scale to fit the pixel width of the browser window of each device type as follows:
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
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?
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.
9. Tabular category navigation and menus. See the Wireframe: Category navigation.
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.1 Homepage
Homepage
3. Email Address
The customer can enter an email address to opt-into a newsletter or other
email notification.
[customer] FSD 22
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.
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
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.
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.
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”.
Note: An article is a content asset.
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
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.
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.
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”.
Note: An article is a content asset.
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
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.
1. Standard product
This shows the list price.
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.
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.
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.
Search Refinements
Certain refinements, such as color and size, display with swatches using
CSS to render them. This custom logic is handled in a template.
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.
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.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.
2. Search Refinements
Search refinements are defined at the category level within the Business
Manager (see Wireframe: Results Refinement).
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.
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
1. Product Thumbnail
These are thumbnail images of the products selected to compare.
Product Compare
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 “-”.
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).
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.
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
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
See Wireframe: Product details: pricing and promotions.
6. Availability messaging
If a product is on backorder, availability messaging shows the date if it is
known;
[customer] FSD 47
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.
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.
6. Availability messaging
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
4.1.3 Product Details – Variation Product with Options All option and variation selections update the product information without a
full page refresh.
4.1.4 Product Details – Product Set Individual product names are clickable and will navigate the customer to
that product’s detail page.
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.
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
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
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.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.
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
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.
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
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
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.
The customer can still add the items to the cart by clicking the Add to Cart
button.
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.”
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.
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
New Customers are returned to the Wireframe: Product Review Entry after
they have created an account.
[customer] FSD 63
6.0 Quickview
[customer] FSD 66
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.
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.
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.
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
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.
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.
1. Customer Information
7.1 Gift Certificate Details Page This is the gift certificate customer information.
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.
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.
1. Checkout
When the customer clicks this button, he or she is navigated to the
Shipping and Shipping Method page.
[customer] FSD 72
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.
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
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
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.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.
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
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
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.
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.
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
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.
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.
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
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.
[customer] FSD 85
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
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
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.
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
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
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.
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.
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.
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
3. Number of items
The quantity listed for a product within a bundle is view only.
[customer] FSD 94
[customer] FSD 95
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.
4. Multi-currency
Customers cannot change currency once the checkout
[customer] FSD 96
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.
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.
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.
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
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
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
9. Shipping Promo
Display of Shipping Promo Name.
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.
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.
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 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.
6. Continue checkout
This element returns the customer to the Wireframe: Checkout - step
3 place order.
[customer] FSD 110
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.
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
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.
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
When the customer clicks the Edit link, he or she is returned to the
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.
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
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
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
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.
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
If any of the required fields, date of birth, social security number,
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
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.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.
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.
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.
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.
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
2. Shipping addresses
This page shows the multiple shipping addresses.
[customer] FSD 131
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
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
1. Customer information
15.1 Purchasing Gift Certificates This is the gift certificate customer information.
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.
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
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.
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 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
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
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
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
2. Returning customers
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.
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).
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.
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.
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.
My Account – Addresses
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
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.
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
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
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
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).
Create 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).
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.
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.
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
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
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
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”.
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. 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
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.
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.
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.
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
Wireframe: Header | global navigation | footer.
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
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
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.
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.
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
Wireframe: Header | global navigation | footer.
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.
9. Update
When the customer clicks Update, the requested changes are
made to the priority and quantity fields.
[customer] FSD 171
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
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
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
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
Store Locator
2. Radius
The customer can refine the search by using the zip code and
finding stores within the mile radius specified.
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
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
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 Service
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.
24.0 Contact Us
[customer] FSD 183
Contact Us
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
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
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
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.
The customer clicked Apply, and the form was submitted to the
26.4 Errors: Server Side Invalid Data server, but the data was invalid
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.
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).
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
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.
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.
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
If any of the required fields, date of birth, social security number,
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
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.
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.
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.
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
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.
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
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
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
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.
Unsupported features
2. Quickview
For Small and Medium modes, there is no Quickview functionality.
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.
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.
1. Product Information
27.10.1 Cart with Bundle For Small and Medium modes, product information displays in one
column.
[customer] FSD 213
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.
1. Returning customers
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.
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.
6. Gift Certificate
For the Small and Medium modes, gift certificate details display as
shown.
[customer] FSD 216
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
For the Small and Medium modes, this is the display order.
2. Guest user
These fields do not display for a guest user.
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
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
For the Small and Medium modes, this is the 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
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
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. 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.
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
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.
2. Shipping addresses
This page shows the multiple shipping addresses.
[customer] FSD 222
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
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
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
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.
1. Search Results
For the Small and Medium modes, this is the display order.
[customer] FSD 226
1. Display Order
27.22 Purchasing Gift Certificates For the Small and Medium modes, this is the display order.
[customer] FSD 227
1. Display Order
27.23 My Account: Returning Customer For the Small and Medium modes, this is the display order.
[customer] FSD 228
1. Display Order
27.24 My Account Landing Page For the Small and Medium modes, this is the display order.
[customer] FSD 229
1. Display Order
27.25 My Account: Edit Personal Data For the Small and Medium modes, this is the display order.
[customer] FSD 230
1. Addresses
27.26 My Account: Addresses / Payment Methods / Order For the Small and Medium modes, this is the display order.
3. Order History
For the Small and Medium modes, this is the display order.
[customer] FSD 231
1. Order Details
27.27 My Account: Order Details For the Small and Medium modes, this is the display order
[customer] FSD 232
1. Unauthenticated User
27.28 Wish List: Unauthenticated User For the Small and Medium modes, this is the display order.
[customer] FSD 233
1. No Items
27.29: Wish List: Authenticated User For the Small and Medium modes, this is the display order.
2. Items
For the Small and Medium modes, this is the display order.
[customer] FSD 234
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
For the Small and Medium modes, this is the display order.
[customer] FSD 235
1. Unauthenticated User
27.31 Gift Registry: Unauthenticated User For the Small and Medium modes, this is the display order.
[customer] FSD 236
1. No registries
27.32 Gift Registry: Authenticated User For the Small and Medium modes, this is the display order.
2. Registries
For the Small and Medium modes, this is the display order.
[customer] FSD 237
1. Event shipping
27.34 Gift Registry: Creation - Shipping For the Small and Medium modes, this is the display order.
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
Store Locator
1. Store Locator
27.38 Store Locator For the Small and Medium modes, this is the display order.
Site Content