Compare Matrix — feature table with unlimited rows
Compare two or three products across as many rows as you need, with one column lifted onto the table as the pick you want shoppers to make.
Shoppers deciding between your good, better and best model want one screen that answers every question at once. Compare Matrix is that screen.
Add as many comparison rows as you need — each one is a block, so you can reorder and remove them like any other content. Set up two or three product columns, each with its own heading and an optional logo or product shot.
One column is the pick. The highlighted column lifts off the table as a solid panel that overhangs it top and bottom, carries a badge, and holds the section's only button — so the column you want chosen is the one shoppers can act on. Or turn the highlight off entirely for a neutral spec table.
Every cell is one of four things: a yes, a no, a not-offered dash, or free text like "3 years". The icons ship as two matched sets, outline and filled, chosen once for the whole section — so a row can never come out half-outline and half-solid. You can upload your own artwork for any of the three states.
Colours are yours: the table fill defaults to the section background so the borders alone draw the table, and you can recolour the borders, the highlight, the badge and each icon state independently. Label column width, border thickness, corner radius, row height, and separate heading sizes and padding for mobile are all adjustable.
Three product columns plus labels fit on a phone with no sideways scrolling. On narrow screens the button steps out of the highlighted column and becomes a full-width bar under the table.
No JavaScript, and nothing shifts as the page loads.