2.2 E-Commerce Site Components

Every e-commerce website — Amazon, Flipkart, Myntra, Nykaa — has the same core components. They differ in implementation and polish, not in purpose. The standard customer journey:

The Laudon textbook calls these "Important Components of E-Commerce Website":

1. Product Cataloguing
2. Product Listing Page (PLP)
3. Product Description Page (PDP)
4. Cart Building
5. Checkout

Plus the third-party integrations covered in next lesson.

---

1. Product Catalog

The catalog is the master database of all products sold. Each product has:

Catalog structure choices

Catalogs can be organised in four broad ways. A flat structure — one big list with no hierarchy — works for tiny catalogues (under ~1,000 items) where the user can scan everything in a few scrolls. A categorical or hierarchical structure organises products into a tree (Men → Topwear → Shirts → Polo), and is the default for general-purpose commerce — Amazon, Flipkart, and BigBasket all use it. A faceted structure lets users filter by multiple attributes simultaneously (size + colour + brand + price), which is essential for fashion and electronics where shoppers narrow on several dimensions at once. A tag-based structure abandons strict hierarchy in favour of free-form keywords — common on user-generated-content marketplaces like Etsy, where sellers add their own tags and discovery is search-driven.

Catalog management tools

• PIM (Product Information Management) — Akeneo, Salsify, inRiver
• DAM (Digital Asset Management) — Adobe AEM, Bynder — manages product images/videos
• CMS — for content-heavy catalogs (Contentstack, Strapi)

---

2. PLP — Product Listing Page

The PLP is the page that shows multiple products — search results, category browse, brand page. Goal: help the user narrow to the product they want.

PLP features (checklist)

• Grid / list view toggle
• Sort options (popularity, price low-high, newest, discount)
• Filters / facets (price range, brand, size, colour, rating)
• Pagination / infinite scroll
• Quick add-to-cart (without leaving PLP)
• Wishlist heart icon
• Compare (electronics, mobiles)
• Sponsored / Featured listings (revenue source)

PLP performance considerations

• Lazy-load images — only when in viewport
• Image optimisation — WebP / AVIF, multiple sizes
• Pagination preserves SEO; infinite scroll harms SEO
• Filter facets need fast backend — Elasticsearch / Algolia common

Search

• Keyword search — basic text matching
• Typo tolerance — "iphonr" → "iphone"
• Synonym — "shirt" matches "tee", "t-shirt"
• Semantic search — vector embeddings (e.g., "blue casual top for office")
• Auto-suggest — as user types
• Voice search — speech-to-text + keyword
• Visual search — upload image, find similar products

---

3. PDP — Product Description Page

The PDP is the closer — the page that converts browsers into buyers. Possibly the most important page on the entire site.

PDP must-haves

Behavioural psychology on PDP

• Social proof — "10K+ bought this month"
• Scarcity — "Only 2 left in stock"
• Anchoring — Show MRP crossed out, then sale price
• Loss aversion — "Save ₹500 if you buy now"
• Personalisation — "Recommended for you based on previous browsing"

Conversion rate fact: A well-optimised PDP can convert at 5–10%; a poorly-designed one at < 1%. Optimising PDP is the single highest-ROI activity in e-commerce.

---

4. Cart

The shopping cart holds items the user intends to buy. Cart is typically:

• Persistent — survives session timeouts (stored in DB linked to user, or cookie)
• Cross-device — same cart on phone and laptop (if logged in)
• Real-time — inventory and price update live

Cart features

• Add / Update quantity / Remove
• Apply coupons / promo codes
• Save for later / Move to wishlist
• Estimated delivery date
• Estimated total with taxes, shipping, discounts
• Express checkout (Buy Now)
• Recommendations ("You may also like")
• Cart abandonment recovery (email/SMS after 30 min)

Cart abandonment — the silent killer

Cart abandonment is the single largest revenue leak in e-commerce. The Baymard Institute's 2024 study, run across millions of sessions, places average abandonment at 70–75% — meaning of every four shoppers who add to cart, three never complete the purchase. The reasons cluster into a familiar pattern: unexpected costs at checkout (shipping, taxes, fees) account for ~48% of abandonments, forced account creation drives ~24%, complex or long checkout flows ~18%, trust concerns about the site or payment ~17%, and a slow site ~16%. The good news is that abandonment is partially recoverable — a well-timed sequence of reminder emails (often paired with SMS or WhatsApp in India) typically recovers 8–10% of the lost carts, which is the highest-ROI marketing channel most e-commerce brands have.

Reducing cart abandonment

1. Show shipping cost early — don't surprise at checkout
2. Allow guest checkout — no forced account creation
3. Save cart — don't lose if user leaves
4. Multiple payment options — UPI, cards, wallets, COD
5. Progress bar — show 2 of 4 steps complete
6. Re-marketing — abandoned-cart email/SMS/WhatsApp

---

5. Checkout

Checkout is a 2-5 step funnel that converts cart into order. The fewer steps, the higher the conversion.

Standard checkout steps

1. Login / Guest checkout
2. Address — shipping + billing
3. Shipping method — standard, express, premium
4. Payment method — UPI, card, wallet, EMI, COD
5. Review and place order
6. Confirmation — order ID, expected delivery

Modern checkout patterns

Checkout best practices

• ✅ Allow guest checkout
• ✅ Show trust signals (SSL, secure payment logo)
• ✅ Multiple payment methods
• ✅ Display total including all fees before payment
• ✅ Send confirmation email + SMS immediately
• ✅ Generate order ID for tracking
• ❌ Avoid forced account creation
• ❌ Avoid surprise costs (shipping at last step)
• ❌ Avoid long forms

---

Order Confirmation & Tracking

After successful payment:

---

The Funnel — Conversion Reality

Industry average e-commerce conversion: 1.5-3%. Best in class (Amazon Prime members): 13%+.

---

Key Terms — Lesson 2.2

The terms below are the everyday vocabulary of any e-commerce product, design, or engineering team. Every PYQ on "components of an e-commerce site" expects you to recognise them.

Product Catalog — The master record of every product the site sells, with structured attributes (SKU, name, description, price, inventory, images, variants, specifications, taxonomy). The catalog is the single source of truth that the rest of the site (PLP, PDP, search, recommendations, cart) reads from. Large catalogs run in dedicated Product Information Management (PIM) systems like Akeneo or Salsify.

SKU (Stock Keeping Unit) — A unique identifier for one specific product variant. A "blue medium polo T-shirt" is one SKU; "red medium" is a different SKU; "blue large" is a third. SKUs are the unit of inventory tracking, pricing, and supply-chain operations. Amazon's global catalogue exceeds 350 million SKUs.

PLP (Product Listing Page) — A page that shows multiple products matching a category, search query, brand, or campaign — Amazon's "search results for laptops", Myntra's "Men > Shirts > Casual". The PLP's job is to help users narrow quickly via grid view, sort options, filters/facets, pagination, and quick-add-to-cart.

PDP (Product Description Page) — The single-product page where the user sees images, price, variant selectors, reviews, delivery estimate, and the Add-to-Cart / Buy Now buttons. The PDP is the closer: a well-optimised PDP can convert 5–10% of visitors; a poor one barely cracks 1%. PDP is the most A/B-tested page in commerce.

Facets / Filters — Attributes (price range, brand, size, colour, rating) that a user can use to narrow a PLP. Faceted search requires the backend to know, for every filter combination, how many products would match — which is why fast search engines like Elasticsearch, Solr, or Algolia sit behind PLPs at any reasonable scale.

Cart (Shopping Cart) — The temporary holding place for items the user intends to buy. Modern carts are persistent (survive session timeouts and device changes if the user is logged in), real-time (inventory and prices update live), and support save-for-later, wishlist transfer, and coupons.

Cart Abandonment — When a user adds items to the cart but does not complete checkout. The industry average abandonment rate is 70–75%; the main causes are unexpected shipping costs, forced account creation, complex checkout, and trust concerns. Recovery via email/SMS/WhatsApp typically retrieves 8–10% of abandoned carts and is one of the highest-ROI channels in e-commerce.

Checkout — The 2–5 step funnel that turns a cart into a paid order: login (or guest), address, shipping method, payment method, review, place order. Every additional step costs conversion — the gold standard is a single-page or express checkout that pre-fills as much as possible from saved profiles.

Guest Checkout — Letting a user complete a purchase without creating an account. Forced account creation is the second-biggest cause of cart abandonment (~24%, per Baymard). Guest checkout typically uses the user's email + phone as the order identifier and offers account creation post-purchase instead.

One-Click Checkout / Express Checkout — A pattern where saved profile data (address, payment) lets the user place an order in a single tap. Amazon's 1-Click (patented in 1999, expired 2017) pioneered it; today Apple Pay, Google Pay, PayPal Express, and PhonePe Switch all offer similar express-checkout flows.

Conversion Rate — Visitors who complete a purchase ÷ total visitors. Indian B2C industry average runs 1.5–3%; best-in-class (Amazon Prime, top D2C brands) cross 10%+. Conversion is the single most-watched metric because it multiplies directly with traffic and AOV to determine revenue.

Conversion Funnel — The step-wise drop-off from visit → browse → cart → checkout → order. Mapping the funnel is the first diagnostic for any conversion problem: a big drop at "add-to-cart → begin-checkout" usually points to surprise shipping costs or forced login; a drop at "begin → complete" points to payment or trust issues.

Average Order Value (AOV) — Total revenue ÷ number of orders. AOV is the lever most directly under a brand's control (via bundles, free-shipping thresholds, "frequently bought together" upsells) and is the reason "Get free shipping on orders over ₹499" works so well.

Faceted Search / Vertical Search — Specialised search that combines free-text matching with structured filters (brand, price, size, etc.). Modern faceted search supports typo tolerance ("iphonr" → "iphone"), synonyms ("shirt" matches "tee"), autosuggest, and increasingly semantic search using vector embeddings ("comfortable formal shoes under ₹3,000").

Recommendation Engine — A system that suggests additional products based on user history, similar users, current item, or session context. Two foundational approaches: collaborative filtering ("users who bought X also bought Y") and content-based ("items similar to ones you viewed"). Amazon attributes ~35% of its revenue to recommendations; Netflix ~75% of watch time.

Wishlist / Save for Later — A persistent list of items a user wants to track without putting them in the cart. Wishlists serve two purposes: they reduce cart bloat (users move marginal items out instead of just leaving them) and they create re-engagement hooks (price-drop alerts, back-in-stock notifications).

Order ID — A unique identifier generated at the moment the order is placed; the customer's reference for the entire downstream journey (confirmation email, shipping tracking, returns, customer-support calls). Order IDs are usually system-generated, monotonically increasing, but obfuscated so they don't leak business volume.

Pincode / PIN Check — A specifically Indian PDP feature where the user enters a 6-digit pincode to see whether the product can be delivered to their address and by what date. Pincode logic ties together inventory location, courier serviceability, and shipping speed.

Cash on Delivery (COD) — A payment option where the buyer pays in cash (or by card/UPI) at delivery. COD remains ~20–25% of orders in tier-3/4 India even after UPI's rise, because of trust concerns and unbanked recipients. COD has a notorious downside: higher RTO (Return-to-Origin) rates when buyers refuse delivery, which is why many sellers add COD verification calls or charge a small COD handling fee.

---

Study deep

1. Speed is a feature. A 1-second delay in page load can drop conversion by 7% (Google data). Every PDP optimisation should include image compression, lazy-loading, and CDN-served assets.

1. Mobile-first checkout. Mobile checkout has 2× the abandonment rate of desktop. UI must be thumb-friendly: large buttons, autofill, payment method picker before form fields.

1. Recommendations drive 30%+ of sales. Amazon attributes 35% of revenue to recommendations. Building a basic collaborative-filter recommender is a worthwhile project — covered in next lesson.

1. PDP is the most-A/B-tested page. Layout, button colour, photo count, review placement, "buy now" vs "add to cart" — every element optimised. Amazon and Flipkart run 100+ A/B tests per day.

1. Cart-abandonment recovery email is the highest-ROI marketing channel in commerce. A user who reached cart is high-intent. A well-timed email (2 hours, then 24 hours, then 72 hours later) typically recovers 8–10% of abandoned carts.

PYQ pattern (very common): "Discuss the components of an e-commerce website / explain product cataloguing, PLP, PDP, cart and checkout." — Define each of the 5; list 4-5 features per component; sequence them in the user journey.