# Product comparison How shoppers tick up to three products on any product card and see them side by side on a comparison page, with their price, availability and the specifications you choose, and every row where they differ marked. Comparison is off until you set it up. It uses only your storefront: no app, no customer account, and nothing stored on your store. ## Setting it up 1. In **Online Store › Pages**, add a page, for example "Compare". Its title is the comparison page's heading, and its content shows above the table. Under **Theme template**, choose `page.compare`, then save. 2. In the theme editor, open **Theme settings › Product cards**, turn on "Show compare checkbox", and choose the page in "Comparison page". Both are needed, in either order. Until the page chosen in "Comparison page" uses the `page.compare` template, cards show no checkbox and no compare bar appears, so shoppers are never sent to a page that has no comparison on it. ## Choosing the rows The comparison page compares every product on the same rows: * **Price** and **Availability** always come first: the price as on the product card, "From" the lowest price when the variants' prices differ and with a sale's compare-at price, and the stock label of the product's first available variant ("In stock", "Low stock: 4 left", "Sold out"). * Then the rows of the page's own **Spec table** block. The `page.compare` template comes with Type, Vendor and Weight. SKU, variant options and barcode are off, since they name one variant rather than the product. To compare your own specifications, add **Spec row** blocks to that Spec table, each with a "Product metafield" such as `specs.battery_life`. They work as on the product page (see [Product page › Rows from metafields](product-page.md#rows-from-metafields)). The comparison page doesn't reuse the product template's Spec table, so you choose which specifications are worth comparing, and every column has the same rows. In the theme editor, open the comparison page (or choose the `page.compare` template) and select the Compare section's Spec table. Under the table, the editor shows the first product in your catalog as a preview of the rows. Shoppers never see it. A row shows when at least one of the chosen products has a value for it. ## What shoppers see **On product cards.** Each card in Featured collection, Product recommendations, collection pages and search results has a "Compare" checkbox in the row under the card, beside "Quick view" and "Add to cart" when those are on. Screen readers hear it as "Compare" and the product's name. A shopper can tick up to three products. A fourth tick is undone, with the message "You can compare up to 3 products. Remove one to add another." **The compare bar.** Once a product is ticked, a bar docks at the bottom of the screen, on every page but the comparison page. It shows "2 of 3 selected", the chosen products each with a button to remove it (on screens wider than 600px), "Compare now" and "Clear". It never covers another bar: on a product page it sits on top of the sticky add-to-cart bar, and the back-to-top button moves above both. Keyboard focus and the end of the page stop above it. It isn't a pop-up: it doesn't take focus or block the page. **The comparison page.** A table with a column for each product: its image, its name linked to the product page, and a "Remove" button. Each row starts with its name. * Rows where the products differ are marked "≠", and screen readers hear "values differ" after the row's name. A product with no value for a row shows a dash, read as "Not listed", and counts as a difference. * "Show only differences" hides the rows where every product agrees. Screen readers hear how many rows are left. * "Remove" takes a product out of the table and the selection. With one product left, the page asks for another to compare against. With none, it links back to your products. * On phones, the table scrolls sideways while the row names stay in place. Keyboard users can tab to the table and scroll it with the arrow keys. * The page's address lists the products, such as `/pages/compare?products=cellblock-20k,juicepack-10k`, so a comparison can be bookmarked or shared. Opening a shared link shows those products without changing the visitor's own selection, until they remove one. ## Limits * **Three products at most.** Three columns and the row names fit side by side on a desktop screen. * **The selection is kept in this browser only**, in its local storage, for as long as the browser keeps site data. It isn't saved to a customer account or shared between devices, and it isn't a wishlist. Nothing is stored until a shopper ticks a box, and "Clear" removes it. * **JavaScript is needed.** Without it, or when the browser blocks site data (such as Safari with all cookies blocked), cards show no checkbox and no bar appears. The comparison page says it needs JavaScript. A shared link still works where only site data is blocked. * **Products that are no longer available**, because they were deleted, unpublished or aren't sold in the shopper's market, are dropped from the comparison with the message "Some products are no longer available and were removed.", which screen readers hear as well. So is "The comparison couldn't be loaded", when a product can't be fetched at all. * **Rows are product-level.** As on the product card, the price covers the whole product, "From $59.00" when its variants' prices differ, and the stock label is its first available variant's. Spec rows show product metafields, not variant ones. ## Troubleshooting * **No checkbox on cards.** Check both settings in **Theme settings › Product cards**: "Show compare checkbox" on, and a page chosen in "Comparison page". Then check that page's theme template is `page.compare` in **Online Store › Pages**: a page on any other template is ignored. * **A specification is missing.** Add a Spec row for it to the comparison page's Spec table. A row appears once at least one chosen product has a value. * **Prices look different from the cards after a currency change.** Reload the comparison page; it asks for each product in the shopper's current market and currency. ## See also * [Product page › Spec table](product-page.md#spec-table) * [Product sections › Product cards](../building-pages/product-sections.md#product-cards) * [Theme settings reference › Product cards](../reference/theme-settings.md#product-cards) * [Sections reference › Compare](../reference/sections.md#compare)