Comparison Table

A comparison grid — features down the left, one column per thing being compared, and a checkmark or an X in every square. One column can be given a yellow highlight so the eye goes to it. Below the table you can add a row of closing buttons and a row of supporting statistics.

It’s the most block-heavy section in the theme, but the structure is simple once you see it: columns are defined once at the top, and every row supplies one cell per column, in the same order.

Used on the homepage, the product template and the style guide page.

How the grid is assembled

Read this before you start building. Getting the mental model right saves a lot of confusion later.

There are three containers, and they’re already there when you add the section. You never create them, and you can’t delete or reorder them. Each one holds a different kind of child block:

Comparison Table (the section)
│
├── Comparison header row          ← always present, holds the columns
│      ├── Comparison column       ← "MigreLief"
│      └── Comparison column       ← "Typical Supplements"
│
├── Comparison row                 ← one per feature. You add these.
│      ├── Comparison cell         ← answers column 1
│      └── Comparison cell         ← answers column 2
│
├── Comparison row
│      ├── Comparison cell
│      └── Comparison cell
│
├── Comparison footer row          ← always present, holds the closing cells
│      ├── Comparison footer cell  ← under column 1
│      └── Comparison footer cell  ← under column 2
│
└── Comparison stats               ← always present, holds the stats
       ├── Comparison stat
       ├── Comparison stat
       └── Comparison stat

Cells pair with columns by position, and nothing else. The first cell in every row answers to the first column, the second cell to the second column, and so on. There’s no dropdown on a cell saying which column it belongs to — its place in the list is the link.

Build it in this order

1. Set up the columns first. Open Comparison header row and add one Comparison column for each thing you’re comparing. Do this before anything else — every row you build afterwards has to match this count.
2. Add your feature rows. Add a Comparison row, type the feature name into it, then add one Comparison cell inside it per column. Repeat for each feature.
3. Add the footer, if you want one. Open Comparison footer row and add one Comparison footer cell per column. Cells that should stay empty get their Show setting set to Nothing — you still add the cell, so the alignment holds.
4. Add the stats, if you want them. Open Comparison stats and add Comparison stat blocks. These sit below the table and aren’t columns — there can be any number of them.
5. Set the highlight last, once you know which column is which. See below.

Every row needs the same number of cells as there are columns

Nothing stops you saving a row with two cells when the table has three columns. The table won’t break — the short row just renders one square short, leaving a gap on the right.

If a column looks like it’s lost its answers partway down the table, count the cells in the rows above and below the gap. Adding a column later is the usual cause: every existing row needs a new cell adding to it.

The three containers are always in the block list

Header row, footer row and stats appear in the customizer whether you use them or not. That’s so you always know where to click “Add block”. The footer and the stats row render nothing at all on the live page until you put something in them — an empty footer isn’t an empty strip, it’s simply absent. That’s how the homepage table skips the CTA row while the product page uses one.

Settings

Setting	What it does
Highlight a column	On by default. Gives one column a yellow background and dims the others. Uncheck for a plain table where every column reads at equal weight.
Highlighted column	Which column gets the yellow background — 1 is the first column after the feature labels, 2 the next, and so on. Only appears when “Highlight a column” is on.
Icon	A small logo or mark shown above the heading. Optional.
Heading	The heading above the table. Default “What sets MigreLief apart”.
Top / bottom padding (desktop)	0–12 rem, default 7 rem each.
Top / bottom padding (mobile)	0–12 rem, default 3 rem each.
Section ID	Optional anchor, so you can link to this section with #your-id.

Counting columns for the highlight

The feature-label column on the far left doesn’t count. If your table is Feature | MigreLief | Typical Supplements, then MigreLief is 1, not 2.

Set it to a number higher than your column count and nothing gets highlighted — the table just renders with every column dimmed, which is the usual explanation for “the yellow band has disappeared”.

The highlight is a single number for the whole table, so the header, every cell beneath it and the footer cell can never disagree about which column is featured. Reorder your columns and you’ll need to update this number.

Blocks

Comparison header row

Always present. Holds the columns.

Setting	What it does
Corner label	Optional text for the empty cell above the feature labels. Usually left blank.

Comparison column

One per thing being compared. Lives inside the header row.

Setting	What it does
Show	What the header displays — Text, Image, or Product card (bottle shot, title and star rating). Default Text.
Product	The product for a Product card column. Supplies the title, image and rating.
Image	A wordmark for a branded column, or an override for a product’s own image. Only appears for Image and Product card columns.
Logo maximum width	In pixels, e.g. 222. Caps how wide a logo can get; its height stays the same. Leave empty for no limit. Only appears for Image columns.
Column name	The heading for a text column, the alt text for an image, and an optional title override for a product card.
Sub-label	Smaller text under the name, e.g. “Based on common market offerings”.

The Product picker stays visible for every column type

Shopify won’t let a product picker be hidden conditionally, so Product appears even on Text and Image columns. It’s ignored unless Show is set to Product card — picking a product on a text column does nothing.

For a Product card column, picking the product is usually the only step: the title, image and rating all come from the product. Fill in Column name or Image only when you want to override them.

Comparison row

One per feature. Add as many as you need.

Setting	What it does
Feature	The feature being compared, shown in the left-hand column. Default “Clinically studied ingredients”.

Comparison cell

One per column, inside a row.

Setting	What it does
Supported	On by default. Checked shows a checkmark, unchecked shows an X.
Label	Short text under the icon, e.g. “Every ingredient”. Leave blank to show only the icon.
Show icon	On by default. Uncheck to show only the label text.

There’s deliberately no per-cell colour or emphasis setting. Which column is highlighted follows the section setting, so a cell can never drift out of sync with the header above it.

Comparison footer row

Always present. Holds the closing cells. Renders nothing until you add cells.

Setting	What it does
Corner label	Optional text for the empty cell under the feature labels. Usually left blank.

Comparison footer cell

One per column, inside the footer row.

Setting	What it does
Show	Button (default), Text, or Nothing.
Button label	Default “Shop now”. Only appears when Show is Button.
Button link	Where the button goes. Only appears when Show is Button.
Open in new tab	Off by default. Only appears when Show is Button.
Button style	Primary, Secondary, Tertiary or Small. Default Primary. Only appears when Show is Button.
Text	A plain closing note under the column. Only appears when Show is Text.

Use Nothing rather than deleting a cell when a column shouldn’t have a button. Deleting it shifts everything after it one column to the left.

A button with no label renders nothing

Set Show to Button and clear the label and the cell comes out empty — with no warning. If a footer button has vanished, check its label field first.

Comparison stats

Always present. Holds the stat row below the table. Renders nothing until you add stats.

Setting	What it does
Stat width	In pixels, default 248. The column width when the stats sit side by side on desktop, and the maximum width when they stack on mobile.

Comparison stat

One figure. There can be any number — these are not tied to the columns.

Setting	What it does
Value	The large figure, e.g. “25+ years”.
Label	The smaller text under it, e.g. “in neurology practices”.

On mobile the stats stack full-width with a rule under each; on desktop they sit in a centred row with vertical rules between them.

Wide tables

The table scrolls sideways when it’s too wide for the screen, and it only shows a scrollbar when it actually overflows — a two-column table on a phone won’t show one, a five-column table will. You don’t configure this.

Each column has a minimum width, so adding columns makes the table wider rather than squeezing the existing ones thinner. Past about four columns, expect horizontal scrolling on phones.

Tips

• Decide your columns before you write a single row. Adding a column later means going back into every row and adding a cell. Removing one means the opposite. It’s the one change that’s genuinely tedious.
• Two or three columns reads best. Four is workable; five starts to scroll on most phones.
• Use “Nothing”, not deletion, for empty footer cells. Position is everything in this section, and a deleted cell shifts the ones after it.
• Blank labels are fine, blank features aren’t. A cell with no label shows just its icon, which is a legitimate look. A row with no Feature text leaves an unlabelled row, which is confusing and bad for screen readers.
• Recheck “Highlighted column” after reordering columns. It’s a number, not a reference — it won’t follow a column you drag.
• Keep sub-labels honest and short. “Based on common market offerings” does a lot of work: it makes clear that the comparison column is a generalisation rather than a named competitor. Comparison claims about competitors carry legal risk — keep them general.
• The stats row is independent. Three stats under a two-column table is fine. They aren’t cells and don’t need to line up with anything.