05 — Variant Tables
Complex Products, Easy to Compare
Products with multiple options — colours, sizes, finishes — are now easy to compare on any screen. No sideways scrolling, no squinting at tiny columns.
27+
product types supported
13
specific improvements delivered
200+
manual layout patches removed
0
horizontal scroll remaining
See exactly what changed — switch between views
Toggle between desktop layout, the old broken mobile experience, and the fixed mobile card layout using real product data from the site.
| Colour | SKU | Size | Price (MRP) | Price | |
|---|---|---|---|---|---|
Cerulean Blue Hue | 0308654 | 21 ML | ₹510 | ₹405 | |
Sap Green | 0312654 | 21 ML | ₹510 | ₹405 | |
Cadmium Red Hue | 0321654 | 21 ML | ₹510 | ₹405 | |
Cadmium Yellow Hue | 0308654 | 8 ML | ₹305 | ₹240 |
✓ Colour column gets 30% · SKU 15% · Size 15% · Price 15% · Add 10% — each sized for what it holds
This is where people decided whether to buy — or gave up
The variant table sits right before Add to Cart. On mobile, it used to spill off the screen with columns too narrow to read. That's the kind of experience that sends people to a competitor. Fixed.
0px
horizontal overflow on mobile after the redesign
One system, three layouts — automatic
Different products need different columns. A paint set needs more space for colour names. A pen nib set needs more space for the product description. A brush range needs equal space for colour, size, and type.
The system detects each product type and applies the right column layout automatically — no manual configuration needed when adding new products.
Colour-Based Products
Products with a range of colours — like paint sets or ink families. Colour gets the most space so shoppers can see their options clearly.
Example: Winsor & Newton Cotman Watercolours
Column widths on desktop:
Colour
30%
Size
20%
Qty
15%
Price
20%
Add
15%
Standard Product Tables
Products listed by SKU with a description column. Description gets the most space so names and variants are readable.
Example: Tachikawa Comic Pen Nibs
Column widths on desktop:
SKU/Image
15%
Description
35%
Qty
15%
Price
20%
Add
15%
Multi-Attribute Products
Complex products with multiple varying attributes — colour, size, and type. Each attribute gets equal space for easy side-by-side comparison.
Example: Princeton Catalyst Polytip Brushes
Column widths on desktop:
Colour
20%
Size
20%
Type
20%
Qty
15%
Price
25%
How the right layout appears automatically
Each product in Magento has an "attribute set" — a label that describes what kind of product it is. The styling system reads that label and applies the matching column layout, completely automatically.
Adding a new product? As long as it uses an existing attribute set (colour family, standard table, multi-attribute), the correct layout applies with no extra work.
The full 13-step technical breakdown of this refactor is covered on the Code Health page →