Section: Comparison table

Everything you'll need to know on how to set up your Comparison table section.

The Comparison table section shows a side-by-side feature comparison of up to 3 brands or competitors. The left side holds a heading, eyebrow, subtitle and a decorative product image; the right side renders a table with one features column plus up to three themed brand columns. Each cell supports a check, a cross, a dash, or custom text. Perfect for landing pages, product education, and conversion-focused storytelling.

To activate this section you first have to add it to your page. Just a few small steps.

1) Click on Add section in your left sidebar.

2) Search for Comparison table, then click on it.

3) Done — your Comparison table is added with 5 demo feature rows pre-filled. Edit them, add more, or remove what you don't need.

Select the color scheme that paints the section background, the headline, the features column and the decorative image area. The brand columns on the right use their own colors (see Columns below).

Small uppercase label rendered above the title in the brand accent color. Use it for a category or pitch — for example: Why us, The difference, Compare. Leave empty to hide.

The main headline rendered to the left of the table. This setting is inline rich text — wrap words in italics from the editor toolbar to highlight them in the accent color (italic + brand color). Default: Why our brand is the perfect choice.

Short supporting line below the title. One or two sentences works best. Leave empty to hide.

How the heading block aligns on desktop: Left, Center, or Right. Default: Center. On screens narrower than 1100 px the heading stacks above the table and forces center alignment regardless of this setting.

Optional product or hero shot displayed below the heading on the left side. The image is rendered in a 1:1 square container (max 320 px) with object-fit: contain — your image is never cropped. Recommended: a transparent PNG with the product centered. Square images work best.

If enabled, a neutral product silhouette renders when no decorative image is uploaded. Useful while setting up the section. Default: off.

Header label rendered above the features column (the leftmost column of the table). Default: Features. Leave empty to hide the entire header row — when both this and every brand column label/logo are empty, the cells start flush at the top.

The section supports up to 3 brand columns, each with the same set of controls. By default Column 1 is your brand (highlighted), Column 2 and 3 are competitors. Disable any column you don't need.

Toggles whether the column renders. Disable to compare 2 instead of 3 brands. The table auto-adjusts width and gaps.

Text rendered in the column header when no logo is uploaded. Defaults: Our brand, Competitor A, Competitor B. Use short names (1–2 words) — long labels wrap and break the header height.

Optional brand logo. When provided, the logo is rendered instead of the text label. Max height: 36 px (desktop) / 30 px (mobile). Use a transparent PNG or SVG that reads on the column's background color.

Background color of the column. Defaults are tuned for a contrast hierarchy: your brand column = deep accent color, competitors = neutral dark / light gray. Pick a color that fits your palette — the column text color and indicators auto-adapt.

Color of all text and icons inside the column. Ensure contrast against the column background ≥ 4.5:1 (WCAG AA) — Theme Store requirement. Use white on dark backgrounds, near-black on light.

Tick to emphasize a column visually. The highlighted column scales up by 4%, gets a stronger drop shadow, and renders check icons inside a decorative starburst shape. By default Column 1 is highlighted. You can highlight more than one, but emphasis is most effective with a single winner.

Width of the leftmost (features) column in pixels (140–280, default 220). Increase for long feature names; decrease to give brand columns more room.

Width of each brand column in pixels (90–220, default 140). Smaller widths fit 3 columns in tight layouts; larger widths give logos and checkmarks more breathing room.

Spacing between columns in pixels (0–24, default 8). On mobile this is automatically reduced.

Border radius of each column card in pixels (0–32, default 14). Use 0 for a flat editorial look, 14–22 for a modern app-card feel.

Maximum width of the section content in pixels (900–1600, default 1250). The section stays centered inside this width; the rest of the row is background. Set higher than your global page width if you want this section to break out wider.

Padding above the section content in pixels (0–160, default 80). Auto-scaled down by ~1.6× on very small screens.

Padding below the section content in pixels (0–160, default 80).

Each row in the comparison table is a Feature row block. The default preset ships 5 rows; add or remove with Add block. Each row has the same shape: a feature name and one cell value per brand column.

Label rendered in the features column for this row. Keep it short (2–4 words) — long names wrap to two lines and may misalign across columns. Examples: Immediate results, Soft material, Hypoallergenic.

Each brand column has its own Cell value dropdown with 4 options:

• Check — green checkmark indicator (starburst version in the highlighted column).
• Cross — muted X indicator. Signals "not included".
• Dash — short horizontal line. Signals "not applicable".
• Custom text — renders the value from the Custom text setting below. Use for differentiating numbers (e.g. 30 days vs 14 days) or short qualifiers (e.g. Yes, with limits).

Text rendered in the cell when the Cell value is set to Custom text. Ignored otherwise. Keep it short (1–3 words) — cell height is fixed and long text will be clipped.

By default Column 1 has Highlight column enabled — it scales up by 4%, gets a stronger drop shadow, and renders check icons inside a decorative starburst. This is intentional emphasis: it tells visitors which option you recommend. Disable the highlight from the column settings if you want all columns to look equal.

On screens narrower than 768 px the features column is pinned to the left at ~38% of the viewport and the brand columns become a horizontal scroll-snap carousel. Two columns fit at a time with a peek of the third, plus a fade gradient on the right edge that hints there's more to scroll. The featured column's scale-up is removed on mobile (it would clip outside the scroller) and replaced with a stronger shadow.

No — the table is capped at 3 brand columns by design. Most comparisons that need more than 3 should split into multiple comparison tables or move to a dedicated comparison page. 3 columns is the sweet spot for legibility on mobile.

The header row has a fixed height (92 px desktop / 78 px mobile / 68 px on screens under 480 px). Logos render with object-fit: contain centered inside that height. If your logo has heavy whitespace baked in, it may appear smaller than expected. Crop the logo tightly before uploading.

Clear the Features column header setting AND every enabled column's Column label AND Column logo. With all of those empty the section detects "no headers" and removes the row entirely, so cells start flush at the top.

The exact text you put in the row's Custom text field for that column. Useful for time periods (30 days), tiers (Premium only), numbers (3 sizes) or partial qualifiers (With fees). If you select Custom text but leave the field empty, the cell renders an em-dash (—).

Yes — the heading and each column fade and lift in sequence as the section enters the viewport (using IntersectionObserver, 15% threshold). Each column has a staggered transition delay so they cascade. Visitors with prefers-reduced-motion enabled see the section in its final state with no motion, per accessibility best practice.