How to set up the comparison table section

The comparison table compares products side by side with a structured, easy-to-read layout that highlights key features.

Section settings

Heading: Set a title for this section. This is optional.

Subheading: Set a subtitle for this section. This is optional.

Heading alignment: Choose the alignment for the heading. This setting also applies to the subheading.

Layout

Section width: Adjust whether this section should span the full width of the page (100%) or be contained within a limited layout. Applies on desktop. On mobile, the section spans the entire width of the screen.

Section inner max width (px): Set the maximum width of the content inside this section in pixels.

Section left/right gutter: Adjust the left and right spacing of the section relative to the viewport edge on narrow screens.

Vertical inner spacing: Adjust the spacing between the content and the top/bottom edges of this section in pixels.

Vertical outer spacing: Control the space between this section and the sections above and below it in pixels.

Table

Font scale: Adjust the overall text scaling in the table, affecting all text proportionally.

Border radius: Adjust the roundness of the table’s corners.

Footer text: Add a text footer below the table. This is optional.

Styles

Section heading color: Set the color for the section heading.

Section subheading/content color: Set the color for the section subheading and the footer text in this section.

Section background color: Set the background color for this section.

Table text color: Set the color of the text inside the table.

Table link color: Set the color of links inside the table.

Table border color: Set the color of the table’s borders.

Table header background color: Set the background color for the table header.

Table header text color: Set the text color for the table header.

Table primary background color: Set the background color for alternating rows (e.g., first, third, fifth, etc.).

Table secondary background color: Set the background color for alternating rows (e.g., second, fourth, sixth, etc.).

Table hover color: Set the background color that appears when hovering over a table row.

ROW

Cell text: Set the text content for the cell.

Cell link: Set the destination for the cell link (page, collection, product, external link, etc.).

Open link in new window: Choose whether the link should open in a new tab or the same tab.

These settings apply to Cell 1, Cell 2, Cell 3, Cell 4, and Cell 5 within the row.