Comparison Matrix

Usage

Comparison Matrix lets you compare up to six products against one shared list of features. On desktop, the block renders as a table: feature labels in the left column, one product per column, and check or X icons in each cell. On mobile, each product becomes its own card that lists only the features checked for that product.

The block ships with sample HVAC tier content when first inserted. Use Add Product and Add Feature in the editor toolbar to build your matrix, then check the boxes in each row to mark which features apply to each product.

Building the matrix

• Add Product — adds a column (up to six). Each product header supports image, name, optional price and CTA, and per-column styling.
• Add Feature — adds a row to the shared feature list. Edit labels inline in the left column.
• Checkboxes — toggle whether a feature applies to each product.
• Reorder — arrow controls on each product header and feature row move columns left/right or rows up/down.
• Remove — trash icon on products and features.

Product column settings

These controls appear in each product header on the block canvas (not the sidebar):

• Choose Image — product photo or logo; height is controlled globally from the sidebar.
• Product name — inline headline for the column.
• Accent column — primary-color outline around the whole column to highlight a recommended tier.
• Brand color — fills the product header and footer and tints feature rows with a subtle wash.
• Light header text — appears when a brand color is set; enables reverse print for readable light text on the product name, price, and CTA.
• Price and CTA — shown when enabled in the sidebar; price value and unit are inline, CTA text plus URL field.

Sidebar settings

• Show Price — toggles price and unit in each product footer.
• Show CTA — toggles the call-to-action button (on by default).
• Product Image Height — one shared height for all product images so columns stay aligned.
• Striped Row Color — alternating row background for the label column and product cells.
• Feature Style — typography preset for feature labels (Label is the default uppercase look).
• Icon Style — Circle (badge) or Simple (flat check and X).
• Color Icons — use site success and failure colors for check and X icons.

Desktop vs mobile

On desktop, feature names live in the left column; product columns show icons only. On mobile, the label column is hidden and each product card shows checked features with both icon and label — unchecked features are omitted to keep cards scannable.

Brand color tinting applies on desktop rows; mobile cards use a cleaner white row treatment.

Comparison Table

Use Comparison Table when each tier is mostly standalone copy in its own card. Use Comparison Matrix when multiple products share the same feature checklist and you want a true side-by-side grid on desktop.

Tips

• Keep feature labels short — desktop columns show icons only, so labels must read clearly in the left column.
• Highlight your recommended tier with Accent column and optionally a Brand color.
• Enable Show Price when comparing installed or subscription tiers; leave it off for feature-only comparisons.
• Turn on Color Icons when you want checked/unchecked states to read instantly at a glance.