Common page types

& Anatomy of an
e-commerce website

BUY NOW
 GraphicsGuruji's “Anatomy of e-commerce website e-book” -> Welcome www.learn.graphicsguruji.com/products

Welcome to GraphicsGuruji's
Anatomy of e-commerce website
e-book
We're excited that you're ready to dive in. Here's some important information to help you get
started on your creative journey.

License Agreement

Please keep in mind that your use of this file is governed by the License Agreement of GraphicsGuruji's

Anatomy of e-commerce website e-book.

Kindly avoid selling the files, or using them in products, UI kits, or templates you're selling, publishing

them online, or distributing them for free.

© 2023 GraphicsGuruji in association with Baagdi Solutions Pvt. Ltd.

Common page types for an e-commerce website -> List

Best practices of designing E-commerce websites

Easy navigation: Make it easy for users to find what they are looking for by organizing your products into clear

categories and subcategories, and providing a search function

Product pages: Ensure that each product page includes high-quality images, detailed product descriptions,

and information about available sizes, colors, and other options

Product images: High-quality product images are essential for e-commerce websites. They should be clear,

well-lit, and show the product from multiple angles

Product descriptions: Detailed product descriptions are important for helping customers make informed

purchasing decisions

Search functionality: A search bar and filters can help customers find the products they're looking for more

quickly

Customer reviews: Allow customers to leave reviews and ratings for products to help other users make

informed purchasing decisions

Shopping cart: Make it easy for users to add items to their cart and complete the checkout process

Payment options: Offer a variety of payment options, including credit card, PayPal, and other popular options

Mobile optimization: Optimize your site for mobile devices to make it easy for users to shop on the go

Security: Make sure your site is secure to protect your customers' personal and financial information

Customer service: Provide clear contact information and offer multiple options for customer support, such as

phone, email, and live chat

Shipping and returns: Clearly communicate your shipping and return policies to help customers make

informed purchasing decisions

Customer account: Allow customers to create accounts to save their information and easily track their orders

Product reviews: Product reviews can help build trust and credibility with potential customers

Personalization: Use personalization techniques, such as recommending products based on previous

purchases or browsing history, to improve the shopping experience for your customers.

 Common page types for an e-commerce website -> List

The checklist to design new e-commerce website or redesign

1. Ensure Your Website is Responsive

2. The Cart Icon Must be Available on Every Page

3. The Checkout Button Must Always Be Clearly Visible

4. Have a Prominent Search Bar On Every Page

5. Clear Navigation Menus

6. Contact Information on Every Page

7. Maintain Consumer Confidence

Customer Testimonials • Why Shop With Us • Privacy Policy • Delivery Information • Return Policy

8. Show Logos

9. Prominent Calls to Action

10. Have Emotionally Appealing Photography

11. Include “Top Selling”, “Featured Product” and “Recommended For You"

12. Use Imagery to Support Calls to Action and “Top Sellers"

13. Show Stock Availability

14. Show Filtering and Sorting Functions

15. Highlight Best Sellers or Customer Favorites

16. Include Customer Review Scores

17. Make the “Buy” or “Add to Basket” Button Prominent

18. Feature an “Add to Wishlist” Button

19. Upsell (aka “You May Also Like””

20. Short(ish) Product Description

21. Product Photos From Different Angles

22. Add Video Demonstrations

23. Show Estimated Delivery Time

24. Use Tabs for Products that Have A Lot of Detail

25. Display Customer Reviews or Testimonials

26. Show Stock Availability

27. Show All Fees Upfront

28. Provide an Easy Way to Update Cart Items

29. Include a “Return to Shop” Link

30. Strip Away the Navigation Menu from checkout page

31. Security Badges

32. Break Up the Order Process Into 4 Steps

1. The cart interface

2. Customer name, details and delivery address

3. Payment information

4. Confirmation page
Common page types for an e-commerce website -> List

Page types

1. Homepage: The main landing page, featuring featured products, promotions, and a search bar.

2.Category Pages Pages that display products organized by categories or subcategories.

3. Product Pages Pages dedicated to showcasing detailed information about a single product.

4. Search Results
Displays results based on user searches, often with filters and sorting options.
Page

5. Shopping Cart Shows the items added by the user for purchase and allows for editing quantities or removing items.

Series of pages where customers enter shipping, billing, and payment information to complete a purchase. This includes:
6. Checkout Pages
- Shipping Information Page: Collects the user's shipping address.

- Billing Information Page: Collects payment and billing details.

- Order Summary Page: Displays a final summary of the order before payment.

- Confirmation Page: Confirms the successful completion of the order.

Pages where users manage their accounts, including:

7. Account Pages
- Login/Register: Allows users to create accounts or log in.

- Profile: Enables users to update personal information.

- Order History: Displays a history of past orders.

- Wishlist: Allows users to save products for later.

8. Product Lets users compare the features and specifications of multiple products.
Comparison Page

9. Product Review/ Shows customer reviews and ratings for specific products.
Rating Pages

0 Blog
1 . Features articles, news, or content related to products, industry trends, or helpful information.

11. About Us Pag Provides information about the company, its history, mission, and values.

12. Contact Us Offers contact information and a contact form for customer inquiries.
Page

v
13. Pri acy Policy Explains how user data is collected, used, and protected.

14. Terms and Outlines the rules and regulations governing the use of the website.
Conditions
Common page types for an e-commerce website -> List

15. Shipping
Details shipping options, rates, and delivery times.
Information Page

16. Returns and

Explains the return policy and process.
Refunds Page

FAQ Provides answers to common customer queries.

Sitemap A hierarchical list of all pages on the website, often for SEO and navigation purposes.

19. 404 Error Page Displays when a page is not found, guiding users back to the site.

20. Thank You Page Appears after a successful purchase, confirming the order and providing order details.

21. Promotion or
Temporary pages highlighting specific promotions, discounts, or sales events.
Sale Pages

22. Customer Help

Central hub for customer support resources, including articles, guides, and contact options.
Center

23. Account
Helps users recover forgotten passwords or account information.
Recovery Page

24. Gift Cards/

Pages for purchasing and redeeming gift cards.
Certificates

25. Customer
Gathers feedback from customers to improve services and products.
Feedback

26. Subscription
Allows users to subscribe to newsletters for updates and offers.
Signup Page
 Anatomy of an e-commerce website -> Home page

Anatomy - Page structure

Home page Anatomy

5.Customer

1.Language Login/Register
Option(If Necessary)
6.Wishlist
2.Phone Number 12345-12345 English Store Finder

3.Logo Search for... Login/Register Wishlist Cart

7.Shopping Cart

8.Search Bar
4.User-friendly
New Best Seller Dresses Jumpsuits Tops Skrits Shorts Pants Outerwear Co-ords Collections Petite Tall

Navigation

9.Store Finder

(If Necessary)

10.Unique Value

Proposition

11.Risk Reducers Free shipping & Return Loyalty Program 12.Loyalty Program

13.CTA to push
people to product
collection &
Product collection Product collection Product collection Product collection
important sales
page

14.Featured Featured Products

products or best
selling products
or new arrivals

Product Name Product Name Product Name Product Name

₹1350 ₹1350 ₹1350 ₹1350

Add To Cart Add To Cart Add To Cart Add To Cart

15. Personalized
Recommended For You
Items

Product Name Product Name Product Name Product Name

₹1350 ₹1350 ₹1350 ₹1350

Add To Cart Add To Cart Add To Cart Add To Cart

16.Text Content

17.FAQ, Returns
& Exchanges,
Store Locator,
Shipping
Information,
19.Contact
Information
Track Order etc.
20.Newsletter
18.Quick Links for Quick Links Support Contact Us Subscribe Our Newsletter
Signup

categories New Arrivals FAQ [email protected]

Your email address

21.Payment
Best Sellers
Returns & Exchanges
+91 12345-12345
Jumpsuits
Store Locator

Tops
Mansrovar, Jaipur, Rajasthan System Icons
Shipping Information
Skrits

Shorts
Track Order
22.Social Media
Pants Links

24.Terms & Outerwear

23.Live Chat
Conditions,
Terms & Conditions. Privacy Policy. Sitemap

Privacy policy &

Sitemap
 Anatomy of an e-commerce website -> Category Page

Category Page

25.Breadcrumb

Navigation

26.Consistent 27.Show number

Image Size of products

displaying in the

page

Product Name Product Name Product Name Product Name

₹1350 ₹1350 ₹1350 ₹1350

Add To Cart Add To Cart Add To Cart Add To Cart

28.Product
Product Name Product Name Product Name Product Name
filtering and
₹1350 ₹1350 ₹1350 ₹1350

sorting
Add To Cart Add To Cart Add To Cart Add To Cart

29.Page

description field

Product Page

33.Product T itle

30.Good quality
34.Pricing
of images with
(120) information with
zoom-in

functionality
Price potential sales or

discounts
inclusive of all taxes
31.Alternate Co orl

views of the 35.Product

product /multiple Variables

Quantity:
view
1
36.A field to chang e

Add To Cart Add To Wishlist purchase quantities

32.Add to Cart

button
Delivery in 2 days!
T
37. rust signal
Share
around add to

cart button
40.Product
Product Description
Description
Description User comments 21 Shipping Information 38.Social share

button

39.Add to

Wishlist
41.Consumer
Related Products
reviews on

product

42.Related

Products

Product Name Product Name Product Name Product Name

₹1350 ₹1350 ₹1350 ₹1350

Add To Cart Add To Cart Add To Cart Add To Cart

 Anatomy of an e-commerce website -> Customer Checkout, Shopping Cart and Wish List

Customer Checkout, Shopping Cart and W ish List

Your Shopping Cart

Billing Details
Order Summary

43.Billing & Edit

Blue Flower Print Crop Top x 1 ₹1320.00

Shipping Address
Color : Yellow

47.Cart Details
48.Have an
Levender Hoodie x 2 ₹459.00

Shipping Address Colour : Levender

option to change
Select the address that matches your card or payment method.

the quantity or
Black Sweatshirt x 2 ₹543.00

Color : Black

Same as Billing address remove items

Subtotal ( 3 items ) ₹2322.00

Use a different shipping address Savings -₹90.00

Shipping -₹100.00

44.Shipping Shipping Method

Total ₹2132.00 49.Final Price
Methods

(Offer low shipping costs)

Arri ves by Monday, June 7 Save for Later
50.Allow items to
be saved for later
Safet y & Security for Seals
Delivery Charges ₹100.00
Additional fess may apply

51.Security Seals

Payment Method

All transactions are secure and encrypted.

45.Inculde an Promo Code Apply

area to punch in

promo codes Credit Card

We accept all major credit cards.

46.Accept all
payment
methods Card number Name of card

Expiration date (MM/ YY) Security Code

Cash on delivery
Pay with cash upon delivery.

Paypol

Pay Now

Blog

52.Sidebar - blog Search for...

search categories, Categories

popular posts
53.Social Share
Button

Pop ular Posts

 Want to learn about

How to do research, plan and
design a complete e-commerce
website?

and Landing page

+ Sales page

+ Dashboard Designing


Get this complete course now!

50+ Chapters
Dedicated LIVE sessions
10 different websites projects
Landing page
Sales page
Dashboard and SAAS project
Ecommerce project
One on one assignment review
Portfolio and CV making
Certificate from IT company
Interview preparation
AR VR and AI for UI design
And lots of premium kits for free!

Get course now!