Saas Framework
Download as PPT, PDF0 likes1,621 views
The document provides instructions for customizing an e-commerce homepage by selecting options for various components, including basic page structure, header, search techniques, navigation model, layout, and footer. It then provides examples of options for each component and a sample customization scenario bringing all the components together.
Saas Framework
- 1. Instructions Dear User, To customize the e-commerce homepage you can choose among the various available options of layouts, search technique, navigation models and page components. In order to customize the e-commerce application a following step-wise process has to be taken selecting a particular component in each step. A complete scenario is present at the end
- 2. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 3. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 4. WF-BLOCK
- 5. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 6. 1) Header
- 7. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 8. 2) Search – Option1 Spray I’m searching for: Go Top Searches- Browse Categories Category1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam , quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Category2 Category3 Category4 Category5 Category6 Category7 Category8 Category9 Category10 Category11 See all categories … English
- 9. Showing 6 search Results in Perfumes and Cosmetics All Categories (230) Perfumes and Cosmetics (6) Category 2 (100) Category 3 (60) Category 5 (20) Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Add to wish list View details | Compare ‘ Spray ’ Found in these Categories Category 1 | Category 2 | Category 3 | Category 4 | Category 5 | Category 6 | Category 7 Search Go Top products (5) Featured products (1) Lowest Prices (2) New products (3) Advanced Search Add to Cart Add to wish list Add to Cart Add to wish list Add to Cart Products Related to ‘ Spray’ Spray Perfumes and Cosmetics Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Promo Special Offers! Show 50 results << Pagination >> 2) Search – Option2 Copyright Browser Requirement About Us | Privacy Statement | Security Info | Feedback Refine your search and sort by- Available at store- Payment method- Shipping & Courier Products with Deals- 20$-2000$ Price Range- Glass bottle With features- Refine search results
- 10. ‘ Spray ’ Found in these Categories. Select categories to view products. Category 1 | Category 2 | Category 3 | Category 4 | Category 5 | Category 6 | Category 7 Search Go Top products (5) Featured products (1) Lowest Prices (2) New products (3) Advanced Search Spray Perfumes and Cosmetics Promo Special Offers! All Categories (230) Perfumes and Cosmetics (6) √ Category 2 (100) Category 3 (60) Category 4 (100) Category 5 (60) Category 6 (100) Category 7 (60) √ √ Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Showing 6 results in Perfumes and cosmetics Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Category 8 (100) Category 9 (60) Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: View details | Compare Add to wish list Add to Cart Showing 14 results in Category 2 Showing 1 results in category 3 2) Search – Option3 Copyright Browser Requirement About Us | Privacy Statement | Security Info | Feedback
- 11. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 13. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 14. 160 Px 280 Px 280 Px 280 Px 160 Px 340 Px 340 Px 280 Px 160 Px 100 Px 160 Px 280 Px 280 Px 280 Px 420 Px 420 Px 240 Px 240 Px 240 Px 280 Px 140 Px 40 Px 140 Px 140 Px 140 Px 290 Px 140 Px 150 Px Primary Navigation Contextual Navigation Primary Navigation Product Categories Primary Navigation Product Categories Product Categories Rating Boards 3) Layout (Grid structure) – Option 1-4
- 15. 3) Layout (Grid structure) – Option 5-8
- 16. 3) Layout (Grid structure) – Option 9-12
- 17. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 18. 5) Footer
- 19. Customization options: - Basic Page Structure Header Search Techniques Navigation model Layout (Grid structure) Footer Examples
- 21. Sample Scenario of an e-commerce site
- 22. Search in Go Advanced Search Sub Category 1 Sub Category 2 Sub Category 3 Sub Category 4 More > Top Brands Top Categories Top Products Brand 1 Brand 2 Brand 3 Brand 4 More > Main Promotion Articles Reviews News Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis ipsum ac lectus sodales dictum. Cras at mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. More > Featured Products New in Store Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Promotion 1 Promotion 2 Promotion 3 Promotion 4 Promotion 5 1 2 3 4
- 23. Category Promotion Articles Reviews News Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis ipsum ac lectus sodales dictum. More > Featured Products in this category New in this category Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Promotion 1 Promotion 2 Promotion 3 Promotion 4 Promotion 5 Category Sub Category 1 Sub Category 2 Sub Category 3 Sub Category 4 Sub Category 5 Sub Category 6 Top Brands Top Products Brand 1 Brand 2 Brand 3 Brand 4 More > Featured Sub categories Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Category 1 2 3 4
- 24. Category > Sub Category Category Sub Category 1 Sub Category 2 Sub Category 3 All products Brands Brand A Brand B Brand C More > Feature ‘X’ Range 1 Range 2 Range 3 Sub Category 4 Sub Category 5 Sub Category 6 Sub Category 3 Buying Tips How to choose… Expert speak… In this category Top products Featured products Lowest Prices New products Related Articles Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: Add to cart Checkout View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: Add to cart Checkout View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Add to cart Checkout View details | Compare Add selected to cart Compare Selected Narrow down the list: Select brand Price Range Parameter 1 With feature 1 With feature 2 Refresh Promotion Promotion New trends in… Display by A-Z Displaying 1-9 of 123 products Page 1 2 3 4 5 6 Next >
- 25. Category > Sub Category > Product Details Category Product Name- short description Product photo Product photo 2 Product photo 3 Product photo 4 Description Specifications Reviews Buying Tips Shipping OR Store pickup? Return Policy Add to cart Checkout Compare with similar products | Shipping charges Rate it | Add Review In this category Similar products Top products Featured products Lowest Prices New products Suggested Accessories Include in the order Accessory 1 Picture Description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: Quantity: More Details > Similar Products Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis ipsum ac lectus sodales dictum. Cras at mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec sed neque ornare est fermentum dapibus. Aenean fermentum blandit nunc. Phasellus pretium, turpis sodales venenatis blandit, mauris tellus auctor erat, ut gravida nisi turpis vitae arcu. Price: $ 250 Rating: Sub Category 1 Sub Category 2 Sub Category 3 All products Brands Brand A Brand B Brand C More > Feature ‘X’ Range 1 Range 2 Range 3 Sub Category 4 Sub Category 5 Sub Category 6 < Back to List
- 26. Category > Sub Category > Product Details > Message You have successfully added ‘product A’ to shopping cart You can, > Go back to the list page and continue shopping > Login to you account to save the cart > Proceed to Checkout
- 27. Shopping Cart Shopping Cart Login to your account to save the shopping cart Continue shopping Review the shopping cart before checking out. You can also save the shopping cart to your account by logging in $ 380 $ 10 $ 370 $ 70 300 Total $ 40 $ 35 $ 300 $ 300 Original/Discounted Price Product Total Discount Revised Total Product B 2 Product A 1 Quantity Product
- 28. Check out Check out 1. Shopping Cart 2.Shipping Address 3.Billing 4.Confirmation Login to your account to save the shopping cart make the checkout process easy Review the shopping cart before checking out. You can also save the shopping cart to your account by logging in $ 380 $ 10 $ 370 $ 70 300 Total $ 40 $ 35 $ 300 $ 300 Original/Discounted Price Product Total Discount Revised Total Product B 2 Product A 1 Quantity Product
- 29. Check out Check out 1. Shopping Cart 2.Shipping Address 3.Billing 4.Confirmation Login to your account to make the checkout process easy
- 30. My Account Shopping Cart 1.Update Shopping Cart 2.Shipping Address 3.Billing 4.Confirmation Review the shopping cart before checking out. Welcome ABC My Account | Track My Order | My Shopping Cart | Sign-out Shopping cart My Alerts Track my Order My profile Billing Details Shipping Details Shopping History Loyalty points Subscriptions Suggested items ? $ 380 $ 10 $ 370 $ 70 300 Total $ 40 $ 35 $ 300 $ 300 Original/Discounted Price Product Total Discount Revised Total Product B 2 Product A 1 Quantity Product
- 31. My Account Welcome ABC My Account | Track My Order | My Shopping Cart | Sign-out Shopping cart My Alerts Track my Order My profile Billing Details Shipping Details Shopping History Loyalty points Subscriptions Suggested items My Profile Address Fields with (*) are required. *First Name MI *Last Name Gender Male Female *Address Line 1 Address Line 2 *City *State *Zip Phone Birthday Your Contact Preferences Mail Phone
- 32. Search > Search Results Categories All Categories (230) Category 1 (50) Category 2 (100) Category 3 (60) Category 5 (20) Search results for ‘phone’ Search Tips Top products (5) Featured products (1) Lowest Prices (2) New products (3) Product Name : Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: Add to cart Checkout View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Rating: Add to cart Checkout View details | Compare Product Name: Short description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit Price: $ 250 Add to cart Checkout View details | Compare Add selected to cart Compare Selected Narrow down the Results: Category Select brand Price Range With feature 1 With feature 2 Refresh Promotion Promotion Display by A-Z Displaying 1-9 of 230 Results Page 1 2 3 4 5 6 Next > phone Search results in Categories