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.
Note
The products being compared in this section are controlled by the merchant, not the customer. For customer-controlled product comparison, refer to the Product compare guide.
How to set up the product comparison grid #
Basic settings
- 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.
Tip
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.
Tip
Most blocks come with their own settings and inputs to enhance functionality or further customize the appearance. Click on the block to edit these settings.
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.
