> ## 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 picker

> Category tabs of products shoppers pick to compare side by side, with a spec table that marks the best values.

![Compare picker on the storefront](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/compare-picker.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=6bb1532c06450e6f964e7a18061a7bd8)

Compare picker, highlighted with the demo content

![Compare picker in dark mode](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/compare-picker-dark.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=2a92a3791e03b50ca67b85cf7b1d0ed9)

Compare picker in dark mode

## Where to find it

Seventh section of the Home page template. In the theme editor choose Home page in the page selector, then select Compare picker. Add it to other pages with Add section.

## How it works

* Each Category block is a tab of the first 12 products of its collection. A product button adds the product to the shopper's compare list, or takes it off.
* It is the same list the product cards' Compare checkbox, the compare tray and the compare page use, saved on the shopper's device. It holds up to the number set in Theme settings → Compare → Products to compare at once (2 to 4); a shopper who picks one more is told the list is full, and the section's messages name the same number.
* The table shows the price, a rating row when a reviews app writes the reviews.rating metafield, and one row for each spec listed in Theme settings → Product cards → Spec rows that at least one product has. A missing value reads Not listed.
* In the rows named in Specs where higher is better and Specs where lower is better, the best value is shaded and marked with the word Best. Price is always lower is better and rating higher is better. Values are compared by their first number, such as 30 in 30 h.
* Differences only hides the rows where every product matches. Clear empties the list. Full comparison opens the compare page with the list, when a Compare page is chosen in [Theme settings → Compare](https://docs.kwebby.com/kelvin/theme-settings/compare.md).
* Before a shopper picks anything, the first two or three products of the open tab fill the table, marked Suggested (Products compared before a visitor picks). They are not added to the list.
* Each column has a remove button and, in the last row, Add to cart, Choose options or Sold out.
* On phones the product buttons go full width, and the table scrolls sideways with the row names pinned.
* With no category collection chosen the section is hidden on the store.

![Compare picker in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-compare-picker.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=342489e69f2b231f7c489a42fe8a119b)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Add up to six Category blocks, each with a Collection of similar products, such as graphics cards. A table of headphones against chargers helps no one.
* Fill the specs metafields on your products and list their keys in Theme settings → Product cards → Spec rows: those rows make the table.
* List the keys where a bigger number wins in Specs where higher is better (such as battery\_life or vram) and the others in Specs where lower is better (such as weight), separated by commas.
* Choose the Compare page in Theme settings → Compare so the Full comparison button shows.

## Settings

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Compare before you buy. |
| **Text** | Text. Default: Pick products to compare. Your list follows you to every page and to the full comparison. |
| **Products compared before a visitor picks** | Options: 2, 3. The first products of the open tab fill the table until the visitor picks their own. Default: 3. |
| **Specs where higher is better** | Text. Specs metafield keys, separated by commas. The best value in these rows is marked. Price is always lower is better and rating higher is better. Default: battery\_life, capacity, wattage, refresh\_rate, vram, cores, polling\_rate, power\_output. |
| **Specs where lower is better** | Text. Default: weight. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

> [!TIP]
>
> Rows come from Theme settings, Product cards, Spec rows. The full comparison link needs a compare page in Theme settings, Compare.

## Blocks

Up to 6 blocks. Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Category

| Setting | What it does |
| - | - |
| **Collection** | Choose a collection. Its first 12 products can be picked. |
| **Tab label** | Text. Leave empty to use the collection title. |

> [!NOTE]
>
> On install the four Category blocks have labels but no collections, so the section stays hidden on the store until you choose them.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.