Comparison table

Comparison table sets your product beside others, feature by feature, such as "Ours", "Drugstore" and "Luxury". Each row shows a check, a cross or a short text in each column. One column can be highlighted.

How to set it up

Step 1: Add the section

1. In the theme editor, open the page and click Add section.
2. Choose Comparison table. Drag it to where you want it on the page.

Step 2: Name the columns

1. Under Columns, write the name of Column 1, Column 2 and, for three columns, Column 3. Add a logo to any column.
2. Choose the Highlighted column (1), usually your own.
3. Write the Feature column name, Check text and Cross text. Screen readers read them aloud.

Step 3: Add the rows

1. Click Add block > Row. Write the Feature and an optional Detail.
2. In each column, write yes for a check, no for a cross, or any short text, such as 30 ml.

Step 4: Add a heading and button

1. Write the heading under Heading, and a button Label and Link under Button.

Step 5: Review the settings

1. See the settings reference below for every option.

Settings reference

Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.

How it works

• Leave Column 3 empty for a two-column table.
• On phones the table keeps its columns and scrolls sideways when it doesn't fit.

Related

• FAQ
• Icons row
• Multi-column