Skip to content

[FEATURE]: Add size guide modal/popup on the product detail pageΒ #312

Description

@Git-Shubham14

πŸš€ Feature Request

πŸ“Œ Feature Description

Add a "Size Guide" link next to the size selector on the
product detail page that opens a modal/popup containing a
measurement chart to help users choose the correct size
before purchasing.


❓ Problem Statement

The product detail page allows users to select sizes
(S, M, L, XL) but provides absolutely no size guide or
measurement reference. For a fashion store selling T-Shirts,
Hoodies, and Jackets, this is a critical missing feature β€”
users who are unsure of their size will abandon the purchase
rather than risk buying the wrong fit, directly hurting
conversion rates.


πŸ’‘ Proposed Solution

  • Add a "πŸ“ Size Guide" link directly next to the size
    selector buttons on the product detail page
  • Clicking it opens a clean modal popup containing a
    measurement table (Chest, Waist, Length in both cm
    and inches per size S/M/L/XL/XXL)
  • Modal is closeable via an X button or by clicking
    outside the modal overlay
  • Implemented as pure HTML + CSS modal with minimal JS β€”
    no external library needed
  • Fully responsive β€” works on both desktop and mobile

🎯 Benefits

  • Directly reduces cart abandonment caused by size uncertainty
  • Reduces return/exchange rates from customers ordering
    wrong sizes
  • Improves customer confidence and purchase decision speed
  • Industry-standard feature present on every fashion
    e-commerce platform (Myntra, H&M, Zara, Amazon Fashion)
  • Pure frontend implementation β€” zero backend changes needed
  • Small scoped change with measurable conversion impact

Metadata

Metadata

Assignees

Labels

SSoC26Program label for Social Summer of Code Season 5.

Fields

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions