Comparison table block

Add the block

Before adding the block, choose the products to compare in the app.

1. Open the theme editor on your product template.
2. Click Add section › Apps › Comparison table (comparison tables are wide, so a full-width section usually works best). You can also add it as a block inside an existing section.
3. Click Save.

The table compares the product of the page with the products selected in its Compare with card in the app. It uses the attributes of the main product’s table; only attributes marked as Comparable are displayed.

Settings

Limit the number of products

When many products are compared, the table becomes hard to read on smaller screens. The Visible products setting limits how many products are shown at once — 3 by default, and we recommend 2 or 3. Hidden products can be selected by customers from a dropdown at the top of each column.

To display every product in a horizontally scrollable table instead, increase the value.

Fallback to related products

Choosing products manually can be time-consuming for large catalogs. Turn on Fallback to related products to use the products recommended by Shopify for the product page when you haven’t selected any.

Products you select manually always take priority. You can fine-tune recommendations in Shopify’s Search & Discovery app.

Highlight differences

When products have many attributes but only a few differences, a switch helps customers focus. Turn on Enable differences switch, then choose the Differences switch mode:

• Highlight differences (default): rows with different values get a colored background.
• Hide similarities: rows where all products have the same value are hidden.

When customers turn the switch on:

The highlight color (pale blue by default) can be changed in the table editor.

Variant selector

When specifications depend on the variant — per-variant attributes, variant metafields, prices — it helps to let customers choose which variant they compare. Turn on Show variant selector: a dropdown appears in each column, and values update when a variant is selected.

With the selector enabled, the column of the main product also follows the variant selected on the product page.

Hide the selector for some products

Some products have variants with identical specifications, and a selector would only add noise. You can hide it for specific products, even when the setting is on:

1. Open the product in your Shopify admin.
2. In the Metafields card, click View all.
3. Find Hide comparison table variant selector and set it to True.

Exclude variants from the selector

You may want to keep the selector but remove some variants from it — for example a “Custom” variant whose specifications depend on the customer’s choices.

1. Open the product in your Shopify admin and click the variant.

2. In the variant Metafields card, click View all.
3. Find Exclude from comparison variant selector and set it to True.

Show in a modal

Comparison tables take space. On long product pages, turn on Show in modal: the table is replaced by a button (“Compare products” by default, customizable with Modal button text) that opens the comparison in a modal.