Displaying on your store

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.

Theme requirement

You need an Online Store 2.0 theme to be able to use Specifications & Compare app. If your theme is not OS2 compatible, reach your theme developer to ask them how to upgrade to a newer version.

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):

Limitation

This feature only works on comparison table added through the comparison table block. For dynamic comparison (where buyers select the products themselves on collection pages), this feature is not available.

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:

Color

By default, rows with differences are highlighted with a pale blue background, but you can change this color in the table editor, along other customization settings. Learn more.

Previous
Specification tables