> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/features/comparison-table.md).

# Comparison table

Puts products, plans, or tiers side by side for comparison — for example "Basic vs Pro vs Premium". Each column carries an image, a heading, a call-to-action button, and a value for each row. On mobile the columns scroll sideways and the row labels can stay pinned.

![Comparison table overview](/files/269Ja437yeDoJ7bOXWdC)

## How it works

The table is built from three block types:

* **Comparison table** — the container. Controls the overall layout, row style, sizing, and an optional boxed background.
* **Feature** — holds the **row labels** (the list of things being compared, e.g. "Free shipping," "Warranty," "Weight"). It's added automatically and defines the rows that every column lines up against. Each label can also have a tooltip.
* **Column** — one per option. Holds the option's image, heading, button, and a value for each feature row.

Column values line up with the Feature rows in order. A value can show a check, a cross, custom text, or stay empty.

## How to turn it on

Comparison table is a **block**, not a section. Add a [Custom section](/helix/global-sections/layout/custom-section.md) to your page, then add the **Comparison table** block inside it — or start from the Comparison table preset.

Fill in the **Feature** block with your row labels, then add one **Column** block per option and set its value for each row. See [Comparison table](/helix/theme-blocks/layout/comparison-table.md) for every setting.

{% hint style="info" %}
To highlight a recommended option, give that Column a shadow and its own color scheme so it stands out from the others.
{% endhint %}