Product compare

Customers can pick products and compare them side by side in a table.

Turn it on

1. Add compare buttons to product cards

Go to Theme settings > Product cards and check Show compare. Each product card gets a compare button.

2. Add a button that opens the comparison

Choose one or both places:

• Header: open the Header section and, under Header action, check Show comparison. A compare icon appears next to search and account, on desktop and mobile.

• Floating sidebar: open the Floating sidebar section and check Show comparison.

Both buttons open the same compare window.

How it works for customers

• Click the compare button on a product card to add the product. Click it again to remove it.

• Click the compare icon in the header or floating sidebar to open the comparison table.

• Up to 8 products can be compared at once.

• The selection is saved in the customer's browser, so it's still there when they come back.

Choose what the table shows

In the theme editor, open the Product compare modal section. Check the rows you want to show:

• Available

• Type

• Price

• Vendor

• SKU

• Tags

• Variants (one row per product option, e.g. Size, Color)

Add your own rows with metafields

Use Custom metafields to compare details such as material, weight or b

Step 1: Create the metafield definitions

1. From your Shopify admin, go to Settings > Metafields and metaobjects > Products.

2. Click Add definition.

3. Enter a Name, for example Battery life.

4. Check the Namespace and key. It must be custom. followed by the name in lowercase, with spaces replaced by underscores. For example, custom.battery_life.

5. Choose a type. Single line text or Integer / Decimal work best.

6. Click Save, then fill in the value on each product.

Step 2: Add the rows

In Product compare modal > Custom metafields, type one name per line:

Material
Battery life
Weight

Each line becomes a row. The text you type is the row's label, and the the key:

You type	The theme reads
Material	custom.material
Battery life	custom.battery_life
Weight	custom.weight

Products without a value show — in that row.

Troubleshooting

Problem	Check
No compare button on product cards	Check Show compare in Theme settings > Product cards.
Customers can't open the comparison	Turn on Show comparison in the Header (under Header action) or in the Floating sidebar.
A custom row is empty for every product	The key must be custom.<name in lowercase, spaces → underscores>. "Battery life" must be custom.battery_life, not custom.batterylife.
A value looks odd, e.g. a code instead of text	Use a simple type such as text or number. File, reference and list types don't show well in the table.
A product can't be added	The list is full at 8 products. Remove one first.