🧰 Comparison table

Show feature, plan, or product comparisons in a clear side-by-side grid. Ideal for pricing tables, plan comparisons, and detailed feature breakdowns with visual indicators like checkmarks, X marks, and custom text.

Add the section to a template

Click Edit theme to open the theme editor for the selected theme.

Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.

Scroll down to the bottom of your default sections list and select 🧰 Comparison table.

Customize section settings

Open Comparison table to open general settings for the section.

Section heading

Section heading sets the main heading displayed at the top of the comparison table.

Heading size and Mobile heading size adjusts the heading font size for desktop and mobile, respectively. 

The Intro text adds a short description displayed below the section heading.

Highlight column

Highlights a selected comparison table column to draw attention to a featured plan.

Badge label sets the text displayed in the badge above the highlighted column.

Background color and Text color control the background color and the text color of the highlighted column and its badge.

Select colors

Choose colors for the section's Text color and Background color.

Additionally, Table header color settings are also available: 

Table header background color sets the background color of the comparison table's header row. 

Table header text color controls the text color used in the table header. 

You can also display borders along the left and right edges of the comparison table on desktop devices only using the Show left and right border (desktop only) toggle. 

Border color adjusts the color of the table borders and dividers. 

Adjust spacing

Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.

Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.

Customize the content block

Click the preloaded content block Column to customize its content. You can add up to 4 columns per section. 

Column block settings

Column block headings

Title defines the heading displayed at the top of the column. In the example image above, this would be the text "Starter".

Heading size and Mobile heading size adjusts the title font size for desktop and mobile devices, respectively. 

Subtitle displays a secondary line of text beneath the column title. In the image example above, this would be the text "Free". 

Enable Highlight this column to apply highlight styling and an optional badge, making the column stand out from the others. See Highlight column for details. 

Column block buttons

Button label sets the text displayed on the button.

Button link determines the destination the button will open when clicked.

Button style lets you choose between a Fill or Outline button style. 

Background color controls the button background color. For the Outline style, this setting controls the border color instead.

Text color sets the color of the button label.

Row block settings

Start adding Row blocks to fill the details under each column. 

Row type determines whether the block is displayed as a standard comparison row or as a section header that groups related rows together.

Each Row block is displayed horizontally and consists of a Row label followed by three content columns.

Row label sets the label displayed in the first column of the row and Learn more link adds a link to the row label for directing customers to additional information. In the example above, the word "Users" can be made clickable by adding a link in this field. 

Cell type determines how the cell content is displayed. This includes the following:

• Checkmark

• X

• Dash

• Text

Cell text specifies the content displayed within the selected table cell if the Cell type Text is chosen. 

Changelog

June 29, 2026

Added: 

• Add up to 4 columns and unlimited rows
• Cell types: check, cross, dash, or custom text
• Highlight a column with a badge
• Add a button and link to each column
• Adjust colours, cell alignment, borders, padding, and margins