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.
- 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.
- 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.
- Click Save.
- Follow steps in the How to pick the product properties to compare section.
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.
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.
- Open the Theme Editor.
- In the OVERLAY GROUP click on the Product compare section.
- Either use an existing block or click on Add block to insert another block type.
All of the blocks have a Show line below setting which assists in breaking up the text in the product compare screen.
The Description block has the option to Truncate description with a minimum of 10 words.
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.
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.