Appearance

Comparison table ​

This guide describes setting up a Comparison table section. Use the section to display a table on a store page for comparing items, like product ingredients or features.

An example comparison table section in Theme editor.

The previous image shows a Comparison table section in Theme editor with the following settings:

  • On the left, the section menu has 3 rows (blocks).
  • The rows are displayed inside the How we compare table, with 4 columns, on the right.
  • An image is set up for the first column header.
  • The icons inside the table cells provide a checklist for comparing product features.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a comparison table section ​

To set up a comparison table section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select a template that contains a comparison table section. For example, select Homepage.

    Note

    The comparison table section can be added into any page, except Checkout and Giftcard pages. To add a comparison table section into the current page, select Add section > Comparison table. Refer to Shopify help: Add a section.

  2. From the side menu, select Comparison table.

    A comparison table section selected in Theme editor.

  3. Select a section setting described in the following table.

Section setting nameDescription
Display on cardSelect the checkbox Display on card to show/ hide a card behind the section. Refer to Shopify help: Cards.
TitleIn the Title box, enter text to display as a title inside the section.
Highlighted columnUse the Highlighted column setting to choose a table column to highlight.
Column 1 > HeadingIn the Heading box, enter text to display as a heading for the first table column.
Column 1 > ImageUse the Image menu options to set an image as the heading for the first table column. Refer to Add, replace or remove an image or video inside a section or block.
Column 1 > Image > Connect dynamic sourceTo display an image from a dynamic source, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
  • Column 2 > Heading
  • Column 2 > Image
Provides the second table column with the same Heading and Image options as the first column.
Column 3 > Enable columnSelect the Enable column 3 checkbox to show/ hide the third table column inside the section.
  • Column 3 > Heading
  • Column 3 > Image
Provides the third table column with the same Heading and Image options as the first column.
  • Column 4 > Enable column
  • Column 4 > Heading
  • Column 4 > Image
Provides the fourth table column with the same visibility, Heading, and Image options as the third column.
Layout > Max widthUse the Max width setting to set a maximum width for content. The options are None (default), Small, Medium, and Large.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the section to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors.
Use gradient for backgroundSelect the checkbox Use gradient for background to turn on/ off using a gradient as the section's background.
Highlighted column colorSelect the Highlighted column color radio buttons to set a color for the highlighted column inside the section's table. Select the highlighted column to use the section color scheme's Accent 1 or Accent 2 color.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove sectionSelect Remove section to delete the section from the current page.

Configure a block within a comparison table section ​

A default comparison table section contains three Row (Label) blocks. To configure a block inside the section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select a template that contains a comparison table section.

  2. From the side menu, expand the Comparison table section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    A Comparison table section selected in Theme editor.

    Note

    Inside a comparison table section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the Table: Comparison table blocks.

Table: Comparison table blocks ​

The following table describes the blocks inside the comparison table section, and their corresponding settings. The blocks indicated with an asterisk * are contained in a default comparison table section. To configure a block, refer to Configure a block within a comparison table section.

Block nameBlock descriptionBlock setting(s)
Row *Displays a table row inside the section.
  • In the Heading box, enter text to display as a title for the table's first row.

  • Use the Column 1 > Icon dropdown to add an icon into the table cell instead of text (row 1 column 1). The options are Check, Cross, Thumbs up, and Thumbs down.

  • Use the Column 1 > Text box to enter text to display inside the table cell (row 1 column 1). Format the text, and add a link, using the text editor pane.

  • To display text from a dynamic source, select the Insert dynamic source icon beside the Column 1 > Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Use the Column 2 > Icon and Text options to display an icon or text inside the table cell (row 1 column 2). Provides (row 1) Column 2 with the same options as Column 1.

  • Use the Column 3 > Icon and Text options to display an icon or text inside the table cell (row 1 column 3). Provides (row 1) Column 3 with the same options as Column 1.

  • Use the Column 4 > Icon and Text options to display an icon or text inside the table cell (row 1 column 4). Provides (row 1) Column 4 with the same options as Column 1.

  • Select Remove block to delete the block from the section.
Background patternDisplays a stylistic pattern as a background inside the section.Refer to Background pattern.
Background shapeDisplays a stylistic shape as a background inside the section.Refer to Background shape.
StickerOverlays the section with a stylized sticker.Refer to Stickers.
Shape dividerDisplays a stylized separator between the current section and the next/ previous section.Refer to Shape divider.