Skip to main content

​
Comparison table

The comparison table is the section that does the arguing for you. It lays your product alongside named competitors, row by row, with your column visually elevated.
Comparison table section

Comparison table with the highlighted column

​
Settings

There are exactly three columns — yours plus two competitors. That is a deliberate constraint: a wider table stops being readable on a phone, and two competitors is enough to make the point. A fourth column is the single most common request, and it is the one we most often talk merchants out of.

​
The Comparison Row block

One row per spec or feature. Add, remove and reorder them freely.
Be accurate. A comparison table with a false claim is a legal liability and, in most jurisdictions, a deceptive practice. Only compare on specs you have verified, and only compare on specs where you genuinely win.

​
The highlighted column

Your column is always elevated:
  • A brighter surface than the competitor columns
  • A primary-coloured border and header
  • A subtle glow behind the column
  • The highlighted rows get a tinted background
The competitors are intentionally muted — desaturated text, flat surfaces, no logo glow. The visual hierarchy does half the arguing before anyone reads a word.

​
Mobile behaviour

Below 768px the table becomes a stacked card layout rather than a horizontally scrolling table. Your column’s values are shown first, under the feature label, with the competitor values below.
This is deliberate. Horizontally scrolling tables are a poor mobile experience — shoppers do not discover that there is more to the right. Stacking puts your values first, which is what the reader came for.

​
Best practice

Enough to be persuasive, few enough to be read. A twenty-row table is a spec sheet — link to that instead.
A column labelled “Other brands” is weaker than naming them, and much safer. Either approach works, but “Brand A” in a font size smaller than the other columns looks like you are hiding something.
Not every row matters equally. Mark three or four rows as highlighted — the ones your buyer actually decides on.
Competitor logos are trademarked. If you are unsure, use text-only headers.

Product reviews

Social proof alongside the spec argument.

Bento features

Feature parity without the comparison.