Product comparison grid

What is the product comparison grid section?

The Product comparison grid section is an excellent way of visually presenting to your customers a high-level overview of key product features side-by-side in a compact and easy to use section.

It can be added to any page to help your customers make more informed purchase decisions, and in turn drive sales and increase conversion rates.

How to set up the product comparison grid

How to add properties to compare

Each block within the section will represent a property of the product that can be compared, e.g. Price, Vendor, Description. Therefore, each instance of a block creates a new row in the Product comparison grid.

Choose from any combination of Product summary, Vendor, Title, Type, Price, All variant options (to show a complete list of available variants of a product), Variant option (to display a single variant option of your choice), Description, Rating, Text and Metafield blocks (more about this below).

Each block can be added to the section only once, with the exception of the Variant option, Text and Metafield blocks, which can be added as many times as required.

How to compare metafields

If your products already have Metafields set up, these can be compared in the Product comparison grid. 

To do this, add a Metafield block, and enter the Metafield label, as you'd like it to be displayed to your customers.

The Metafield namespace and key setting should NOT reference a dynamic source - but should be a text reference to the metafield namespace and key as they appear in Settings > Custom data within the Shopify admin area.

FAQs

How many products can I add?

Up to a maximum of four products can be added to each Product comparison grid section.

How can I set the width of columns?

For optimum user experience, column widths are set to scale dynamically according to the device size. Larger screens will display up to a maximum of four full columns, without horizontal scrolling. On smaller screens (tablet and mobile devices), where displaying four columns at once could lead to readability issues, column widths scale to best fit each particular device. A minimum of two full columns will display on mobile, with the remaining columns accessed via the horizontal scroll bar which displays when required.

Why aren’t the color swatches showing?

A common reason for color swatches not displaying correctly is that they have not yet been set up yet. Refer to the Swatches guide for more on how to set this up.

If you have previously set up color swatches, and they are displaying correctly in product cards and elsewhere on your online store, then it’s likely there is an issue with how color swatches have been set up in the Product comparison grid section.

Check that a Variant option block with the correct Option name has been added to the Product comparison grid - please note that the Option name entered here must match exactly the Option name added under Variants in the admin area.

Can I make the grid more compact?

If you have added a Description block, consider using the Truncate description setting to control the number of Words to show with the range slider provided.

Also think about limiting the total number of theme blocks added to the section. Whilst any number of blocks can be used, it should be remembered that the Product comparison grid section is primarily intended to provide a high-level overview of key product features, enabling customers to make more informed purchase decisions as quickly as possible. For more in-depth product information, direct your customers to the relevant Product pages, by enabling the Show product info button in the Product summary block.

Why isn't the metafield comparison working?

The Metafield namespace and key setting should NOT reference a dynamic source - but should be a text reference to the metafield in the Shopify admin area.

Once set up correctly, the metafield should look like this:

It should NOT look like this:

If this is correctly set up and the metafield is still not working, double check the namespace and key are correct, and ensure the products being compared do actually have a value for those metafields.