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
- Open the Theme Editor.
- Click Add section and select Product comparison grid to add the section to your template.
- Under SECTION HEADER there are a number of settings which can be used to customize the content and appearance of the section, including the text alignment, and the View more label and View more link.
- The LAYOUT settings can be used to further customize the appearance and content of the section. Select up to a maximum of five Products to compare from your inventory.
- Enter appropriate Text to use for empty fields, and adjust the Product image aspect ratio, Image crop and Number of rows shown by default. The Text to use for empty fields will be useful when comparing metafields for example, where one product doesn't have a value for that metafield. The Text to use for empty fields will be shown instead.
- Under STYLE the section Color scheme can be changed to one of those set up in Theme Settings, and for added visual interest on larger screens, the Highlight row on hover setting can be enabled to enhance user experience
Refer to the next section for tips on how to add product properties to compare.
If this section has been added to the product page, metafields could be used to select the Complimentary products or Related products.
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.
How many products can I add?
Up to a maximum of five 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 five full columns, without horizontal scrolling. On smaller screens (tablet and mobile devices), where displaying five 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.