Comparison table
A table that compares up to four columns – your product against others, or your own plans and bundles – feature by feature, with a highlighted column you recommend.
- In the editor
- Comparison table
- Where it goes
- Any page template, with Add section
- In the presets
- Not on any page by default – add it where you need it
- Settings
- 27
- Blocks
- Row
- App blocks
- Yes
Set it up
- Name the columns: First column heading (for example Feature), then Column 1 to Column 4. Columns with an empty name are hidden.
- Add a Row block for each feature: the Feature, an optional Note under it, and a value for each column.
- Choose a Highlighted column and an optional Highlight badge, such as Best value.
Values
Write anything in a cell: 2 years, Oak, $49. With Show icons for yes and no, the words Yes and No become a check mark and a cross, which makes a feature table easy to scan.
Options
- Width: Narrow for a focused table, or Page width.
- Row style: Lines or Striped.
- Keep the first column visible on mobile: on phones the table scrolls sideways while the feature names stay in place.
- A Button under the table leads to the product or collection.
For comparisons shoppers make themselves, use the Compare feature on product cards.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Comparison table27 settings
| Setting | Options | Default |
|---|---|---|
| Heading | Rich text (one line) | Sample text |
| Text | Rich text | – |
| Heading size | Large · Medium · Small | Medium |
| Heading alignment | Left · Center | Center |
| Columns | ||
| Columns with an empty name are hidden. In rows, Yes and No become icons when icons are on. | ||
| First column heading | Text | – |
| Column 1 | Text | Sample text |
| Column 2 | Text | Sample text |
| Column 3 | Text | Sample text |
| Column 4 | Text | – |
| Highlighted column | None · Column 1 · Column 2 · Column 3 · Column 4 | Column 2 |
| Highlight badge | Text | Sample text |
| Table | ||
| Width | Narrow · Page width | Narrow |
| Row style | Lines · Striped | Lines |
| Show icons for yes and no | Checkbox | On |
| Keep the first column visible on mobile | Checkbox | On |
| Button | ||
| Button label | Text | – |
| Button link | Link | – |
| Button style | Primary · Secondary · Highlight | Primary |
| Color scheme | Color scheme | Scheme 1 |
| Section spacing | ||
| Top padding | 0–160px | 80px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 56px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Block settings
Block: Row6 settings
| Setting | Options | Default |
|---|---|---|
| Feature | Text | Sample text |
| NoteOptional. Small text under the feature name. | Text | – |
| Column 1 value | Text | Sample text |
| Column 2 value | Text | Sample text |
| Column 3 value | Text | Sample text |
| Column 4 value | Text | – |