Product compare

What is product compare?

The Product compare feature within Enterprise empowers your customers to quickly compare up to 15 products of their choosing, from a collection page or search page. By enabling this feature, you can assist them in making more informed purchase decisions, which in turn can drive your sales and increase conversion rates.

How to turn on product compare

It's important to note that settings for Product compare exist in two places.

1. Theme settings > Product compare controls whether this feature is enabled, and it's associated settings.
2. The Overlay group > Product compare section controls which properties of the product will be compared to one another within the compare popup.

Compare toggle settings

The Compare toggle visibility and functionality can be set using the options in the dropdown. This controls the appearance of the Compare toggle that appears in the collection/search page

When this toggle is switched to 'on' - a Compare checkbox appears in the top left hand corner of each product card on the collection/search page.

The options for this are:

• None: No toggle will be shown. Compare will always be turned on, and the customer will have no means to turn it off.
• Show - switched on by default. The toggle will be shown, and compare feature will be enabled as standard.
• Show - switched off by default. The toggle will be shown, but customers will need to turn it on to use compare.

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.

How to pick the product properties to compare

Once product compare has been enabled, it's important to choose the product properties (e.g. title, price, metafields) which will be compared.

All of the blocks have a Show line below setting which assists in breaking up the text in the product compare screen.

Comparing metafields

Your 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.

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. 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, 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.

I've changed the 'Compare toggle' setting but the change isn't showing. Why?

This is only the 'default' state of the Compare toggle. If you or a customer has previously turned compare on or off on the store front - their toggle preference will still apply. The above setting will only apply to customers who haven't clicked this toggle before.

See Compare toggle settings for more.

Why is there a 'Please try again later' message?

If the Product compare section is hidden in the Theme Editor, then the compare function will not work.  Customers will see an on screen message "Unable to compare products. Please try again later." To resolve this problem go into the Theme editor and ensure that the Product compare section is active.