06 — Product Detail Page
Four Fixes That Matter at Decision Time
The product page is where shoppers decide whether to buy. Gallery clipping, a completely broken reviews section, simple product layout issues, and missing compliance labels were all resolved.
4
product page issues fixed
352
lines of new gallery CSS
483
lines of new reviews CSS
0
pages missing MRP labels
Gallery Lightbox Rebuilt
352 lines of new CSS · 4 bugs fixed
Before the refactor, clicking a product image opened a modal that clipped the image on both sides, had no way to browse other images without using oversized arrows, and couldn't be closed by clicking outside. Four separate bugs, all in the same lightbox.
The gallery area before opening the lightbox
The gallery has no thumbnail strip — shoppers can only navigate using the left/right arrows overlaid on the main image. The refactor adds a dedicated thumbnail row beneath, so all product images are browsable at a glance.
Before — 4 open bugs
- ✗Image clips at left and right edges — parts of the product are hidden
- ✗No thumbnails — shoppers don't know how many images exist
- ✗Click outside does nothing — must find the × button to close
- ✗Gallery pop-up sometimes invisible on first load (FOUC)
After — all four resolved
- ✓Full-width image, no clipping — the whole product is visible
- ✓Thumbnail strip shows all images — tap any to jump directly
- ✓Click anywhere outside the image to close the overlay
- ✓No more flash — gallery and price visible from first paint
Reviews Section: From Missing to Rebuilt
483 lines of new CSS · Aggregate summary + card layout
On the current production site, the reviews section is completely absent. Shoppers scroll past the product description and hit the footer — no reviews tab, no rating breakdown, no review cards. The section doesn't render at all.
Reviews are one of the top conversion drivers in e-commerce
Shoppers who read reviews are significantly more likely to add to cart. Losing the reviews section entirely means losing the social proof that turns browsers into buyers. The refactor fixes the rendering bug and delivers a fully redesigned reviews experience.
483
lines of new CSS dedicated to the reviews redesign
The page ends with product description and goes straight to the footer. No reviews section renders at all — not even an empty placeholder.
Aggregate summary
Overall star rating, total count, and a breakdown bar chart showing how reviews are distributed across 1–5 stars.
Card-based layout
Each review sits in its own clean card — reviewer name, date, verified purchase badge, and the written review.
Write a Review CTA
Encouraged with a prominent button that links directly to the review form, making it easy for customers to contribute.
Simple Product Pages Cleaned Up
FOUC eliminated · duplicate blocks removed · image cutoff fixed
Child products — individual size or colour variants — have their own dedicated page. Before the refactor, these pages had duplicate Magento blocks that caused the layout to jump on load, a product image that was cut off, and a quantity stepper that appeared even when it shouldn't.
Before and after — same product, same page
Before
- ✗Duplicate core Magento blocks loaded — layout jumps as the page settles (FOUC)
- ✗Product image cut off vertically — top or bottom of the product hidden
- ✗Quantity stepper (− 1 +) visible even though it's unnecessary on a simple product
- ✗Dead canvas code path loaded in background — wasted processing
After
- ✓Duplicate blocks removed — page renders in final layout immediately, no jumps
- ✓Image displays correctly — full product visible within the gallery frame
- ✓Quantity stepper hidden on simple products where it has no purpose
- ✓Dead code removed — faster parsing, cleaner DOM
Indian MRP Compliance Labels
Legal requirement for all Indian e-commerce · added to all product types
Indian consumer protection law requires that e-commerce sites clearly display the Maximum Retail Price (MRP) for every product. The production site was showing a raw price range without the required “Price (MRP)” label — a compliance gap that needed to be fixed before the refactor went live.
Price shows as “₹899 -₹5145” — a range with no label. Indian law requires this to be displayed as “Price (MRP): ₹899 – ₹5,145” so shoppers understand it represents the government-set maximum retail price.
What changes
Covers all product types. The label is styled as a small prefix above the price, keeping it visible without disrupting the purchase flow.
Why this is non-negotiable
The Legal Metrology (Packaged Commodities) Rules and the Consumer Protection (E-Commerce) Rules require Indian e-commerce platforms to display the MRP on all products. Non-compliance can result in penalties. The label was added as part of the CSS refactor to ensure Art Lounge meets this requirement before the updated storefront goes live.
Four product page fixes, one confident buying experience
The product page is the most important page on any e-commerce site. Gallery clipping, missing reviews, layout jumps on simple products, and a compliance gap — all four were shipping-blockers. They're now resolved.
4
product page issues resolved before go-live