233
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 Templates and Widgets

Embed Size (px)

Citation preview

Page 1: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 2: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 3: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 4: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 5: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 6: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 7: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 8: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 9: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 10: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 11: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

10

3.126. Abandon Cart .............................................................................................................................................................................................................. 230

3.127. Abandon Cart Lines ..................................................................................................................................................................................................... 232

Page 12: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 13: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 14: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 15: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

14

Page 16: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

15

Page 17: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

16

Page 18: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

17

Page 19: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

18

Page 20: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 21: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

20

Page 22: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

21

Page 23: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

22

Page 24: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

23

Page 25: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

24

Page 26: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 27: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

26

Page 28: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

27

Page 29: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

28

Page 30: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

29

Page 31: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

30

Page 32: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

31

Page 33: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

32

Page 34: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

33

Page 35: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 36: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 37: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 38: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 39: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

38

Page 40: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

39

Page 41: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 42: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

41

Page 43: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 44: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 45: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 46: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 47: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 48: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 49: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 50: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 51: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

50

Description

Page 52: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 53: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

52

Page 54: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 55: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 56: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 57: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 58: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 59: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 60: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 61: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 62: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 63: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 64: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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,

Page 65: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 66: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 67: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 68: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 69: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

.

Page 70: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 71: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 72: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 73: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 74: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 75: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 76: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 77: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 78: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 79: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 80: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 81: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

80

Page 82: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 83: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 84: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

83

Page 85: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 86: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 87: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

86

3.13. SAVED CART

Widget – Saved Cart

Page 88: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 89: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 90: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

89

Page 91: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 92: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 93: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 94: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

93

Fig.1

Fig.2

Page 95: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

94

Fig.3

Page 96: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 97: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 98: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 99: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 100: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 101: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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).

Page 102: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 103: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

102

Description Behavior

Page 104: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 105: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 106: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 107: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 108: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

107

Fig 1.

Page 109: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 110: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 111: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 112: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

111

Page 113: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 114: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 115: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

114

Page 116: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 117: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 118: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 119: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

118

Fig.1

Page 120: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 121: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 122: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

121

Fig.1

Page 123: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

122

Fig.2

Page 124: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

123

Page 125: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 126: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

125

Description Behavior

Page 127: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 128: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

127

Page 129: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 130: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 131: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 132: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 133: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 134: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

133

Fig.1

Page 135: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

134

Fig.2

Promotional Tags Qualifiers

Page 136: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

135

Fig.3

Qualifiers

Page 137: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

136

Page 138: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 139: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 140: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 141: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 142: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 143: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

142

Page 144: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

143

Page 145: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

144

Page 146: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

145

Page 147: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

146

Page 148: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 149: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 150: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

149

Page 151: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

150

Fig.1

Page 152: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

151

Fig.2

Page 153: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 154: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

153

Description Behavior

Page 155: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 156: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 157: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

156

Fig.1

Page 158: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 159: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 160: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 161: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 162: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 163: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 164: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 165: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

164

Page 166: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

165

Fig.1

Page 167: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 168: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 169: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 170: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 171: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

170

Fig.2

Page 172: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 173: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 174: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 175: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 176: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

175

Page 177: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

176

Fig.1

Page 178: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 179: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 180: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 181: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 182: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 183: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 184: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 185: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

184

Page 186: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

185

Page 187: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

186

Page 188: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 189: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 190: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 191: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

190

Page 192: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

191

Fig.1

Page 193: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

192

Description Behavior

Page 194: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 195: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 196: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 197: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 198: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 199: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 200: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 201: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 202: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

201

Page 203: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 204: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 205: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 206: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

205

Page 207: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 208: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 209: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

208

Page 210: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 211: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 212: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 213: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 214: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 215: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

214

Page 216: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 217: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

216

Page 218: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 219: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 220: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

219

Page 221: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 222: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 223: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

222

Page 224: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 225: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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

Page 226: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 227: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 228: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

227

Page 229: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 230: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

Hitachi Solutions Ecommerce Design Guide – List of Templates and Widgets

229

Page 231: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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)

Page 232: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.

Page 233: Hitachi Solutions Ecommerce Design Guide Templates and Widgets

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.