What is product compare?
The Product compare feature within Canopy empowers customers to quickly compare up to 15 products of their choosing, from a collection page or search page. This feature can assist customers in making more informed purchase decisions, which in turn can drive sales and increase conversion rates.
Note
How to turn on product compare
It is important to note that settings for Product compare exist in two places.
- Theme settings > Product compare controls whether this feature is enabled, and it's associated settings.
- The Overlay Group > Product compare section controls which properties of the product will be compared to one another within the compare popup.
How to set up product compare
Steps
- Open the Theme Editor, and go to Theme settings > Product compare.
- Use the checkbox to Enable product compare on collection pages and the search page.
- Move the Maximum products in compare slider to choose the number of products that customers can compare.
- Also in the Theme Editor, go to the Overlay group and click on the Product compare section.
- Either use an existing block or click on Add block to insert another block type. The blocks selected here (e.g. title, price, metafields) will be the product properties that are compared.
- All of the blocks have a Show line below setting which can be selected to break up the text in the product compare screen.
Note
Comparing metafields
Products may have custom data, such as height, weight, energy rating, warranty, etc, all of which is very useful for customers to compare. These firstly need to be set up as Metafields in Shopify admin area > Settings > Custom data > Metafields > Products, and then each product needs to be updated (e.g. to set the 'Warranty' of each product). For more on this process, read Shopify's Creating custom metafield definitions guide.
Once Metafields have been set up, the Metafields block can be added to the Product compare section. Ensure that the labels and metafield keys have been added in the correct format.
In the above, 'Warranty' is the label shown in the popup, and 'custom.warranty' is the metafield key as set in the Shopify admin area, as seen below.
Empty fields
When performing comparisons, there may be occasions where some of the products don't have any value for a particular property. When this happens, the text in the Text to use for empty fields will show.
When the Show empty metafield rows setting is unticked - if all products being compared do not have a value for a particular property, that row will be completely omitted from the comparison table.
FAQs
Can I hide empty rows?
Yes. By default, the Product compare section in the Overlay group will display all metafields added to the Metafields block within it. Should you have a varied inventory, or if not all metafields are relevant to all products, consider unchecking the Show empty metafields rows setting which is found in Theme Settings > Product compare. This will hide metafield rows that have no data associated with them for any of the products selected.
Can I change the size of the product image?
In the Product compare feature, product images are set to automatically scale in size to fill the entire width of a single column. By using the Maximum column width on large screens setting, which is located in Theme Settings > Product compare, it is possible to make the product image bigger or smaller, depending on your requirements.
Can I compare variants?
No, only products can be compared.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us