Displaying comparison tables

After you have created tables and assigned them to products, you will need to embed the comparison table on your Online Store.

You can embed comparison tables on every page, but typically, comparison tables are most useful on the product page, or on a dedicated landing page that would compare a list of products. To do that, open the theme editor, and select a product template:

In the section where you want to add the comparison table, click on "Add block" and select "Product comparison table" in the list.

The comparison table will automatically be configured to show the attributes of the main product page and compare the main products with the "Compared products" specified in the app backend.

Because comparison table can become large, it might be interesting to add the block as a full-width section. To do that, open the page where you would like to embed the section, click on "Add section" and select "Product comparison table" section.

Limit the number of products

If you compare a large number of products together, the table can become hard to read as it will require your customers to horizontally scroll. Instead, the app gives you the ability to limit the number of products visible at the same time. Products not being shown can be selected by your customers using a dropdown, as in the example below:

To enable this feature, click on the block "Comparison table" you have added in your page:

And adapt the value of the Maximum visible products setting (we recommend setting it to 2 or 3):

Fallback to related products

Shopify have its own recommendations engine to show related products. By default, the app requires you to manually configure the products you want to compare against.

However, on large product database, manually choosing products can be time-consuming, and you might want to re-use the related products recommendations provided by Shopify to show them on your comparison tables.

To enable this feature, click on the block "Comparison table" you have added in your page:

And enable the Fallback to related products setting.

Highlight differences

If your products have a lot of attributes but few differences, it can become hard for your customers to figure out the actual differences between your products.

To help them, you can turn on the "Show differences" button on comparison table. Once enabled, your customers will be able to highlight the attributes that actually have a difference.

To enable or disable this feature, open the theme editor, navigate to the comparison table app block and turn on the Enable show differences setting:

Once your customers turn it on, differences are highlighted: