View
165
Download
0
Embed Size (px)
Citation preview
Hitachi Solutions Ecommerce
Store Front Templates & Widgets
This document is the property of Hitachi Solutions and may not be redistributed without written
permission from Hitachi Solutions. You may not reproduce this document in any form except for printing
it for users of the Hitachi Solutions Ecommerce system. Any other reproduction will be considered a
violation and is subject to legal action.
HITACHI SOLUTIONS.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
1
TABLE OF CONTENTS
1. Introduction ............................................................................................................................................................................................................................... 11
2. HTML Template Documentation................................................................................................................................................................................................ 11
Home Page Templates ................................................................................................................................................................................................................... 13
2.1. HTML_Home ................................................................................................................................................................................................................. 13
Category Templates / Category Landing Pages .............................................................................................................................................................................. 19
2.2. HTML_Category_home ................................................................................................................................................................................................. 19
2.3. HTML_ProductSearchOutput ........................................................................................................................................................................................ 25
2.4. HTML_LookListing ......................................................................................................................................................................................................... 35
2.5. HTML_AritcleSearchOutput .......................................................................................................................................................................................... 36
Product Detail Templates ............................................................................................................................................................................................................... 37
2.6. HTML_Apparel .............................................................................................................................................................................................................. 37
2.7. HTML_ApparelGroup1 .................................................................................................................................................................................................. 40
2.8. HTML_ApparelGroup2 .................................................................................................................................................................................................. 42
2.9. HTML_ApparelQuickView ............................................................................................................................................................................................. 44
2.10. HTML_DigitalSoftware_Electronics ............................................................................................................................................................................... 44
2.11. HTML_Consumer_Electronics_Quickview1 .................................................................................................................................................................. 45
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
2
2.12. HTML_ComputerConfigurableGroup ............................................................................................................................................................................ 46
2.13. HTML_General_Sporting_Equipment1 ......................................................................................................................................................................... 47
2.14. HTML_General_Sporting_Equipment_Quickviewa ....................................................................................................................................................... 48
2.15. HTML_Cosmetics ........................................................................................................................................................................................................... 49
2.16. HTML_Cosmetics_QuickView1 ...................................................................................................................................................................................... 53
2.17. HTML_GiftCertificate .................................................................................................................................................................................................... 53
2.18. HTML_Tools1 ................................................................................................................................................................................................................ 55
2.19. HTML_Tools_Quickview1 .............................................................................................................................................................................................. 55
2.20. HTML_Tools2 ................................................................................................................................................................................................................ 56
2.21. HTML_File Attachment ................................................................................................................................................................................................. 58
2.22. HTML_Article ................................................................................................................................................................................................................. 59
2.23. HTML_Bundled .............................................................................................................................................................................................................. 61
2.24. HTML_Bundledquickview .............................................................................................................................................................................................. 63
3. Widget Documentation ............................................................................................................................................................................................................. 63
Common Widgets ........................................................................................................................................................................................................................... 64
3.1. Page Header .................................................................................................................................................................................................................. 64
3.2. Footer ............................................................................................................................................................................................................................ 69
3.3. Navigation ..................................................................................................................................................................................................................... 72
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
3
3.4. News Letter ................................................................................................................................................................................................................... 74
3.5. Display Message ............................................................................................................................................................................................................ 75
3.6. Error Message ............................................................................................................................................................................................................... 75
Home Page Widgets ....................................................................................................................................................................................................................... 76
3.7. Best Seller ...................................................................................................................................................................................................................... 76
3.8. Customer Reviews ......................................................................................................................................................................................................... 77
3.9. Featured Products ......................................................................................................................................................................................................... 79
3.10. Mini Cart ........................................................................................................................................................................................................................ 81
3.11. File Attachment ............................................................................................................................................................................................................. 82
3.12. Save Cart ....................................................................................................................................................................................................................... 84
3.13. Saved Cart ..................................................................................................................................................................................................................... 86
3.14. Saved Cart List ............................................................................................................................................................................................................... 88
3.15. Saved Cart Overlay ........................................................................................................................................................................................................ 90
3.17. Reward Earnings ............................................................................................................................................................................................................ 92
3.18. Most Popular ................................................................................................................................................................................................................. 92
3.19. Most Popular Search Keywords .................................................................................................................................................................................... 96
3.20. New Arrivals .................................................................................................................................................................................................................. 97
3.21. News Feed ..................................................................................................................................................................................................................... 98
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
4
3.22. On Sale .......................................................................................................................................................................................................................... 99
3.23. Price............................................................................................................................................................................................................................. 101
3.24. Product List Multi Item ................................................................................................................................................................................................ 103
3.25. Product List Single Item ............................................................................................................................................................................................... 104
3.26. Quick View Link ........................................................................................................................................................................................................... 106
3.27. Review & Rating .......................................................................................................................................................................................................... 109
3.28. Static Content .............................................................................................................................................................................................................. 110
3.29. Stock Status ................................................................................................................................................................................................................. 110
3.30. Search In List ............................................................................................................................................................................................................... 112
Category Landing Page Widgets ................................................................................................................................................................................................... 112
3.31. Breadcrumb ................................................................................................................................................................................................................. 112
3.32. Category List ................................................................................................................................................................................................................ 113
3.33. Recently Viewed Product ............................................................................................................................................................................................ 115
3.34. Recommendations ...................................................................................................................................................................................................... 117
3.35. Best Seller .................................................................................................................................................................................................................... 119
3.36. Featured Product ........................................................................................................................................................................................................ 119
3.37. Most Popular ............................................................................................................................................................................................................... 119
3.38. New Arrivals ................................................................................................................................................................................................................ 119
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
5
3.39. On Sale ........................................................................................................................................................................................................................ 119
3.40. Static Content .............................................................................................................................................................................................................. 119
3.41. Mini Cart ...................................................................................................................................................................................................................... 120
3.42. Quick View................................................................................................................................................................................................................... 120
3.43. Review & Rating .......................................................................................................................................................................................................... 120
3.44. Product List Single Item ............................................................................................................................................................................................... 120
3.45. Product List Multi Item ................................................................................................................................................................................................ 120
Product Listing Page Widget ........................................................................................................................................................................................................ 120
3.46. Catalog Filters .............................................................................................................................................................................................................. 120
3.47. Paging .......................................................................................................................................................................................................................... 126
3.48. Product Comparison.................................................................................................................................................................................................... 128
3.49. Product Comparison List ............................................................................................................................................................................................. 131
3.50. Product List ................................................................................................................................................................................................................. 132
3.51. Sorting ......................................................................................................................................................................................................................... 138
3.52. BreadCrumb ................................................................................................................................................................................................................ 139
3.53. Mini Cart ...................................................................................................................................................................................................................... 139
3.54. Product List Single Item ............................................................................................................................................................................................... 139
3.55. Quick View................................................................................................................................................................................................................... 139
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
6
3.56. Recently Viewed Products........................................................................................................................................................................................... 140
3.57. Recommendations ...................................................................................................................................................................................................... 140
3.58. Review & Rating .......................................................................................................................................................................................................... 140
3.59. Static Content .............................................................................................................................................................................................................. 140
3.60. Stock Status ................................................................................................................................................................................................................. 140
Product Details Page Widgets ...................................................................................................................................................................................................... 140
3.61. Stock Keeping Unit (SKU) ............................................................................................................................................................................................ 140
3.62. Card Designs ................................................................................................................................................................................................................ 147
3.63. Gift Certificate SKU ...................................................................................................................................................................................................... 148
3.64. Color Swatch ............................................................................................................................................................................................................... 152
3.65. Cross Selling ................................................................................................................................................................................................................ 154
3.66. Customer Feedback ..................................................................................................................................................................................................... 155
3.67. Customer Who Bought Also Bought ........................................................................................................................................................................... 157
3.68. Downloadable SKU ...................................................................................................................................................................................................... 158
3.69. Editorial Reviews ......................................................................................................................................................................................................... 159
3.70. Twitter Link ................................................................................................................................................................................................................. 160
3.71. Google Plus Link .......................................................................................................................................................................................................... 161
3.72. Notify Me .................................................................................................................................................................................................................... 161
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
7
3.73. Product Accessories .................................................................................................................................................................................................... 163
3.74. Product Alternate Image ............................................................................................................................................................................................. 166
3.75. Product Downloads ..................................................................................................................................................................................................... 167
3.76. Product Navigation ...................................................................................................................................................................................................... 168
3.77. Product Options .......................................................................................................................................................................................................... 169
3.78. Product Reviews .......................................................................................................................................................................................................... 171
3.79. Product Videos ............................................................................................................................................................................................................ 172
3.80. Share This .................................................................................................................................................................................................................... 174
3.81. SKU List ........................................................................................................................................................................................................................ 174
3.82. Share Product Images ................................................................................................................................................................................................. 177
3.83. Share Product Images - Details ................................................................................................................................................................................... 179
3.84. Shipping Calculator ..................................................................................................................................................................................................... 180
3.85. Customer Reviews ....................................................................................................................................................................................................... 181
3.86. Mini Cart ...................................................................................................................................................................................................................... 181
3.87. Quick view ................................................................................................................................................................................................................... 181
3.88. Recently Viewed Products........................................................................................................................................................................................... 181
3.89. Recommendations ...................................................................................................................................................................................................... 181
3.90. Review & Rating .......................................................................................................................................................................................................... 181
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
8
3.91. Stock Status ................................................................................................................................................................................................................. 181
3.92. Static Content .............................................................................................................................................................................................................. 181
Checkout Widgets ........................................................................................................................................................................................................................ 182
3.93. Shopping Cart .............................................................................................................................................................................................................. 182
3.94. Customer Login ........................................................................................................................................................................................................... 183
3.95. Customer Sign In ......................................................................................................................................................................................................... 187
3.96. Guest Login .................................................................................................................................................................................................................. 188
3.97. Customer Registration ................................................................................................................................................................................................ 189
3.98. Forgot Password .......................................................................................................................................................................................................... 193
3.99. Shipping ....................................................................................................................................................................................................................... 195
3.100. Shipping Address ......................................................................................................................................................................................................... 196
3.101. Shipping Rate .............................................................................................................................................................................................................. 197
3.102. Cart summary .............................................................................................................................................................................................................. 198
3.103. Order Summary ........................................................................................................................................................................................................... 199
3.104. Cart Lines ..................................................................................................................................................................................................................... 200
3.105. Apply Coupon .............................................................................................................................................................................................................. 200
3.106. Applied Coupon ........................................................................................................................................................................................................... 203
3.107. Gift Certificate Redemption ........................................................................................................................................................................................ 204
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
9
3.108. Reward Earning ........................................................................................................................................................................................................... 204
3.109. Reward Redemption ................................................................................................................................................................................................... 207
3.110. Customer Reward Balance .......................................................................................................................................................................................... 209
3.111. Advance Payment........................................................................................................................................................................................................ 209
3.112. Billing Address ............................................................................................................................................................................................................. 211
3.113. Order Payment ............................................................................................................................................................................................................ 212
3.114. Payment Methods ....................................................................................................................................................................................................... 212
3.115. Order Comments ......................................................................................................................................................................................................... 215
3.116. Order Complete........................................................................................................................................................................................................... 215
3.117. Quote to Order Conversion ......................................................................................................................................................................................... 218
3.118. QUOTE SUMMARY ...................................................................................................................................................................................................... 220
3.119. Quote to Order Conversion – Shipping Address ......................................................................................................................................................... 220
3.120. Quote to Order Conversion – Order Complete ........................................................................................................................................................... 221
3.121. Quick Order ................................................................................................................................................................................................................. 223
3.122. Quick Order Entry Pad ................................................................................................................................................................................................. 224
3.123. Quick Order List ........................................................................................................................................................................................................... 225
3.124. SKU Lookup ................................................................................................................................................................................................................. 226
3.125. Edit order on Online store ........................................................................................................................................................................................... 228
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
10
3.126. Abandon Cart .............................................................................................................................................................................................................. 230
3.127. Abandon Cart Lines ..................................................................................................................................................................................................... 232
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
11
1. INTRODUCTION
Hitachi Solutions Ecommerce online store offers a large number of out of the box HTML Templates and Widgets. These templates and widgets can be used in
your eCommerce online store as is or with slight modifications.
HTML Templates are named based on the type of merchandize that they advertise and sell on the eCommerce online store. Widgets on the other hand are
named on the purpose that they serve. Both Templates and Widgets have been grouped based on the purpose they serve best (Home Page, Product Listing
Page or Product Detail Page).
2. HTML TEMPLATE DOCUMENTATION
This section will introduce you to various HTML Templates that are available with Hitachi Solutions Ecommerce. These templates can be assigned from the
Hitachi Solutions Ecommerce Manager Panel to various Product or Category web pages.
Name (Click on the name to view the template
detail)
Template Name (As it appears in the Manager Panel Template Drop Down)
Template Path (Under store front wwwroot folder)
2.1. HTML_Home Home1 Home 3 Home 4 Home 5 Home 6 Home 7 Home 8
Views\ category\html_c_home1.ascx Views\ category\html_c_home3.ascx Views\ category\html_c_home4.ascx Views\ category\html_c_home5.ascx Views\ category\html_c_home6.ascx Views\ category\html_c_home7.ascx Views\ category\html_c_home8.ascx
2.2. HTML_CategoryHome Category Home 1 Category Home 2 Category Home 3 Category Home 4 Category Home 5
Views\html_categoryhome1.ascx Views\html_categoryhome2.ascx Views\html_categoryhome3.ascx Views\html_categoryhome4.ascx Views\html_categoryhome5.ascx
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
12
2.3. HTML_ProductSearchOutput Product Search Output 1 Product Search Output 2 Product Search Output 3 Product Search Output 4 Product Search Output 5 Product Search Output 6 Product search Output 7
Views\category\html_c_productsearchoutput1.ascx Views\category\html_c_productsearchoutput2.ascx Views\category\html_c_productsearchoutput3.ascx Views\category\html_c_productsearchoutput4.ascx Views\category\html_c_productsearchoutput5.ascx Views\category\html_c_productsearchoutput6.ascx Views\category\html_c_productsearchoutput7.ascx
2.4. HTML_LookListing Apparel Look Listing Views\category\html_c_looklisting.ascx 2.5. HTML_Articlesearchoutput1 Article Search Views\article\html_c_articlesearchoutput1.ascx 2.6. HTML_Apparel Apparel 1 - Size & Color
Apparel 2 - Size & Color Apparel 3 - Size & Color - Personalized
Views\product\html_c_apparel1.ascx Views\product\html_c_apparel2.ascx Views\product\html_c_apparel3.ascx
2.7. HTML_Apparelgroup1 Apparel Group 1 Views\product\html_c_apparelgroup1.ascx 2.8. HTML_Apparelgroup2 Apparel Group 2 Templates\GlobalApparel\Views\product\html_c_apparelgroup2.asc
x 2.9. HTML_ApparelQuickview MiniApparel Quick View 1
MiniApparel Quick View 2 Views\product\html_c_apparelquickviewa.ascx Views\product\html_c_apparelquickviewb.ascx
2.10. HTML_DigitalSoftware_Electronics Digital Software and Electronics 1
Views\product\html_c_digitalsoftware_electronics1.ascx
2.11. HTML Consumer Electronics Quickview Consumer electronics Quick View 1
Views\product\ html_c_Consumer_electronics1_quickview1.ascx
2.12. HTML_ComputerConfigurable_group Computer Configurable Group Views\product\ html_c_computer_configurable_group.ascx 2.13. HTML_General_Sporting_Equipment General Sporting Equipment 1 Views\product\html_c_general-sporting-equipment1.ascx 2.14. HTML_General_Sporting_Equipment_Quickvi
ew General Sporting Equipment Quick View 1
Views\product\html_c_general-sporting-equipment-quickviewa.ascx
2.15. HTML_Cosmetics Cosmetics1 Views\product\html_c_cosmetics1.ascx 2.16. HTML_Cosmetics_Quickview Cosmetics Quick View 1 Views\product\html_c_cosmetics1_quickview1.ascx 2.17. HTML_GiftCertificate Gift Certificate 1 Views\product\html_c_giftcertificate1.ascx 2.18. HTML_Tools1 Tools1 Views\product\html_c_tools1.ascx 2.19. HTML Tools QuickView Tools Quick View 1 Views\product\html_c_tools1_quickview1.ascx 2.20. HTML Tools2 Tools2 Views\product\html_c_tools2.ascx 2.21. HTML_FileAttachment File Attachment Views\product\html_c_fileattachment.ascx 2.22. HTML_Article Articles Detail1 Views\article\html_c_article.ascx 2.23. HTML Bundled N/A Views\product\html_c_bundled.ascx
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
13
2.24. HTML_Bundled Quickview N/A Views\product\html_c_bundledquickview.ascx 2.25. Page_CMS This is the ASPX page that is
used to host all non- catalog web pages on the store front.
Views\store\page_c_cms.aspx
HOME PAGE TEMPLATES
2.1. HTML_HOME
Template Options :- Home
File Path –Templates\MobileSerenity\ Views\ category\html_c_home1.ascx (Available in version 6.3 and above)
File Path –Views\ category\html_c_home3.ascx (Available in version 6.3 and above)
File Path –Views\ category\html_c_home4.ascx (Available in version 5.0 and above)
File Path –Views\ category\html_c_home5.ascx (Available in version 6.0 and above)
File Path –Views\ category\html_c_home6.ascx (Available in version 6.0 and above)
File Path –Views\ category\html_c_home7.ascx (Available in version 5.0 and above)
File Path –Views\ category\html_c_home8.ascx (Available in version 6.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
14
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
15
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
16
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
17
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
18
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
19
Description:-
This home page template decides which widgets to be rendered. Customers first visit the homepage on the online store. Thus layout of homepage must be easy to navigate, as well as uncluttered.
CATEGORY TEMPLATES / CATEGORY LANDING PAGES
2.2. HTML_CATEGORY_HOME
Widget-HTML_Category Home
File Path- Views\html_categoryhome1.ascx (Available in version 5.0 and above)
File Path- Views\html_categoryhome2.ascx (Available in version 5.0 and above)
File Path- Views\html_categoryhome3.ascx (Available in version 6.0 and above)
File Path- Views\html_categoryhome4.ascx (Available in version 6.0 and above)
File Path- Views\html_categoryhome5.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
20
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
21
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
22
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
23
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
24
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
25
Description:-
Catalog is formed of categories, sub-categories and products. Thus category divides merchandize in different groups. Categories organize catalog in such a way that with minimum number of clicks customers reach the product they are interested in. Thus, it makes navigation easier for customers.
These templates can be used to show category lists.
2.3. HTML_PRODUCTSEARCHOUTPUT
Widget- HTML_Product Search Output
File Path-Views\category\html_c_productsearchoutput1.ascx (Available in version 5.0 and above)
File Path-Views\category\html_c_productsearchoutput2.ascx (Available in version 5.0 and above)
File Path-Views\category\html_c_productsearchoutput3.ascx (Available in version 5.0 and above)
File Path-Views\category\html_c_productsearchoutput4.ascx (Available in version 6.0 and above)
File Path-Views\category\html_c_productsearchoutput5.ascx (Available in version 6.0 and above)
File Path-Views\category\html_c_productsearchoutput6.ascx (Available in version 6.3 and above)
File Path-Views\category\html_c_productsearchoutput7.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
26
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
27
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
28
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
29
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
30
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
31
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
32
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
33
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
34
Description-
This template renders the product list. It also shows ‘Sort’ and ‘Narrow Your Result ‘options.
While browsing through the site, customers usually spend more time on the product listing page. A customer will click on the product which he likes and finds interesting.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
35
2.4. HTML_LOOKLISTING
Widget- HTML_Looklisting
File Path-Views\category\html_c_looklisting.ascx (Available in version 6.0 and above)
Description-
This template lists all group products. It displays scrolling list of images which the shopper can view.
By clicking on images, the customer can view all the products which complete that specific look. Like mannequins in a physical store display the complete attire, we display a full page image for the same look.
Attractive images catch a customer’s eye and most often compels them to purchase the product.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
36
2.5. HTML_ARITCLESEARCHOUTPUT
Widget-Article Search Output
File Path- Views\article\html_c_articlesearchoutput1.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
37
Description-
This template is used to render the article list.
The article title with a little description is shown. Date when article is published with name of its writer is accompanied with the article. Rating for each article is shown. Articles can be sorted based on recent posts or popular posts.
PRODUCT DETAIL TEMPLATES
2.6. HTML_APPAREL
Widget- HTML_Apparel
File Path-Views\product\html_c_apparel1.ascx (Available in version 5.0 and above)
File Path-Views\product\html_c_apparel2.ascx (Available in version 5.0 and above)
File Path-Views\product\html_c_apparel3.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
38
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
39
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
40
Description-
This template is used to show product details page.
On this page we can show product details, product features, description, customer reviews and ratings, related products, history of browsed products, offers on a product if any, and links to social networking sites.
2.7. HTML_APPARELGROUP1
Widget- HTML_Apparelgroup1
File Path-Views\product\html_c_apparelgroup1.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
41
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
42
Description-
Product groups allow you to offer various products together.
This template is used to show such grouped products. Here all products are treated as individual products which customer is buying at a time. After clicking on ‘Add to Cart’ button all products are added to the shopping cart as one entry per product (Refer Fig.1). In the cart the customer has the option to remove any product he doesn’t wish to buy.
2.8. HTML_APPARELGROUP2
Widget- HTML_Apparelgroup2
File Path-Templates\GlobalApparel\Views\product\html_c_apparelgroup2.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
43
Description-
Product groups allow you to offer different products together. For example matching pant, belt and top.
This template is used to show these grouped products. Here all options chosen by the customer are added to cart as a single product. When added to cart it shows a single entry for a product (Refer Fig.1). That means if a customer wishes to change the pant color he will have to delete the product from cart, select color for pant, select top, select belt and then click on ‘Add to cart’ button to purchase.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
44
2.9. HTML_APPARELQUICKVIEW
Widget- HTML_ApparelQuickview
File Path-Views\product\html_c_apparelquickviewa.ascx (Available in version 5.0 and above)
File Path -Views\product\html_c_apparelquickviewb.ascx (Available in version 5.0 and above)
Description-
Quick view window appears when customer clicks on the quick view link.
Quick view allows customer to view product details without navigating out of the current page.
Quick view minimizes customer’s navigation.
This allows the visitor/customer to get a quick glance at the product without leaving search results or featured products or any other area of the website.
This template provides product details in a compact way and customer stays on the page he is browsing. Customer may choose color and size combination, and can add product to cart by clicking on ‘Add to Shopping Cart’.
2.10. HTML_DIGITALSOFTWARE_ELECTRONICS
Widget – HTML_DigitalSoftware_Electronics
File Path - Views\product\html_c_digitalsoftware_electronics1.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
45
Description:-
Electronic products are very complex and costly. Customers take more time to evaluate such products. Different products have different attributes. For example TV can have attributes such as screen size, LED/LCD screen etc. Laptop will have attributes such as OS, Processor, RAM size, Hard disk size etc.
In order to provide detailed information about the product to the visitors, this template is used. Product name, SKU number, inventory status, price of a unit, and description is provided.
Information is arranged in tab format with heads like features of product, downloads, customer reviews, optional accessories that can be purchased along with product.
To educate customers on how to handle/operate the device, ‘Learn’ tab is also provided. This tab may contain instructions manuals, and product specifications.
Downloads tab provides free downloads available for a product. Customer reviews about product can be shown. Write a review option is also provided.
Installation services can be provided from the website. Related products used as a cross selling technique are shown with a product. History of recently browsed products is also shown.
2.11. HTML_CONSUMER_ELECTRONICS_QUICKVIEW1
Widget- HTML_Consumer_Electronics_Quickview1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
46
File Path – Views\product\ html_c_Consumer-electronics1_quickview1.ascx (Available in version 6.0 and above)
This quick view template allows customers to glance at product and available accessories with it.
2.12. HTML_COMPUTERCONFIGURABLEGROUP
Widget- html_c_computer_configurable_group
File Path-Templates\GadgetsOnLine\Views\product\html_c_computer_configurable_group.ascx (Available in version 6.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
47
This template is configured for group products which have multiple heirarchical groups.
2.13. HTML_GENERAL_SPORTING_EQUIPMENT1
Widget - HTML_General_Sporting_Equipment1
File Path – Views\product\html_c_general-sporting-equipment1.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
48
This template is used to show sporting equipment. Equipment has only features and comes in standard size.
2.14. HTML_GENERAL_SPORTING_EQUIPMENT_QUICKVIEWA
Widget- HTML_General_Sporting_Equipment_Quickviewa
File Path – Views\product\html_c_general-sporting-equipment-quickviewa.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
49
This quick view template allow customer to glance at product & provides him with sufficient information about merchandize. This template shows product description only.
2.15. HTML_COSMETICS
Widget – HTML_Cosmetics
File Path - Views\product\html_c_cosmetics1.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
50
Description
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
51
Fig.1 Cosmetics are used to enhance a person’s appearance. Cosmetic products are directly applied on body parts and so customers are very careful while choosing a product.
Ingredients are central to a cosmetic product and necessary to mention in product description.
‘How to use’ information can add to knowledge of customers and will make it effortless for them to use the product.
Details and benefit of the product must be well communicated, because it is something that will attract customers. It will erase all the doubts in the mind of the customer.
This template helps you arrange all this information on the product details page.
Fig.1 – Cosmetics1 made compatible with Mobile tablets via CSS changes
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
52
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
53
2.16. HTML_COSMETICS_QUICKVIEW1
Widget - HTML_Cosmetics_Quickview1
File Path – Views\product\html_c_cosmetics1_quickview1.ascx (Available in version 6.0 and above)
Description:-
Quick view provides customers with the option to directly view product details.
Customers can add the product to cart by clicking on ‘Add to Bag’ button.
This template allows putting all information together. It shows product details, direction to use it and product ingredients.
2.17. HTML_GIFTCERTIFICATE
Widget- HTML_Giftcertificate
File Path-Views\product\html_c_giftcertificate1.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
54
Description-
Gift Certificate/Gift Vouchers is a restricted monetary equivalent that can be used as an alternative to a non-monetary gift. Gift certificate saves the donor from choosing a specific gift. It also gives the receiver freedom to use the gift certificate as per his convenience.
Gift Certificate has an amount and does not have an expiration date. Each Gift Certificate has a unique code. This unique code is required while redeeming the gift certificate. Gift certificate purchase (via the template) and redemption is available for Global Apparel theme only.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
55
2.18. HTML_TOOLS1
Widget – HTML_Tools1
File Path - Views\product\html_c_tools1.ascx (Available in version 6.3 and above)
Description:-
This template is specially designed to sell tools. It has out of box capabilities for downloading attachments or specifications attached to the product. Quick Order Entry module is offered as Quick Order Entry Pad where shopper can punch in item code and quantity to add them to an order.
2.19. HTML_TOOLS_QUICKVIEW1
Widget – HTML_Tools_Quickview1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
56
File Path - Views\product\html_c_tools_quickview1.ascx (Available in version 6.3 and above)
Description:-
Quick view provides customers with option to directly view product details for the tool. Customers can add the product to cart by clicking on ‘Add to Cart’ button.
This template allows putting all information together. It shows product details, specifications and downloads.
2.20. HTML_TOOLS2
Widget – HTML_Tools2
File Path - Views\product\html_c_tools2.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
57
Description:-
This template is specially designed to sell parts catalog for tools merchandize. Shopper can purchase any specific part for a product in required quantity or buy multiple parts using buy all.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
58
2.21. HTML_FILE ATTACHMENT
Widget – HTML_File Attachment
File Path - Views\product\html_c_fileattachment.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
59
Description:-
This template is specially designed to sell merchandize that requires shoppers to provide supporting documents. Shopper can upload a scanned copy of the document. This template makes use of product qualifiers too. In the above example ‘Age Proof Mandatory’ is a product qualifier.
2.22. HTML_ARTICLE
Widget- Article
File Path-Views\article\html_c_article.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
60
Articles can be defined as a detailed presentation of facts in interesting form prepared for rapid reading, for the purpose of entertaining or informing the average person.
This template shows article on a page. The page has header, footer and the article content. Customers can also write comments on the article. Customer replies are shown along with the article.
Let us take an example of electronic gadgets which are full of various functionalities. Articles prove helpful to educate customers. It gives customers in depth information about the product. It gives information like product features, its use and way to operate that product. On reading this article customer may take purchase decision provided the product satisfies the needs of the customer.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
61
2.23. HTML_BUNDLED
Widget- HTML_Bundled
File Path-Views\product\html_c_bundled.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
62
Description-
Bundled promotions are offers like Buy 2 get 1 free that can be used to promote new launches on online store or clear excess inventory. These promotions are an effective marketing strategy that help increase revenue by giving shoppers more value for their dollars. Configurable rules can be defined to define ‘what has to be bought’ and what is ‘offered free’.
This template shows the time till the offer is available which is nothing but expiry date for the promotion configured. Shopper has the option not to buy the deal. This situation may happen when configured promotion is something like buy A and get B at 30% off. Shopper may not be interested to buy B in this case.
This template gets assigned dynamically whenever the product has a bundled promotion configured for it. Before any product detail template is loaded for a product on the online store, the system checks if there is any associated bundled promotion. If yes, it simply assigns the bundled template to it. Theme specific CSS is applied automatically to ensure that branding is maintained for different online stores.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
63
2.24. HTML_BUNDLEDQUICKVIEW
Widget- HTML_Bundledquickview
File Path-Views\product\html_c_bundledquickview.ascx (Available in version 6.5 and above)
Fig. 1
Quick view provides customers with option to directly view product details and get the bundled offer.
Customers can add the bundled products to cart by clicking on ‘Get this deal’.
This template allows putting all information together. It shows product details, direction to use it and product ingredients.
Fig. 1- Bundled quickview made compatible with all themes via CSS.
3. WIDGET DOCUMENTATION
This section will introduce you to various widgets available that can be used to design our eCommerce online store. You will get to know details of each widget,
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
64
probabilities where widget can be used and the way to configure the widget from the Hitachi Solutions Ecommerce Manager Panel.
COMMON WIDGETS
These widgets can be used across the online store. Common Widgets can be present on all the webpages:
3.1. PAGE HEADER
Widget – Page Header
File Path-Views\ nav\html_header.ascx (Available in version 5.0 and above)
File Path-Views\ nav\html_header2.ascx ((Available in version 6.0 and above)
Description Behavior
Header is the top rectangular shaped area that runs across the top of the webpage. It appears on every webpage. Header contents remain same throughout the online store.
It tells visitor/customer about the brand or company, and conveys general concept of the merchant’s products.
LOGO
Widget – Logo
File Path –Views\ nav\html_logo.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
65
Description Behavior
Logo is placed on top left hand corner of the page.
To add logo following is the path –
eCommerce Manager PanelBasic SettingseCommerce Stores
By clicking on logo visitor/customer is directed to homepage.
MY ACCOUNT
Widget – My account
File Path – Views\nav\html_myaccountnav2.ascx (Available in version 6.0 and above)
File Path – Views\nav\html_myaccountnav.ascx (Available in version 5.0 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
66
It allows visitors/customers to login, register and navigate for viewing their account details.
It is placed on page header (available across the online store).
User can access account information, history of purchased items etc. on sign in.
When visitor/customer clicks on Sign In, login page is shown.
When visitor/customer clicks on Register link, registration page is shown.
When clicked on Wish List, if visitor/customer hasn’t logged in then he will be directed to sign in page, else he will be directed to page showing his wish list.
When clicked on Track Order, if visitor/customer hasn’t logged in then will be directed to sign in page, else status of order will be shown to him.
CART LINK
Widget – Cart Link
File Path – Views\nav\html_cartlinks.ascx (Available in version 5.0 and above)
Description Behavior
Cart Link is present on page header.
It gives quick view of visitor/customer’s current shopping cart contents.
When cursor is placed on cart link, floating cart appears.
REWARD BALANCE
Widget – Reward Balance
File Path – Views\nav\ html_rewardbalance.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
67
Description Behavior
It shows customers reward balance after login/registering on online store.
It is placed on page header (available across the online store).
When the customer Signs in/Registers on online store, it shows customer’s reward balance.
Reward balance can be used as a payment while placing an order. As soon as customer uses his reward balance, updated balance is shown in header.
STORE LOCATOR
Widget –Store Locator
File Path-Views\ store\html_locations.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
68
Description Behavior
Store Locator helps visitor/customers to visually see various physical stores on Google Maps.
Customers can type in their current location (zip code, street name etc.) and find the closest merchant location as well as driving directions to the closest location.
Merchant can set up all his locations from the Manager Panel.
When clicked on Store Locator link a page showing map opens.
Entering your location and clicking on “Find Nearest” would find the nearest location as well as directions to the nearest location
.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
69
3.2. FOOTER
Widget – Page Footer
File Path-Views\ nav\html_footer.ascx (Available in version 5.0 and above)
File Path-Views\ nav\html_footer2.ascx (Available in version 6.0 and above)
File Path-Views\ nav\html_footer3.ascx (Available in version 6.0 and above)
Description Behavior
It is present at the bottom of webpage. Footer contents remain same throughout the online store.
Many important links can be placed in the footer.
FOOTER LINK
Widget – Footer Link
File Path - Views\nav\html_footerlinks.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
70
Description Behavior
These links are provided in the footer section on each web page.
By clicking on each link visitor/customer is directed to the linked page.
These linked pages can be pages on your corporate website or Virtual Pages in Hitachi Solutions Ecommerce.
COPY RIGHT
Widget – Copy right
File Path – Views\nav\html_copyright.ascx (Available in version 5.0 and above)
Description Behavior
It is present in the footer of each web page. Merchants can change the copyright notice as desired.
FINANCE PARTNERS
Widget – Finance Partners
File Path – Views\nav\html_financepartners.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
71
Description Behavior
This widget is used to show the credit cards or payment methods that you accept for purchases from the site.
By clicking on link, visitor/customer is directed to the payment method web site (such as Visa, MasterCard and PayPal etc.)
SOCIAL LINKS
Widget – Social Links
File Path - Views\nav\html_sociallinks.ascx (Available in version 5.0 and above)
Description Behavior
Social links are present in the footer of web page. These links take the visitors to the merchant’s wall or channel on Facebook or Twitter.
When clicked on the button it directs visitor/customer to linked page.
For example, when Facebook icon is clicked the user is directed to Gadgets On line’s page on Facebook. This gives an opportunity for the merchant to create a permanent connection on Social Networks with their prospective customers.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
72
3.3. NAVIGATION
CATALOG NAVIGATION
Widget - Catalog
File Path - Views\nav\html_catalognav2.ascx (Available in version 6.0 and above)
File Path - Views\nav\html_catalognav.ascx (Available in version 5.0 and above)
Description Behavior
Catalog can be arranged in a friendly navigation menu via categories and sub categories.
Categories which merchant wish to promote can be placed left most via sort order.
To add new category path is as follows:
Ecommerce Manager Panel Catalog Collection Categories Create Category.
When cursor is placed on a main category, a fly out menu appears with sub categories.
When visitor/customer clicks on a category link, product list or category landing page is shown.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
73
HTML NAVIGATION
Widget – HTML Navigation
File Path – Views\product\html_nav.ascx (Available in version 5.0 and above)
Description Behavior
It can be present on the page footer or on product details page. These are product related navigational aids.
Usually these explain how to return merchandize and shipping details.
When clicked on ‘Email Us’ link Microsoft Outlook is launched.
When clicked on ‘Return Policy’ visitor/customer is directed to eCommerce Virtual page showing return policy terms and conditions.
When clicked on ‘Shipping Info’ visitor/customer is directed to eCommerce Virtual page showing information about shipping.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
74
LIVE CHAT
Widget – Live Chat
File Path –Views\store\html_livechat.ascx (Available in version 5.0 and above)
Description Behavior
Visitor/Customer can interact with the CSR if they face any problem while browsing the site or have any other queries.
Chat settings can be done as follows:-
Ecommerce Manager Panel Basic Settings Setup Live Chat Setup.
Clicking on the Live Chat button opens a new chat window.
Visitor/Customer by entering his/her name in the text box starts the chatting session. CSR will handle all queries from customers.
3.4. NEWS LETTER
Widget – News Letter
File Path - Views\ecomforms\html_newsletter.ascx (Available in version 5.0 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
75
This widget is usually on footer or header of the webpage.
Visitor/Customer can subscribe to newsletter by entering his email address in the textbox.
Newsletter is used for informing visitors/customers about upcoming products, exciting offers on products etc.
In eCommerce Manager Panel CMS Newsletter Subscription
Clicking on the sign up button stores the email id of visitor/customer in the database.
3.5. DISPLAY MESSAGE
Widget-Display Message
File Path-Views\store\html_displaymessage.ascx (Available in version 5.0 and above)
Description:-
This widget gives a message whenever template is not assigned to a category/subcategory/product.
3.6. ERROR MESSAGE
Widget – Error Message
File Path-Views\store\html_error.ascx (Available in version 5.0 and above)
Description Behavior
This widget is used to show error message.
Merchants can change this widget to make the error message more user friendly.
If some URL expires or some page break happens then error message with error id is shown. Error id is logged in Hitachi Solutions Ecommerce so support personnel can check the logs to find what happened with the visitor’s session.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
76
HOME PAGE WIDGETS
3.7. BEST SELLER
Widget – Best Seller
File Path -Views\category\html_bestsellers1.ascx (Available in version 5.0 and above)
File Path -Views\category\html_bestsellers2.ascx (Available in version 5.0 and above)
File Path -Views\category\html_bestsellers3.ascx (Available in version 6.0 and above)
File Path -Views\category\html_bestsellers4.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
77
Description Behavior
Products with maximum sales can be shown as Best Seller products. Best Sellers can also be manually assigned in case you don’t want to use your Sales Volume to drive Best Sellers.
Product can be manually marked as Best Seller by going to:- eCommerce Manager PanelCatalog CollectionRecommendationsBest Seller Recommendations
Clicking on product link or image lands a visitor/customer on the product details page.
3.8. CUSTOMER REVIEWS
Widget – Customer Reviews
File Path –Views\product\html_customerreviews.ascx (Available in version 5.0 and above)
File Path –Views\product\html_customerreviews2.ascx ((Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
78
Fig.1
Fig.2
Description Behavior
Customer reviews are displayed for each merchandize on product details page. (Refer Fig.1)
They can be displayed on the home page as well.(Refer Fig.2)
Customer reviews help users to make purchase decision.
Customer reviews can be edited or approved from the Manager Panel as follows:-
eCommerce Manager Panel Catalog Collection Catalog Responses Review & Rating
Fig.1 - When clicked on customer review tab, reviews will be shown to the user.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
79
3.9. FEATURED PRODUCTS
Widget – Featured Products
File Path –Views\ category\html_featuredproducts1.ascx (Available in version 5.0 and above)
File Path –Views\ category\html_featuredproducts2.ascx (Available in version 5.0 and above)
File Path –Views\ category\html_featuredproducts3.ascx (Available in version 6.0 and above)
File Path –Views\ category\html_featuredproducts4.ascx (Available in version 6.0 and above)
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
80
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
81
Description Behavior
Featured Products are used for showcasing specific merchandize on your website.
Featured products can be shown on home page or you can have them within a product category (Refer Fig. 1).
To add featured product following is the path:-
Ecommerce Manager Panel Catalog Collection Recommendations Featured Recommendations
By clicking on the image or product name, the visitor/customer views product information.
In case there are more products than available widget space, then carousels are used to show a scrolling list of featured products.
3.10. MINI CART
Widget – Mini Cart
File Path – Views\cart\html_cartmini1.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
82
Description Behavior
Cart lists all items the visitor/customer wishes to purchase.
Mini Cart can be used to put banners. Banners may feature advertisements or promotional offer etc.
To add banners following is the path:-
Ecommerce Manager Panel CMSCreate Content BlockAdd Content Block
Mini cart appears when cursor is placed on cart link.
Mini Cart appears as soon as an item is added to cart and customer does not have to leave page to view cart contents.
3.11. FILE ATTACHMENT
Widget – File Attachment
File Path – Views\fileupload\html_orderlineattachment.ascx (Available in version 7.1 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
83
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
84
Description Behavior
Maximum 5 files can be attached per cart line. It allows the customer to browse files and attach them to each line item. Count of attachment per line appears on mini cart, shopping cart, order summary, quick order entry, order details. By clicking on the link from the mini cart/shopping cart/order summary, attachments can be added or deleted.
3.12. SAVE CART
Widget – Save Cart
File Path – Views\Cart\html_savecartmini.ascx (Available in version 7.4 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
85
Opens an overlay with a field to add the name of cart and save it.
Save cart can be used if a customer does not wish to make a purchase immediately, but save the items in his cart for purchase at a later date.
The widget is available on the floating cart, shopping cart screen and the fast checkout screen.
The save cart overlay appears upon clicking on ‘Save Cart’ if customer wants to save cart before logging in to the account; or ‘My Cart’ in case the customer is already logged in.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
86
3.13. SAVED CART
Widget – Saved Cart
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
87
File Path – Views\Cart\html_savedcart.ascx (Available in version 7.4 and above)
Description Behavior
Displays all the items in a particular saved cart in the customer’s account on the online store.
The customer can edit, delete or proceed to checkout with the cart.
The saved cart is also visible in the pop-up that appears on clicking on the ‘1 Saved Cart’ link.
Clicking on ‘My Cart’ in the online store account navigation displays the saved shopping cart and the items in it.
Clicking on the icons in the upper right hand corner, allows the customer to edit, delete, merge or proceed to checkout with the saved cart.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
88
3.14. SAVED CART LIST
Widget – Saved Cart List
File Path – Views\Cart\html_savedcartlist.ascx (Available in version 7.4 and above)
Description Behavior
Displays all the saved carts and their items in the online store account of the customer.
The customer can edit, delete, merge and proceed to checkout with any of the saved carts.
Clicking on ‘My Carts’ in the online store account navigation displays the saved shopping carts and the items in it.
Clicking on ‘My Cart’ on the floating cart, the view shopping cart screen and the fast checkout screen would display a link to open the list of saved carts in a pop-up.
Clicking on the icons in the upper right hand corner, allows the customer to edit, delete, merge or proceed to checkout with the saved cart.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
89
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
90
3.15. SAVED CART OVERLAY
3.16. Widget – Saved Cart Overlay
File Path – Views\Cart\html_savecartoverlay.ascx (Available in version 7.4 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
91
Opens an overlay that displays the items in the saved cart, one cart at a time.
Displays pagination depending upon the number of saved carts, at the rate of one cart per page.
Clicking on the ‘3 Saved Cart’ link opens an overlay that displays the items in the saved carts.
Clicking on the page numbers would display consequent carts.
Clicking on the icon in the icons in the upper right hand corner allows the customer to edit, merge, delete or proceed to checkout with the saved cart.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
92
3.17. REWARD EARNINGS
Widget – Reward Earnings
File Path – Views\cart\html_rewardearnings.ascx (Available in version 7.0 and above)
Description Behavior
It shows estimated reward earnings with current items in cart.
See How link redirects to reward program FAQ page. Reward earning appears on mini cart and shopping cart.
3.18. MOST POPULAR
Widget – Most Popular
File Path - Views\category\html_mostpopular1.ascx (Available in version 5.0 and above)
File Path - Views\category\html_mostpopular2.ascx (Available in version 5.0 and above)
File Path - Views\category\html_mostpopular3.ascx (Available in version 6.0 and above)
File Path - Views\category\html_mostpopular4.ascx (Available in version 6.0 and above)
File Path - Views\category\html_mostpopular5.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
93
Fig.1
Fig.2
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
94
Fig.3
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
95
Fig.4
Fig.5
Description Behavior
Manually assign Products as Most Popular so they show up on Home Page and Category Landing Pages.
Fig.1 – Products can be viewed by clicking next and previous arrows.
Fig.2, Fig.3 & Fig.4 – Product within a category can also be shown as Most Popular.
To set products as Most Popular following is the path:-
eCommerce Manager Panel Catalog Collection Recommendations Most Popular Recommendations
Fig.1 - When clicked on next link next product is viewed.
When mouse hovers over previous or next link corresponding product’s image is shown.
Fig5.-Most Popular shown on home page. By clicking on 1,2,3 numbers products can be viewed.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
96
3.19. MOST POPULAR SEARCH KEYWORDS
Widget -Most Popular Search Keywords
File Path -Views\store\html_searchkeyword1.ascx (Available in version 5.0 and above)
File Path -Views\store\html_searchkeyword2.ascx (Available in version 5.0 and above)
Fig.1
Description Behavior
It shows search keywords which most visitors/customers use to search products on online store. These are shown as a “tag cloud”.
When mouse hovers over a search keyword, link count for that search keyword is shown.
When clicked on the keyword link visitor/customer is directed to the product listing page showing search results.
When clicked on the See More link, visitor/customer is directed to a page showing detailed list of most used keywords (Refer Fig.1).
Font size of keyword depends on frequency of keyword used for search. Higher the frequency of search keyword, larger will be the font size of that keyword than the lesser frequent search keywords.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
97
3.20. NEW ARRIVALS
Widget – New Arrivals
File Path – Views\category\html_newarrivals1.ascx (Available in version 5.0 and above)
File Path – Views\category\html_newarrivals2.ascx (Available in version 6.0 and above)
File Path – Views\category\html_newarrivals3.ascx (Available in version 6.0 and above)
Fig.1
Fig.2
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
98
Fig.3
Fig.4
Description Behavior
It advertises and provides better exposure to newly added products.
Maximum 10 products can be shown in new arrivals.
New arrivals can be shown as across the store as well as within a product category.
New arrivals within a product category are shown in Fig.2, Fig.3 & Fig.4.
.
New product can be added as follows :-
eCommerce Manager Panel Catalog Collection Products Create Product/ Article
By clicking on product’s image visitor/customer is directed to linked page.
In case there are more products than available widget space, then carousels are used to show a scrolling list of New Arrivals (Refer Fig.1).
3.21. NEWS FEED
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
99
Widget – News Feed
File Path - Views\store\html_newsfeed.ascx (Available in version 5.0 and above)
Description Behavior
News Feed provides latest headlines as soon as it is published without having to visit the websites you have taken the feed from.
These feeds are updated throughout the day and visitor/customer gets to read most recent news.
When visitor/customer clicks on link, he is redirected to website featuring news article.
3.22. ON SALE
Widget-On Sale
File Path-Views\ category\html_onsale1.ascx (Available in version 5.0 and above)
File Path-Views\ category\html_onsale2.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
100
Fig.1
Description Behavior
On Sale help to clear excess inventory by creatively displaying on sale items on the online store.
To create discounts on items following is the path:-
Ecommerce Manager Panel Marketing Discount Coupons.
On Sale items display on online store under following conditions:-
1. Requirement is ‘None’.
2. Volume discount is either “All of these SKU’s” or “On of these SKU’s (most expensive purchased)”.
On Sale products within a category can be shown as ‘Discounted Items’ (Refer Fig.1).
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
101
3.23. PRICE
Widget – Price
File Path - Views\product\html_price.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
102
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
103
Price for a product depends on the following important parameters:-
1. Customer class – Customers are divided into different groups like Guest User, Registered User, Wholesale User, Retail User etc. Prices offered to these groups can be different.
2. Quantity – Customer who buys in bulk will be given discount on purchase. Quantity based pricing can be shown as depicted in (2) above.
3. Timing – During festival season or during slack period offers can be given on products. These prices would change on the eCommerce online store based on the date/time the visitor accesses the store front.
As low as – it is Indicative Pricing. If product has multiple SKUs then SKU with lowest price is shown. (1 product with multiple SKUs or 1 SKU with multiple quantity based pricing).
Price- if product has single SKU then price for that is shown with product.
Currency for a visitor/customer is set from the Manager Panel.
During Login Process, the online store identifies the customer’s group (customer class) and changes the price across the online store. This is called as Customer Specific Pricing.
If you add a quantity greater than 1 during “Add to Shopping Cart”, eCommerce online store would determine the right quantity break that applies to you and corresponding prices would be applied.
3.24. PRODUCT LIST MULTI ITEM
Widget –Product list Multi item
File Path – Views\product\html_productlistmultiitem1.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistmultiitem2.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistmultiitem3.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistmultiitem4.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistmultiitem5.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
104
Description Behavior
Products having multiple SKUs are shown in multiple item product lists.
Each product is generated by individual HTML page.
Visitor/customer by clicking on mail symbol can send link to this product.
By clicking on reviews link visitor/customer is directed to product details page and shows customer reviews.
By clicking on show all button visitor/customer can view all available SKUs.
By clicking on product image or link visitor/customer lands on product details page.
Product can be compared with other by clicking on tic mark.
3.25. PRODUCT LIST SINGLE ITEM
Widget –Product list Single item
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
105
File Path – Views\product\html_productlistsingleitem1.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistsingleitem2.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistsingleitem3.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistsingleitem4.ascx (Available in version 5.0 and above)
File Path – Views\product\html_productlistsingleitem5.ascx (Available in version 5.0 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
106
A product having only one SKU associated with it can be shown using single item product list.
Each item is generated by individual HTMLs.
By clicking on ‘Add to Bag’ visitor/customer can directly add this product to cart.
By clicking on product image or link visitor/customer lands on product details page.
Product can be compared with others by clicking on tic mark.
Visitor/customer by clicking on mail symbol can send link to this product in an email.
By clicking on reviews link visitor/customer is directed to product details page and shows customer reviews.
3.26. QUICK VIEW LINK
Widget – Quick View
File Path - Views\product\html_quickviewlink.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
107
Fig 1.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
108
Fig.2
Description Behavior
Quick view allows viewing product details without navigating out of the current page. This allows the visitor/customer to get a quick glance at the product without leaving search results or featured products or any other area of the website.
It minimizes visitor/customer’s navigation efforts and keeps the customer on the same page where multiple items of interest might exist.
To set quick view link for a product following is the path:-
Ecommerce Manager Panel Catalog CollectionProducts All Products/Article Edit Product/Article Overview Set Default Mini Product Template.
After clicking on quick view link or icon or button, mini product details window pops up.
Fig.1 shows mini product details window.
Quick View can also be controlled via HTML Templates (just like Product Detail Page). These templates could be different for different products.
Quick view understands on which page visitor/customer has clicked on quick view link. It gives context driven results.
For example if quick view of a product in a featured product is clicked, then when mouser hovers over next or previous arrow, product image of next or previous product in featured product is displayed (Refer Fig.2).
When clicked on previous/next arrow, corresponding product in featured product will be displayed.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
109
3.27. REVIEW & RATING
Widget – Review & Rating
File Path – Views\product\html_reviewrating.ascx (Available in version 5.0 and above)
Description Behavior
Review Count and Rating Average is displayed against individual products. This widget can be included anywhere a product is displayed such as Featured Products, Product Detail Pages, Search Result and so on.
Review & ratings can be edited as follows:-
eCommerce Manager Panel Catalog Collection Catalog Responses Review & Ratings
After clicking on Review Count link visitor/customer is directed to page showing review of product.
When clicked on write review link, write review widget would be launched.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
110
3.28. STATIC CONTENT
Widget – Static Content
File Path – Views\store\html_staticcontent.ascx (Available in version 5.0 and above)
Description Behavior
Static Content is used to put advertisement, text messages, and product promotions on web pages.
Static Content can be added as follows-
Ecommerce manager CMSCreate Content BlockAdd Content Block.
Clicking on content/image directs visitor/customer to the linked page. Content has to be linked while saving static content in the eCommerce Manager.
3.29. STOCK STATUS
Widget – Stock Status
File Path - Views\product\html_stockstatus.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
111
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
112
Description Behavior
Stock status is shown along with description of product.
Stock status can be Available, Backordered, Limited Stock.
The link to stock status setup is as follows :-
eCommerce Manager Panel Inventory Setup Inventory Display
If required SKU is not available a pop up message comes.
When clicked on this message text, it invokes ‘Notify Me’ widget.
“Not Available” message can be shown to the shopper if the SKU is out of stock or if the SKU is not even offered. For example: A size & color combination that the merchant has chosen not to offer and hence that combination is not present in SKU Master.
3.30. SEARCH IN LIST
CATEGORY LANDING PAGE WIDGETS
These widgets can be used on category landing page.
3.31. BREADCRUMB
Widget –Bread crumb
File Path – Views\nav\component_breadcrumb.ascx (Available in version 5.0 and above)
Description Behavior
It tells visitor/customer on which webpage he currently is.
He can easily navigate to the previous categories or subcategories.
This breadcrumb is used on Category/Product List Pages as well as Product Detail Pages.
By clicking on category or subcategory link visitor/customer is directed to the linked page.
As visitor/customer navigates the online store, the breadcrumb will be shown accordingly. Say if a customer on home page clicks on a product then breadcrumb will only have link to homepage.
When a visitor/customer is browsing on ‘Related Product’ on product details page, no breadcrumb is shown as there is no navigation to another page.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
113
3.32. CATEGORY LIST
Widget – Category List
File Path –Views\category\html_categorylist.ascx (Available in version 5.0 and above)
File Path –Views\category\html_categorylist2.ascx (Available in version 5.0 and above)
File Path –Views\category\html_categorylist3.ascx (Available in version 6.0 and above)
File Path –Views\category\html_categorylist4.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
114
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
115
Fig.1
Description Behavior
Category landing page may contain list of subcategories or list of products or a combination.
It helps navigate categories or subcategories.
By clicking on subcategory link or image, visitor/customer lands on product listing page.
Mouse hover on the category picture, brings up the Category Description in a sliding panel. The category description can be rich text including hyperlinks (Refer Fig.1).
3.33. RECENTLY VIEWED PRODUCT
Widget – Recently Viewed Products
File Path –Views\nav\html_recentlyviewed.ascx (Available in version 5.0 and above)
File Path –Views\nav\html_recentlyviewed2.ascx (Available in version 6.0 and above)
File Path –Views\nav\html_recentlyviewed2.ascx (Available in version 6.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
116
Description Behavior
It keeps track of products visited by visitor/customer, thus making it easier for visitor/customer to revisit these products.
It saves visitor/customer’s time required to browse for the same product.
By clicking on the product image or link, visitor/customer lands on product details page.
If someone doesn’t want to be tracked, they can turn off their Recent History from My Account. This turning off feature requires registration.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
117
3.34. RECOMMENDATIONS
Widget – Recommendations
File Path –Views\nav\html_recentlyviewedrecommendations.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
118
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
119
Description Behavior
Merchant can recommend products to visitor/customer which is related to the ones he has viewed.
It is a cross selling feature to promote associations based on what the visitor is visiting and corresponding order history on your online store.
By clicking on the product image or link, visitor/customer lands on product details page.
If there are more products and limited space then carousels can be used to show a scrolling list of products (Refer Fig.1).
Other widgets that can be used on the category landing page are as follows:-
3.35. BEST SELLER
To view details click here.
3.36. FEATURED PRODUCT
To view details click here.
3.37. MOST POPULAR
To view details click here.
3.38. NEW ARRIVALS
To view details click here.
3.39. ON SALE
To view details click here.
3.40. STATIC CONTENT
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
120
To view details click here.
3.41. MINI CART
To view details click here.
3.42. QUICK VIEW
To view details click here.
3.43. REVIEW & RATING
To view details click here.
3.44. PRODUCT LIST SINGLE ITEM
To view details click here.
3.45. PRODUCT LIST MULTI ITEM
To view details click here.
PRODUCT LISTING PAGE WIDGET
3.46. CATALOG FILTERS
Widget –Catalog Filters
File Path –Views\category\html_catalogfilters1.ascx (Available in version 5.0 and above)
File Path –Views\category\html_catalogfilters3.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
121
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
122
Fig.2
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
123
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
124
Description Behavior
Provides visitor/customer with options to fine tune his/her product search.
This is a single select filter. Visitor/customer can select any one filter option at a time and results for it will be shown.
Count of products in each option is shown against the filter option.
Fig.2 – It shows all the filter options having +/- sign. When clicked on + sign it expands filter option and when clicked on – sign it collapses.
Search options can be set as follows:-
eCommerce Manager Panel Catalog Collection Products Configure Search & Filters
As per conditions set by visitor/customer, results are shown. The page refreshes to show the filter result and the filter options are also changed at the same time.
During narrowing down the search process, when visitor/customer clicks on filter options that filter is applied on products and results are shown. The filter which is chosen by visitor/customer is shown by a cross mark against it (Refer Fig.1 & Fig.2).
Customer can go uncheck the options to view broader search results.
Widget –Catalog Filters 2
File Path –Views\category\html_catalogfilters2.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
125
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
126
This is a multi-select filter. It provides facility of selecting more filter option by checking multiple checkboxes.
Search options can be set as follows:-
eCommerce Manager Panel Catalog Collection Products Configure Search & Filters
The result of filter option is shown on same page, and the filter area is not refreshed.
While narrowing down search process the visitor/customer can select many filter options by clicking on checkbox and get results.
By unchecking checkbox present in front of filter option, visitor/customer can view broader search results.
3.47. PAGING
Widget – Paging
File Path – Views\nav\html_paging.ascx (Available in version 5.0 and above)
File Path – Views\nav\html_pagingajax.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
127
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
128
Description Behavior
Paging helps to manage display of products on web page.
To set paging options following is the path:-
eCommerce Manager Panel Catalog Collection Products Configure Search & Filters.
When visitor/customer clicks on next arrow next page opens. When visitor/customer clicks page number that page opens.
On selecting an option from ‘Show per page’, those many products are shown on a web page.
Page size and total results internally determines how many pages would be shown.
‘html_pagingajax.ascx’ widget is called when customer/visitor moves to another page or when he selects option from ‘Show per page’. The whole page refreshes and results are shown.
3.48. PRODUCT COMPARISON
Widget – Product Comparison
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
129
File Path –Views\ cart\html_viewcomparison.ascx (Available in version 5.0 and above)
File Path –Views\ cart\html_viewcomparison2.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
130
Description Behavior
It shows comparison of product’s features.
It helps visitor/customer to purchase product which best suits their requirement.
At a time a maximum of 4 products can be compared.
Fields that are shown during comparison can be configured from the Manager Panel. Path is as follows:-
eCommerce Manager Panel Catalog Collection Products Configure Product Comparison
By clicking on add to cart button, product will be added to cart.
By clicking on product image or link visitor/customer can view product details.
View Comparison can be shown directly on the page or as a JavaScript popup.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
131
3.49. PRODUCT COMPARISON LIST
Widget – Product Comparison List
File Path –Views\cart\html_productcomparisonlist.ascx (Available in version 5.0 and above)
Description Behavior
Customers while purchasing may zero down on 2-3 products. In this situation customer may want to know the differences in these products to make a final selection.
With this widget visitor/customer can compare features of different products.
To make a product comparable following is the path:
ECommerce Manager Panel Catalog Collection Products All Product/Article Edit Product/Article Details Set Is Product Comparable.
When clicked on Compare button a floating ‘Product comparison’ pop up appears.
This pop up can also be invoked via “Compare” hyperlink present in the header.
When clicked on view comparison button ‘View Comparison Widget’ is invoked.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
132
3.50. PRODUCT LIST
Widget – Product List
File Path –Views\category\html_productlist.ascx (Available in version 5.0 and above)
File Path –Views\category\html_productlist2.ascx (Available in version 5.0 and above)
File Path –Views\category\html_productlist3.ascx (Available in version 5.0 and above)
File Path –Views\category\html_productlist4.ascx (Available in version 6.0 and above)
File Path –Views\category\html_productlist5.ascx (Available in version 6.0 and above)
File Path –Views\category\html_productlist6.ascx (Available in version 6.3 and above)
File Path –Views\category\html_productlist6.ascx (Available in version 7.0 and above)
File Path – Views\ category\html_productlistimages.ascx (Available in version 6.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
133
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
134
Fig.2
Promotional Tags Qualifiers
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
135
Fig.3
Qualifiers
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
136
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
137
Description Behavior
Product list is used to show products in a category or search results on a online store.
Product has many attributes like:-
Product Name
Product Description
Product Image
SKU Price if single SKU else SKU having lowest price.
SKU number
Promotional Tags – Are catchy words associated with product.
Product Reviews
Rating in 5 star format
Qualifiers
Other options are:-
Send to friend
Compare
Share on Twitter, Google Plus
Quick view link
Add to Cart
Inventory Status
Promotional Tags like in Fig.2 can be set for each product or for a whole category from the Manager Panel as follows:-
Ecommerce Manager Panel Marketing Advertise Via Promo Tags.
Qualifiers shown in Fig.2 & 3 can be created and set for a product from the Manager Panel as follows:-
Ecommerce Manager Panel Catalog CollectionSetup Product Qualifiers.
Product attributes can be set as :-
Ecommerce Manager Panel Catalog Collection Products All Products/Articles Edit Product/Article.
When clicked on a product image or link, product details page opens.
When clicked on Reviews link, product details page is displayed with reviews.
By clicking on email icon visitor/customer can mail information about product to his friends, family members, associates etc.
By clicking on twitter, Google plus link visitor/customer can share product information on these sites.
By clicking on quick view link or icon, mini product details window appears.
When products are displayed on product listing page ‘Productlistsingleitem Widget’ is called for each product.
‘html_productlistimages.ascx’ is used to generate image hrefs (for the embedded product images). This widget is used to send the image href HTML to the browser without waiting for the entire page to finish so that the catalog images can be downloaded in parallel to the remaining page generation. While the server is busy finding the prices for the product list, the images are downloaded by the browser.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
138
3.51. SORTING
Widget –Sorting
File Path –Views \nav\html_sorting.ascx (Available in version 5.0 and above)
File Path - Views\nav\html_sortingajax.ascx (Available in version 5.0 and above)
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
139
Description Behavior
Visitor/Customer can sort products as per his requirement.
Fig.1 – Shows different type of sort applied to gadgets.
To set default sorting option following is the path:-
eCommerce Manager Panel Catalog Collection Products Configure Search & Filters
When clicked on particular sort option products are sorted in that manner.
Result of sort is shown on same webpage.
‘html_sortingajax.ascx’ widget replaces the original widget whenever filters are run. Ajax widget has identical look and feel except that it would sort the filtered list and not the original list.
3.52. BREADCRUMB
To view details click here.
3.53. MINI CART
To view details click here.
3.54. PRODUCT LIST SINGLE ITEM
To view details click here.
3.55. QUICK VIEW
To view details click here.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
140
3.56. RECENTLY VIEWED PRODUCTS
To view details click here.
3.57. RECOMMENDATIONS
To view details click here.
3.58. REVIEW & RATING
To view details click here.
3.59. STATIC CONTENT
To view details click here.
3.60. STOCK STATUS
To view details click here.
PRODUCT DETAILS PAGE WIDGETS
3.61. STOCK KEEPING UNIT (SKU)
Widget – Stock Keeping Unit (SKU)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
141
File Path – Views\ product\html_apparel1sku.ascx (Available in version 5.0 and above)
File Path – Views\ product\html_apparel2sku.ascx (Available in version 5.0 and above)
File Path – Views\product\html_athletic-outdoor-shoes1sku.ascx (Available in version 5.0 and above)
File Path– Views\product\html_cosmetics1sku.ascx (Available in version 6.0 and above)
File Path – Views\product\html_consumer-electronics1sku.ascx (Available in version 6.0 and above)
File Path – Views\product\html_tool1sku.ascx (Available in version 6.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
142
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
143
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
144
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
145
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
146
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
147
Description Behavior
SKU is what the shopper actually purchases on a Product Detail Page. SKU can have attributes like size, color, material etc. Pricing and Stock is always driven by a particular SKU.
Visitor/Customer can select a combination of these attributes to form a personalized SKU.
To add SKU following is the path:-
Ecommerce Manager Panel Catalog Collection Products All Product/Articles Edit Product/Article SKU Add new SKU
By clicking on button “Add to Shopping Cart”, product will be added to cart and a mini floating cart will be shown.
If SKU has multi quantity based pricing, then it shows lowest price as ‘As Low As’ and has link ‘Show All Prices.’ When clicked on this link a price chart is shown.
When SKU color attribute is selected, the SKU image can be shown on the page. Image change can be done on any SKU attribute change.
When mouse hovers over the image, focused part of image is enlarged and when clicked on the image, larger image of product is displayed.
3.62. CARD DESIGNS
Widget –Card Designs
File Path -Views\product\html_carddesign_options.ascx
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
148
Description Behavior
Gift Certificates can be configured as different denominations (via configuring multiple SKUs).
Each Gift Certificate SKU can be assigned a picture and that picture can be used to offer “Gift Certificate Choices” in a more intuitive fashion.
When clicked on a specific Gift Card SKU image, the SKU gets loaded.
SKU Loading changes the image, price and selected SKU in the SKU drop down.
3.63. GIFT CERTIFICATE SKU
Widget-Gift Certificate SKU
File Path-Views\product\html_giftcertificate1sku.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
149
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
150
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
151
Fig.2
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
152
Description Behavior
Gift Certificate/Gift Vouchers is a restricted monetary equivalent that can be used as an alternative to a non-monetary gift. Gift certificate saves the donor from choosing a specific gift. It also gives the receiver freedom to use the gift certificate as per his convenience.
Gift Certificate has an amount and is treated valid forever. Each Gift Certificate has a unique code. This unique code is required while redeeming the gift certificate.
Gift certificate can be emailed directly to recipient. Benefit of sending via email is that they cannot be lost.
Customer/visitor can purchase Gift Certificate of specific denomination.
Gift certificate aids merchants to promote their websites. It help merchants draw new visitors to their site and can convert them into loyal customers.
Gift Certificates can be created as follows:-
Ecommerce Manager Panel Catalog Collection Products Create Product/ Article.
This product must be associated with ‘Gift Certificate Template’.
Customer/visitor is required to enter name and email address of receiver in provided textbox.
Customer/visitor can also write a message to the recipient.
By clicking on ‘Add to Shopping Cart’ button gift certificate can be purchased.
When customer/visitor selects the denomination of gift card from the drop down box (Refer Fig. 1) image is loaded and the price is also changed.
Gift Certificates are present on the Global Apparel Theme.
3.64. COLOR SWATCH
Widget – Color Swatch
File Path –Views\product\html_color_swatch.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
153
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
154
It is present on product detail page.
It gives visitor/customer options to choose from.
Ordering of the options like size and color is driven by SKU ordering within a Product. Sort Order for SKUs can be configured by going to a Product and changing the Sort Order field of its SKUs.
When clicked on a particular color, product’s image is dynamically loaded to show merchandize in selected color.
3.65. CROSS SELLING
Widget – Cross Selling
File Path –Views\product\html_crossselling.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
155
Description Behavior
Cross selling allows you to position related products alongside products which visitor/customer is browsing.
Related products are displayed on product details page.
It encourages visitor/customer to buy items which seller wish to sell & thus helps to generate more revenue.
To add products to cross selling following is the path:-
eCommerce Manager Panel Catalog Collection Products All Products/Articles Edit Product/Article Cross Selling
When clicked on product image or link, visitor/customer lands on product details page.
The number of cross selling products to display can be controlled by setting a variable in the html_crossselling.ascx file.
3.66. CUSTOMER FEEDBACK
Widget – Customer Feedback
File Path –Views\product\html_customerreviewsfeedback.ascx (Available in version 5.0 and above)
File Path –Views\product\html_customerreviewsfeedback2.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
156
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
157
Description Behavior
Visitor/Customer can write a feedback for a product and rate the product using a 5 star grading system.
To set options for customer reviews following is the path:-
eCommerce Manager Panel Catalog Collection Catalog Responses Review & Rating
When clicked on write a review link, a pop up window appears (Refer Fig.1).
By clicking on ‘Submit review’ button, review for product will be stored in database. These reviews wait for Merchant Approval before showing up on the web sites. These are merchant moderated reviews.
3.67. CUSTOMER WHO BOUGHT ALSO BOUGHT
Widget – Customer who bought also bought
File Path –Views\nav\html_customerwhobought.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
158
Fig.1
Fig.2
Description Behavior
It gives visitor/customer cues on various other products he can purchase along with the product he has already bought.
It can be configured manually for a particular category or it could be based on actual statistics.
From Manager Panel count of products to display can be set.
To configure products in ‘Customer Who Bought Also Bought This’ following is the path:-
eCommerce Manager Panel Catalog CollectionRecommendationsCustomers who bought recommendations
When a product image or link is clicked, visitor/customer lands on product details page.
If there are more products and limited space then carousels can be used to show a scrolling list of products.
3.68. DOWNLOADABLE SKU
Widget-Downloadable SKU
File Path-Views\ product\html_skulistdownloadable.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
159
Description Behavior
On purchasing downloadable SKU, it will be made available to visitor/customer to download it to his machine whenever he wants.
Visitor/Customer has to be registered with the online store, only then can he purchase downloadable SKUs.
By clicking on download button, purchased software will be downloaded to visitor/customer’s system.
3.69. EDITORIAL REVIEWS
Widget –Editorial Review
File Path –Views\product\html_editorialreviews.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
160
Description Behavior
Editorial reviews for a product can be written from the manager application by an Editor.
Each product can have a maximum of one editorial review.
Path for editorial review is:-
Ecommerce Manager Panel Catalog CollectionProducts All Product/Articles Edit Product/Article Reviews.
When visitor/customer clicks on Editorial Review Tab, editorial review is shown.
3.70. TWITTER LINK
Widget – Twitter Link
File Path –Views\store\html_twitter.ascx (Available in version 6.0 and above)
File Path-Views\ store\html_facebook.ascx (Available in version 6.0 and above)
Description Behavior
Visitor/Customer can share product information on twitter.
Similarly, link can be provided for Facebook.
When clicked on twitter icon, sign in page for twitter site opens in new window.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
161
3.71. GOOGLE PLUS LINK
Widget – Google Plus Link
File Path –Views\store\html_googleplus.ascx (Available in version 6.0 and above)
Description Behavior
Visitor/Customer can share products they liked with their friends on Google+.
When clicked on Google + icon, sign in page for Google + opens in new window.
3.72. NOTIFY ME
Widget –Notify Me
File Path –Views\product\html_notifyme.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
162
Description Behavior
If required SKU is not available, visitor/customer can leave his email address with site. As soon as product with visitor/customer preference is available he/she will be informed.
When visitor/customer clicks on Notify Me button, a pop up message window appears.
Email address of visitor/customer is saved in the database.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
163
3.73. PRODUCT ACCESSORIES
Widget – Product Accessories
File Path –Views\product\html_accessories1.ascx (Available in version 5.0 and above)
File Path –Views\product\html_accessories2.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
164
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
165
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
166
Description Behavior
It is a technique of upselling. Along with products, visitor/customer can also purchase accessories, in turn generating more revenue.
To add accessories to a product following is the path:-
Ecommerce Manager Panel Catalog Collection Products All Product/Article Edit Product /Article Accessories
By clicking on ‘add to cart’, a floating cart appears.
Clicking on product image or link lands the visitor/customer on product description page.
SKUs having multi quantity pricing are shown in Fig. 1. When clicked on the arrow a drop down list comes up.
3.74. PRODUCT ALTERNATE IMAGE
Widget –Product Alternate Images
File Path –Views\ product\html_alternateimages.ascx (Available in version 5.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
167
Description Behavior
Visitor/Customer does not get to see physical products while shopping online thus product images play a vital role.
Images provide view of a same product from different angles.
Alternate images in horizontal or vertical scrolling list can be shown.
Following is the path to add product images :-
ECommerce Manager Panel Catalog Collection Products All Product/Articles Edit Product/Articles Details Product Alternate Image.
Clicking on the one of the alternate images, loads it on the same page.
3.75. PRODUCT DOWNLOADS
Widget –Product Downloads
File Path –Views\product\html_productdownloads.ascx (Available in version 6.0 and above)
Description Behavior
If a product is accompanied by some pdf files, music tracks or pictures then you can make them to be downloadable from your site. These are free downloads available to general public.
To add downloads to a product following is the path:-
ECommerce Manager Panel Catalog List All Products/Articles Edit Product/Article Downloads.
To create new download :-
ECommerce Manager Panel Inventory Downloadable SKUs.
By clicking on download button visitor/customer can open or save the file on their computer.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
168
3.76. PRODUCT NAVIGATION
Widget – Product Navigation
File Path –Views\nav\html_productnav.ascx (Available in version 6.3 and above)
Fig.1
Description Behavior
Product navigation allows viewing product details without navigating out of the current page. This allows the visitor/customer to get a quick glance at the product without leaving search results or featured products or any other area of the website.
It minimizes visitor/customer’s navigation efforts and keeps the customer on the same page where multiple items of interest might exist.
Product navigation understands on which page the visitor/customer is and has clicked on product to view details. It gives context driven results.
For example, if a product in a Featured product is clicked then, when mouser hovers over next or previous arrow, product image of next or previous product in Featured product is displayed (Refer Fig.1).
When clicked on previous/next arrow, corresponding product in Featured product will be displayed.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
169
3.77. PRODUCT OPTIONS
Widget – Product Options
File Path –Views\product\html_options.ascx (Available in version 5.0 and above)
File Path –Views\product\html_options2.ascx (Available in version 5.0 and above)
File Path –Views\product\html_options3.ascx (Available in version 5.0 and above)
File Path –Views\product\html_options4.ascx (Available in version 6.0 and above)
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
170
Fig.2
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
171
Fig.3
Fig.4
Description Behavior
To fulfill customer’s requirements, merchandize in different sizes, various textures are offered on the online store.
Visitor/customer then has options to choose from them.
The SKU list can be shown as in ‘SKU List Widget’. This is another way to show available SKUs of a product.
The way to show options available for a merchandize mainly depends on the type of a merchandize one is selling.
In Fig.2 options available with merchandize are listed.
In fig3 & fig.4 options are shown in a drop down list.
After selecting size it displays product availability and loads image of product.
In Fig.1 when clicked on Size Chart, a chart of available sizes is displayed.
3.78. PRODUCT REVIEWS
Widget – Product Reviews
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
172
File Path –Views\product\html_productreviews.ascx (Available in version 5.0 and above)
Description Behavior
This allows you to show customer reviews, write reviews and editorial reviews in a tab format.
By clicking on each tab, contents of that tab are displayed.
3.79. PRODUCT VIDEOS
Widget – Product Videos
File Path –Views\store\html_videoslist.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
173
Description Behavior
Video is a great feature providing actual visuals of a product.
Videos communicate more about a merchandize than a static image.
Video for a product is shown on product details page.
To create a video following is the path:-
eCommerce Manager Panel Catalog Collection Setup Product Videos New video
This feature requires subscribing to Haywatch Video Encoding Service & Amazon S3 Storage Service. More instructions are available at eCommerce Manager Panel Catalog Collection Setup Product videos
When clicked on the image of Handycam a video is loaded on the same page.
Video Player shows video list associated with the product.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
174
3.80. SHARE THIS
Widget – Share This
File Path –Views\ store\html_sharethis.ascx (Available in version 6.0 and above)
Description Behavior
Product information can be shared on social networking sites.
Thus there are more chances of hits to product and ensures more sale.
When clicked on share link, a window pops up.
By clicking on icon relevant sharing site opens requiring login so you can post your shared content.
3.81. SKU LIST
Widget – SKU List
File Path –Views\ product\html_skulist.ascx (Available in version 6.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
175
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
176
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
177
Description Behavior
It displays all the available SKUs of a product on product details page.
It displays multi quantity pricing when available.
Visitor/Customer can mention quantity of SKU in textbox provided.
Visitor/Customer by clicking on “add to cart” button can add product to cart.
SKU having multi quantity pricing is shown with a blue colored arrow in front of it (Refer Fig.1). When clicked on the arrow drop down list of available option is shown (Refer Fig.1).
Depending on Inventory Configuration either “Limited Stock” or “Available” message is shown. For out of stock scenarios, quantity text box is hidden in case back orders are not allowed.
3.82. SHARE PRODUCT IMAGES
Widget –Share Product Images
File Path –Views\product\html_customerimages (Available in version 7.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
178
Description Behavior
For merchants looking to increase customer engagement and provide their shoppers an insight into the merits and working of a product, this feature allows shoppers to upload their product images. These images are treated as visual reviews of the product and can be liked and disliked by the other shoppers. Uploaded images are visible on product detail page.
Manager Panel provides ability where you can set preferences like to allow only registered users / guest users / both to share the images on online store. To do the setup path is :-
Ecommerce Manager Panel Customers Setup Customer Account Setup
You can also set supported image file types and configure maximum upload image size from the Manager Panel. The path is :-
Ecommerce Manager Panel Basic Settings Setup Global Setup.
Clicking on Share your own images button, opens a pop up window. Shopper can add an image description and upload an image by clicking on Share image button.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
179
3.83. SHARE PRODUCT IMAGES - DETAILS
Widget –Share Product Images - Details
File Path –Views\product\html_customerimagesdetails.ascx (Available in version 7.3 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
180
Description Behavior
This displays a scrolling list of images uploaded by various shoppers. Along with the images shoppers can view the information such as name of shopper who uploaded the image and the date. In addition to this it displays image description if any. He can see the likes or dislikes the image received.
Shopper can like an image by clicking on Like button. Shopper can dislike an image by clicking on Dislike button.
Shopper can share an image by clicking on Share Image button and also add an image description.
3.84. SHIPPING CALCULATOR
Widget –Shipping Calculator
File Path –Views\ cart\html_shippingcalculator.ascx (Available in version 5.0 and above)
Description Behavior
Shipping calculator gives Visitor/Customer amount of shipping charges applicable to ship to a particular address.
Shipping charges depend on shipping destination and merchandize in your shopping cart. Typically the weight of the merchandize is considered though volume can also be used for freight calculation.
Shipping Methods you want to offer to your visitors can be configured via the Manager Panel. Path is as follows:-
Ecommerce Manager Panel Inventory Setup Shipping Methods.
Clicking on Shipping Calculator button opens a pop up window asking for country, state & zip code.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
181
3.85. CUSTOMER REVIEWS
To view details click here.
3.86. MINI CART
To view details click here.
3.87. QUICK VIEW
To view details click here.
3.88. RECENTLY VIEWED PRODUCTS
To view details click here.
3.89. RECOMMENDATIONS
To view details click here.
3.90. REVIEW & RATING
To view details click here.
3.91. STOCK STATUS
To view details click here.
3.92. STATIC CONTENT
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
182
To view details click here.
CHECKOUT WIDGETS
3.93. SHOPPING CART
Widget – Shopping Cart
File Path –Views\ cart\html_shoppingcart (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
183
Description Behavior
Shopping cart is a page where shopper can review the items added to the cart. Shopping cart displays items along with the image and description of the item as well as price and quantity of item. Shopper can update the quantity, remove an item from cart. He can also attach files to the individual items if needed.
Clicking on Clear shopping cart button will delete all items from the shopping cart.
Clicking on Return to Shopping button will redirect shopper to the home page of the online store.
Clicking on Update button when clicked on the quantity box will update the quantity.
Individual item can be removed from shopping cart by clicking on delete item link.
Clicking on Attach file shopper can upload document for the items if required.
3.94. CUSTOMER LOGIN
Widget – Customer login
File Path –Views\ account\html_account2.ascx
File Path –Views\ account\html_account.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
184
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
185
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
186
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
187
Description
Customer login provides configured login options during checkout. Login options such as existing customer login, guest checkout or account registration. Shoppers also can login with their social networking logins.
3.95. CUSTOMER SIGN IN
Widget – Customer Sign In
File Path –Views\ account\html_login.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
188
Description Behavior
Existing customers can login to the online store by providing their registered email address and password.
Clicking on ‘Login’ button, customer credentials are validated. If correct credentials are used then customer is logged in, otherwise appropriate error message is given.
3.96. GUEST LOGIN
Widget – Guest Login
File Path –Views\ account\html_guestlogin.ascx (Available in version 6.5 and above)
Description Behavior
Customers can place orders on online store as guest user. They just need to provide email address to complete the order.
In the Manager Panel, setup is available to enable / disable guest checkout on online store.
Path is Ecommerce Manager Panel Basic Settings Channels All Channels. Select a channel from list, click on ‘Edit’ button, then go to customer tab.
By clicking on ‘Purchase as Guest’, a guest user is created. No information is retained for the guest user.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
189
3.97. CUSTOMER REGISTRATION
Widget – Customer Registration
File Path –Views\account\html_registration (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
190
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
191
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
192
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
193
Registered shoppers are valuable to a merchant. Based on their purchase history, the merchant can form strategies to increase sales.
Shoppers who choose to place order as guest are presented with an option to become registered customers on the order complete page. (Refer Fig.1)
Registered shoppers get access to the My Account, where they can see order history, purchase history, invoice history as well maintain address book and credit card wallet.
When the shopper fills all the required information and clicks on Create my Account / Register button, account is created for him in the system.
3.98. FORGOT PASSWORD
Widget – Forgot Password
File Path –Views\account\html_forgotpassword.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
194
Description Behavior
Forgot password functionality helps shoppers to retrieve password immediately. Shoppers are notified about their password by an email on their registered email address.
Shopper enters email address and click on Send button. The email address is validated and if it is a valid email address, email is sent to the shopper.
By clicking on Back to Login button, the shopper is taken to the login page.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
195
3.99. SHIPPING
Widget – Shipping
File Path –Views\ checkout\html_ordersingleshipping.ascx (Available in version 6.5 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
196
Shipping page of checkout displays Shipping address and available shipping methods. Customer enters shipping address and shipping method and proceeds with checkout. When shipping address is updated / changed, shipping methods are updated along with shipping rates.
If ‘Use same address for Billing’ checkbox is selected, then shipping address is set for billing address.
By clicking on ‘Continue Checkout’ button, customer navigates to the Payment page.
3.100. SHIPPING ADDRESS
Widget – Shipping Address
File Path –Views\ checkout\html_shippingaddress.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
197
Description Behavior
Shipping address populates the default address present in the address book.
If there are existing addresses in his address book, he can select any address from it. Shopper can also add new address during checkout.
If clicked on ‘Add new address’ then the address fields are emptied and shopper can enter new address.
3.101. SHIPPING RATE
Widget – Shipping Rate
File Path –Views\ cart\html_shippingrates.ascx (Available in version 6.5 and above)
Description Behavior
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
198
Shipping methods configured are displayed under Shipping Method section. Shipping quote can be configured as ‘Online Quote’. This will fetch online shipping rates from the shipping carrier.
Shipping rates can be calculated based on weight or value of shopping cart. Based on the shipping method configuration shipping charge is calculated.
Shipping Methods you want to offer to your visitors can be configured via the Manager Panel. Path is as follows:-
Ecommerce Manager Panel Inventory Setup Shipping Methods.
Shopper chooses a shipping method by clicking the radio button.
3.102. CART SUMMARY
Widget – Cart Summary
File Path –Views\ checkout\html_cartsummary.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
199
Description Behavior
Cart summary provides information about the merchandize purchased along with summary of charges. Cart summary is available to shopper throughout the checkout.
Clicking on ‘Edit’ button shopper is redirected to the shopping cart page.
3.103. ORDER SUMMARY
Widget – Order Summary
File Path –Views\ checkout\html_ordersummary.ascx (Available in version 6.5 and above)
Description Behavior
Order summary displays order subtotal, shipping charges, tax and the order total. As items are added to the cart or shopping methods are selected, order summary is updated.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
200
3.104. CART LINES
Widget – Cart Lines
File Path –Views\ checkout\html_lines.ascx (Available in version 6.5 and above)
Cart line indicates the items being purchased. It displays item name, its price, quantity to purchase and item total.
3.105. APPLY COUPON
Widget – Apply Coupon
File Path –Views\ checkout\html_applycoupon.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
201
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
202
Description Behavior
Shoppers can apply discount coupons on shopping cart or shipping page or payment page. This is applicable to manual discount coupons. Shopper can apply more than one coupon per order.
The Manager Panel has a setting to allow coupons that can be applied per order. The path is :-
Ecommerce Manager Panel Basic Settings Channel All Channels. Click on ‘Edit’ button for the channel you wish to update the setting. Go to Customer Tab.
Shopper enters coupon code and clicks on ‘Apply’ button. The coupon is validated and if it is not expired then discount is calculated.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
203
3.106. APPLIED COUPON
Widget – Applied Coupon
File Path –Views\ checkout\html_appliedcoupons.ascx (Available in version 6.5 and above)
Shopper can see applied coupons below the order summary during checkout. It displays coupon code and discount amount. It also displays saving on the order.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
204
3.107. GIFT CERTIFICATE REDEMPTION
Widget – Gift Certificate Redemption
File Path –Views\ checkout\html_gcredemption.ascx (Available in version 6.5 and above)
Description Behavior
Shoppers can redeem gift certificates during checkout. Once shopper enters gift certificate code, it displays gift certificate amount that is being redeemed.
Shoppers enter gift certificate code and clicks on ‘Pay’ button. The gift certificate amount is applied as payment for the order and it shows remaining amount to be paid.
3.108. REWARD EARNING
Widget – Reward Earning
File Path –Views\ cart\html_rewardearnings.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
205
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
206
Description Behavior
Reward program enables the Store Manager to configure reward earning rule from the Manager Panel. He can set different reward earning rules based on the Customer Tiers. Reward balance is always displayed for the shopper once he logs in.
On order confirmation page, shopper can see the amount he can redeem on his next purchase.
The path from Manager Panel is as follows:-
Ecommerce Manager Panel Customer Setup Reward Program
Reward earning rule can be set as 1 point for every 5 dollars spent.
Thus if the order total is say $100, then shopper will earn 20 points. The points are then converted into the dollar amount based on the reward redemption rule.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
207
3.109. REWARD REDEMPTION
Widget – Reward Redemption
File Path –Views\ checkout\html_rewardredemptions.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
208
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
209
Description Behavior
Shopper can redeem rewards points easily during checkout. He needs to enter the amount to redeem, which will be applied as advance payment for the order. Shopper can pay partly by redeeming reward points and partly by any other payment method.
Shopper enters amount to redeem and clicks on ‘Apply’ button. This calculates the payment due.
3.110. CUSTOMER REWARD BALANCE
Widget – Customer Reward Balance
File Path –Views\Customer\html_rewardbalance (Available in version 6.5 and above)
Shoppers earn reward points and they are visible in the header section all the time after login. Shoppers can redeem these reward points any point of time.
Store Manager has ability to set expiration days after which the reward points will be expired.
3.111. ADVANCE PAYMENT
Widget – Advance Payment
File Path –Views\ checkout\html_advancepayment.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
210
Shopper can redeem the reward points or apply gift certificate on the order during checkout. The payment made by rewards or gift certificate is considered as advance payment.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
211
3.112. BILLING ADDRESS
Widget – Billing Address
File Path –Views\ checkout\html_billingaddress.ascx (Available in version 6.5 and above)
Description Behavior
Billing address populates the default address present in the address book.
If there are existing addresses in his address book, he can select any address from it. Shopper can also add new address during checkout.
If clicked on ‘Add new address’ then the address fields are emptied and shopper can enter new address.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
212
3.113. ORDER PAYMENT
Widget – Order Payment
File Path –Views\ checkout\html_orderpayment.ascx (Available in version 6.5 and above)
Payment methods, billing address and order comments are displayed on the payment page.
3.114. PAYMENT METHODS
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
213
Widget – Payment Methods
File Path –Views\customer\html_orderpaymentoptions.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
214
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
215
Description Behavior
Payment methods configured for the shopper are displayed under Pay Via. Payment options such as CC, PayPal and Others are listed here. Offline payment methods such as Cash, Wire transfer are listed under ‘Others’ section.
Store Manager can configure payment methods to offer from the Manager Panel.
The path from Manager Panel is as follows:-
Ecommerce Manager Panel Customer Setup Customer Class
Clicking on ‘Visa’ image CC fields will be displayed.
Clicking on ‘Others’ displays Offline payment methods. Clicking on ‘PayPal’ displays PayPal as payment method.
3.115. ORDER COMMENTS
Widget – Order Comment
File Path –Views\ checkout\html_ordercomments.ascx (Available in version 6.5 and above)
Shoppers can enter any important comments during order placement in the order comments section. These comments are saved on the sales order and are available to the Store Manager.
3.116. ORDER COMPLETE
Widget – Order Complete
File Path –Views\ checkout\html_c_ordercomplete.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
216
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
217
Description
After order is placed and payment is successful, shopper sees the order confirmation page. It displays order number, shipping and billing address along with the items purchased. It displays order total and payment method used for the order.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
218
3.117. QUOTE TO ORDER CONVERSION
Widget –Quote to Order Conversion
File Path –Views\ checkout\html_convertquotetoorder.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
219
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
220
Description Behavior
Store Manager has ability to create quotes from the Manager Panel. Quotes are available to the shopper under My Account section. Store Manager can set custom expiration date for every quote that is generated. Shopper can convert this quote to order.
Quote conversion page displays quote lines, payment methods and shipping address.
Clicking on ‘Convert Quote to Order’ button will convert the quote to an order. Order confirmation email is sent to the shopper.
3.118. QUOTE SUMMARY
Widget – Quote Summary
File Path –Views\ checkout\html_quotesummary.ascx (Available in version 6.5 and above)
Shopper sees the order subtotal, tax, shipping cost and order total under the summary of charges.
3.119. QUOTE TO ORDER CONVERSION – SHIPPING ADDRESS
Widget – Quote to Order Conversion – Shipping Address
File Path –Views\ checkout\ html_converttoordershippingaddress.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
221
Shopper sees shipping address under the Ship To Address section. The shipment will be delivered at the shipping address provided.
3.120. QUOTE TO ORDER CONVERSION – ORDER COMPLETE
Widget – Quote to Order Conversion – Order Complete
File Path –Views\ checkout\ html_convertquotetoordercomplete.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
222
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
223
Description Behavior
Shopper can convert quote to order by providing payment details. After quote is successfully converted, shopper sees order confirmation page. This displays shipping, billing address, item details and the order total.
Clicking on ‘Print Order / Print Quote’ button order confirmation page will be printed.
Clicking on ‘Return to My Quotes’ button will redirect shopper to the quote listing page.
3.121. QUICK ORDER
Widget – Quick Order
File Path –Views\ checkout\html_c_quickorder.ascx (Available in version 6.5 and above)
7
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
224
Description Behavior
Shoppers especially in B2B business make great use of quick order entry. This is the fastest way of placing an order. All shopper needs to do is enter item numbers and quantity. This eliminates need of browsing catalog and saves a lot of time for the business users.
Clicking on ‘Continue Checkout’ button shopper will go to the shipping page.
Clicking on ‘Checkout with PayPal’ button shopper will be redirected to the PayPal login page.
3.122. QUICK ORDER ENTRY PAD
Widget – Quick Order Entry Pad
File Path –Views\ checkout\html_quickorderpad.ascx (Available in version 6.5 and above)
Fig.1
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
225
Fig.2
Description Behavior
Shopper can enter SKU code and quantity on the quick order entry pad. It displays SKU image, SKU name, SKU code, quantity, price and unit of measure.
Quick order entry pad can be provided to the shoppers on the product listing page (refer Fig.2). Shopper just needs to enter item number and quantity.
By clicking on the search icon the shopper can search items in the catalog.
By clicking on the cross icon the shopper can remove the item from the order.
3.123. QUICK ORDER LIST
Widget – Quick Order List
File Path –Views\ checkout\html_quickorderlist.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
226
Description Behavior
Shopper can create a quick order list wherein he needs to mention item code and quantity. He can then transfer this list to the order and complete the checkout.
Clicking on ‘Transfer’ icon will transfer items present in the quick order entry pad.
Clicking on ‘Create New List’ button will open a window to create new list.
3.124. SKU LOOKUP
Widget – SKU Lookup
File Path –Views\ checkout\html_skulookup.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
227
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
228
Description Behavior
Shopper can search for the items in the Catalog Master or within the order history. He can mention the quantity against the items he wishes to purchase and add it to the order.
Clicking on ‘Search in Catalog Master’ will display the matching result from the Catalog.
Clicking on ‘Search within Order History’ will display matching result from the shoppers order history.
Clicking on ‘Add to Quick order’ will add the lines to the order.
3.125. EDIT ORDER ON ONLINE STORE
Widget – Edit order on online store
File Path –Views\checkout\html_csreditorderlines.ascx (Available in version 6.5 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
229
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
230
Description Behavior
CSR can edit the sales orders by logging to online store on behalf of the customer. This is more beneficial since CSRs can also place orders for configurable products as well as gift certificates.
It displays the existing order lines along with shipping details. CSR can perform operations such as modifying existing line items, adding new line items, and changing shipping details.
By clicking on Return link, CSR is redirected to the Manager Panel page where he can confirm the sales order.
By clicking on Logout button, CSR will be logged off the online store and the Manger Panel session.
By clicking on Edit shipping details, shipping section will be available for editing. CSR can change shipping address and shipping method.
By clicking on search icon CSR can search for an item in the catalog lookup.
3.126. ABANDON CART
Widget – Abandon Cart
File Path –Views\cart\html_abandonedcarts.ascx (Available in version 7.0 and above)
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
231
Description Behavior
Most of the times shoppers add items to shopping cart but do not complete their purchase. Such abandoned carts are retained for the shoppers and displayed when they log in to the online store. This increases the chances of the shopper ending up purchasing the item. Shopper can view items from last 7 to 30 days.
The Manager Panel provides configuration to control the behavior of abandoned carts. Either you can give pop up where shopper manually needs to add items to shopping, or choose the auto merge option that automatically retains items in the shopping cart.
To do the setup path is:-
Ecommerce Manager Panel Basic Settings Channels. Select channels and go to Customer Tab.
Clicking on Add to Cart button will add selected items to the cart.
Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets
232
3.127. ABANDON CART LINES
Widget – Abandon cart lines
File Path –Views\ cart\html_abandonedcartlines.ascx (Available in version 7.0 and above)
Description Behavior
Abandon cart line displays abandoned cart items. It displays item code, item name, stock quantity, quantity added to cart and the date on which the item was added to cart.
Shoppers can select the checkbox against the respective items and click on Add to Cart button. This will add items to the cart.