> ## Documentation Index > Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt > Use this file to discover all available pages before exploring further. # Compare page > The compare page: up to four products side by side with price, rating and your spec rows, the best values marked, a Differences only switch and a link to share the comparison. ![Compare page on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-compare.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=b9aadb1b91597142217ffb416cb7e2fa) Compare page, highlighted with the demo content ![Compare page in dark mode](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-compare-dark.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=81e5a2e423045bd77fad034377033d6d) Compare page in dark mode ![Compare page on a phone](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/main-compare-mobile.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=052ed08753ee5e44c4621e4eaee39d9d) Compare page on a phone ## Where to find it On the compare page template (page.compare). Create a page in Online Store → Pages, set its template to compare, then choose it in [Theme settings → Compare](https://docs.kwebby.com/kelvin/theme-settings/compare.md) → Compare page. In the theme editor choose Pages → compare in the page selector, then select Compare. ## How it works * The products come from the page link (`?items=` followed by product handles separated by commas) or, without one, from the shopper's compare list: the same list the Compare checkboxes, the compare tray and the home Compare picker use. The page keeps the link and the list in step. * It holds up to Theme settings → Compare → Products to compare at once (2 to 4). Empty places show Add a product, which searches your store by name, or lists the Compare pool collection with a search box and a Category filter by product type. * The table has a column per product (photo, vendor, name and a remove button) and rows for Price (with the compare-at price struck through), Rating when a reviews app writes the reviews.rating metafield, and each key in Theme settings → Product cards → Spec rows that at least one product has, in that order. A missing value reads Not listed to screen readers and shows a dash. * The lowest price and the highest rating are marked Best, and so are the best values in the rows named in Higher is better and Lower is better, compared by the first number in each value. Rows where every product matches are never marked. Best shows as a shade and the word, never color alone. * Differences only hides the rows where every product matches. It is available once two products are shown. * The last row has Add to cart for products with one variant, Choose options (to the product page) for products with several, and Sold out. * Copy link copies the page address with the products in it, and Clear empties the list. Popular comparison blocks show under the table as buttons that load a set in one click. * Products of different product types get a note that some rows are blank. Handles that no longer exist are left out with a message naming them. On narrow screens the table scrolls sideways, and the compare tray is hidden on this page. ![Compare page in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-main-compare.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=57e139520d62c5acb4a1c68877ebd6c6) In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview ## Edit it * Write your spec rows first in Theme settings → Product cards → Spec rows: they are the table's rows. See [Spec rows](https://docs.kwebby.com/kelvin/guides/spec-rows.md). * List the spec keys where a bigger number wins in Higher is better (default battery\_life, polling\_rate, cores, vram, capacity, refresh\_rate) and where a smaller one wins in Lower is better (default weight), separated by commas. * Set Compare pool to a collection when Add a product should list your products to pick from instead of searching the whole store. * Add Popular comparison blocks, each with a Heading and two to four Products, such as your graphics cards or headphones. * Tick Show differences only by default if your products have long spec lists. * Untick Show the rating row if you do not use a reviews app; the row is hidden anyway when no product has a rating. ## Settings | Setting | What it does | | - | - | | **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. | | **Show breadcrumbs** | On or off. Default: on. | | **Heading** | Text. Leave empty to use the page title. Default: Compare products. | | **Introduction** | Formatted text. | **Table** > [!TIP] > > Rows come from Theme settings, Product cards, Spec rows: metafields in the specs namespace. Price and rating rows are added for you. | Setting | What it does | | - | - | | **Show differences only by default** | On or off. Default: off. | | **Show the rating row** | On or off. Needs a reviews app that writes product ratings. The row is hidden when no product has one. Default: on. | | **Higher is better** | Text. Spec keys separated by commas. The best value in these rows is marked Best. Default: battery\_life, polling\_rate, cores, vram, capacity, refresh\_rate. | | **Lower is better** | Text. Spec keys separated by commas. The lowest price is always marked. Default: weight. | **Product list** | Setting | What it does | | - | - | | **Compare pool** | Choose a collection. Optional. Add a product lists this collection, with a search box and a category filter. Leave empty to search the whole store. | **Popular comparisons** | Setting | What it does | | - | - | | **Heading** | Text. Add Popular comparison blocks to show sets shoppers can open in one click. Default: Popular comparisons. | ## Blocks Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them. ### Popular comparison | Setting | What it does | | - | - | | **Heading** | Text. Default: Popular comparison. | | **Products** | Choose products. Two to four products. | > [!NOTE] > > Without a page chosen in Theme settings → Compare → Compare page, no Compare checkbox, tray or header Compare link shows anywhere. > > Opening a compare link replaces the shopper's own compare list with the products in the link. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.