> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/products/compare.md).

# Product compare

Let shoppers tick up to four products and compare them side by side, with your own specification rows.

Shoppers tick **Compare** on product cards or **Add to compare** on product pages. A small tray at the bottom of the screen collects up to four products, and a compare page shows them side by side.

![Comparing products](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e284f84adcc88eb180465b6ab2dd08651a5f4d21%2Fcompare.gif?alt=media)

{% file src="/files/FFZzvk2kMYuKHWGgIABP" %}
Watch the video (MP4)
{% endfile %}

## Set it up

1. **Create the compare page.** In Shopify admin go to **Online Store › Pages › Add page**. Title it "Compare", leave the content empty, and under **Theme template** choose **compare**. Save.
2. **Turn compare on.** In the theme editor, open **Theme settings › Product compare**, make sure **Enable product compare** is on, and choose your new page in **Compare page**.
3. **Add the checkboxes.** Cards in Stratum's product grids already contain a **Compare** block. On the product page, add the **Compare** block under **Product information** if it isn't there.
4. **Optional:** add specification rows (below) and choose a **Collection for the browse button** on the compare page.

{% hint style="warning" %}
Without a **Compare page**, the tray has no **Compare** button, so shoppers can tick products but can't open the comparison.
{% endhint %}

## Theme settings › Product compare

| Setting                                   | Default                     | What it does                                                                                                                    |
| ----------------------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Enable product compare**                | On                          | Shows the compare checkboxes, the tray and the compare page. Turning it off hides them everywhere.                              |
| **Compare page**                          | —                           | The page that uses the **compare** template. The tray's **Compare** button opens it.                                            |
| **Row 1 label** … **Row 4 label**         | Material, then empty        | The name shown in the first column of each extra row.                                                                           |
| **Row 1 metafield** … **Row 4 metafield** | custom.material, then empty | The product metafield for that row, as `namespace.key`. Single-line text, number, true/false and list metafields are supported. |

Rows with a label but no metafield are skipped. A product without a value for a row shows "—".

## What shoppers see

### The checkbox

* On product cards: a small **Compare** checkbox under the card details.
* On product pages: an **Add to compare** checkbox (the **Compare** block).

A fifth tick shows the message "You can compare up to four products. Remove one to add another."

### The tray

![Compare tray](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-d5e42133e5640a365429bfaff648e15050fd687c%2Fcompare-tray.png?alt=media)

A dark pill fixed to the bottom of the screen while at least one product is ticked:

* a thumbnail of each selected product (empty slots are dashed),
* "3 of 4" (on very narrow phones this is read out to screen readers only, since the thumbnails show the count),
* **Clear** to remove all,
* **Compare**, which opens the compare page.

The tray moves up out of the way when the mobile bottom bar is showing, and it is not shown on the compare page itself.

### The compare page

![Compare page](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e56de9dc3e59b0b13499adc69f521898d2e4798e%2Fcompare-page.png?alt=media)

* Each product gets a column with its image, title, **Add to bag** (or **Choose options** for products with several variants) and **Remove**.
* Rows: **Price**, **Unit price** (when set), **Rating** (from the reviews metafield), **Brand**, **Type**, one row per product option (Color, Size…), your specification rows and **Availability**.
* Values that differ between products are shown in bold.
* **Only show differences** hides rows where every product has the same value.
* While products load, a gray skeleton of the table shows, so the page never flashes an empty state.
* With nothing selected, the page shows "Nothing to compare yet" and a **Browse products** button.
* The table scrolls sideways on phones, with the row names fixed on the left.

### Compare page section settings

| Setting                                               | Default | What it does                                                                       |
| ----------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
| **Heading**                                           | Compare | Leave empty to use the page title.                                                 |
| **Collection for the browse button**                  | —       | Where **Browse products** goes when nothing is selected. Defaults to all products. |
| **Color scheme**, **Top padding**, **Bottom padding** |         | Section look and spacing.                                                          |

## How the selection is stored

The selection is kept in the shopper's browser, on this device only, and is shared between tabs. It needs no account and no app, and nothing is sent to your store until the shopper adds a product to the bag.

## Tips

* Use specification rows for the facts shoppers really compare: material, capacity, weight, dishwasher safe. Create the metafields first (see [Metafields the theme reads](/products/metafields.md)).
* Keep products in the same category comparable by filling the same metafields on each.
* To hide compare on some cards only, remove the **Compare** block from that section's **Product card**.