# 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 (opens new window)

# 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 (opens new window)

  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 name Description
Display on card Select the checkbox Display on card to show/ hide a card behind the section. Refer to Shopify help: Cards (opens new window).
Heading In the Heading box, enter text to display as a title inside the section.
Highlighted column Use the Highlighted column dropdown to choose a table column to highlight.
Column 1 > Heading In the Heading box, enter text to display as a heading for the first table column.
Column 1 > Image Use the following Image menu options to set an image as the heading for the first table column.
  • To add an image, choose Select image, and then upload an image or select an image file from your store’s file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
  • Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools. The text is saved immediately. Refer to Shopify help: Adding alt text to media (opens new window).
  • 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 column Select the Enable column 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.
Color > Color scheme Use the Color scheme dropdown to set the color scheme for the section to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors.
Use gradient for background Select the checkbox Use gradient for background to turn on/ off using a gradient as the section’s background.
Theme settings Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Remove section Select 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 (opens new window)

  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 name Block description Block 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.

  • 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.
Background pattern Displays a stylistic pattern as a background inside the section. Refer to Background pattern.
Background shape Displays a stylistic shape as a background inside the section. Refer to Background shape.
Sticker Overlays the section with a stylized sticker. Refer to Stickers.
Shape divider Displays a stylized separator between the current section and the next/ previous section. Refer to Shape divider.