Product Comparison

Product Comparison

Overview

Build a side-by-side product comparison feature where shoppers select 2–4 products and see their attributes in a sticky-header table. Attribute rows that are identical across all selected products can be hidden to reduce noise. The comparison state is stored in the URL so it can be shared or bookmarked.

When to Use This Skill

• When selling products with many technical specifications (electronics, appliances, cameras)
• When conversion research shows shoppers are considering multiple products before purchasing
• When the product catalog has well-structured attribute data that lends itself to comparison
• When building a B2B store where buyers need to justify purchase decisions to stakeholders
• When implementing a "Compare" checkbox on product listing pages

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach

Step 2: Enable and configure comparison on your platform

---

Shopify

Using Comparify app: 1. Install Comparify – Product Comparison from the Shopify App Store (free tier available) 2. In the app settings, select which product metafields to display as comparison rows (e.g., material, weight, dimensions, warranty)

• If you haven't set up metafields yet: go to Settings → Custom data → Products and create metafields for your specs

3. The app automatically adds a "Compare" checkbox to product cards in your collection pages 4. Shoppers select up to 4 products, click "Compare" in the floating tray, and land on a full comparison table 5. Configure which attributes appear as rows and in what order in the app's Table Settings

Preparing your product data:

• Add spec data as product metafields (recommended) or in the product description with consistent formatting
• For variant specs, add them as variant metafields (e.g., weight per size)

---

WooCommerce

Using YITH WooCommerce Compare (free): 1. Install and activate from WordPress.org 2. Go to YITH → Compare → Settings 3. Under Fields to compare, select which WooCommerce product attributes and custom fields to show as rows (e.g., Color, Material, Dimensions, Weight) 4. Set Maximum products to 4 5. Enable Highlight differences to visually call out rows where products differ 6. The plugin adds a "Compare" button to product cards on your shop page and archives 7. A floating comparison bar appears at the bottom of the page as shoppers add products

Preparing your product data:

• Add comparison attributes via Products → Attributes — create attributes like "Material", "Warranty", "Compatible with" and assign values to each product
• Products must use the same attribute names for comparison rows to align correctly

---

BigCommerce

Built-in comparison (Cornerstone theme): 1. Go to Storefront → My Themes → Customize 2. Navigate to Global → Product Compare (or Category Page → Product Compare depending on your theme version) 3. Toggle Enable product comparison to On 4. Set the Maximum products (default is 4) 5. Configure which Product Custom Fields appear as comparison rows in Products → Product Custom Fields settings 6. Shoppers see a "Compare" checkbox on product cards; the floating compare tray appears automatically

Adding spec data:

• Go to Products → [product] → Custom Fields and add name/value pairs (e.g., "Screen Size: 15.6 inches", "Battery Life: 10 hours")
• Use the same field names across comparable products so they align in the comparison table

---

Custom / Headless

Comparison tray (floating bar as products are selected):

// ComparisonTray.jsx
export function ComparisonTray({ selectedProducts, onRemove, onClear }) {
  if (selectedProducts.length === 0) return null;

  const compareUrl = `/compare?${selectedProducts.map(p => `compare=${p.id}`).join('&')}`;

  return (
    <div className="comparison-tray" aria-live="polite" aria-label="Products selected for comparison">
      <div className="tray-products">
        {selectedProducts.map(product => (
          <div key={product.id} className="tray-product">
            <img src={product.image} alt={product.name} width="48" height="48" />
            <button onClick={() => onRemove(product.id)} aria-label={`Remove ${product.name} from comparison`}>&times;</button>
          </div>
        ))}
        {Array.from({ length: Math.max(0, 4 - selectedProducts.length) }).map((_, i) => (
          <div key={`empty-${i}`} className="tray-placeholder" aria-hidden="true">+</div>
        ))}
      </div>
      <div className="tray-actions">
        <a href={compareUrl} className="btn-primary" aria-disabled={selectedProducts.length < 2}>
          Compare ({selectedProducts.length})
        </a>
        <button onClick={onClear}>Clear all</button>
      </div>
    </div>
  );
}

Comparison table with sticky headers and difference highlighting:

export function ProductComparisonTable({ products, attributeGroups, showOnlyDifferences }) {
  function isRowIdentical(attrKey) {
    const values = products.map(p => p.attributes[attrKey]);
    return values.every(v => v === values[0]);
  }

  return (
    <div className="comparison-wrapper" style={{ overflowX: 'auto' }}>
      <table className="comparison-table">
        <caption className="sr-only">
          Side-by-side comparison of {products.map(p => p.name).join(', ')}
        </caption>
        <thead>
          <tr>
            <th scope="col" className="attr-col">Attribute</th>
            {products.map(product => (
              <th key={product.id} scope="col">
                <img src={product.image} alt={product.name} width="80" height="80" />
                <a href={product.url}>{product.name}</a>
                <strong>${product.price}</strong>
                <button className="btn-primary">Add to Cart</button>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {attributeGroups.map(group => (
            <>
              <tr key={`group-${group.label}`}>
                <th scope="rowgroup" colSpan={products.length + 1}>{group.label}</th>
              </tr>
              {group.attributes.map(attrKey => {
                if (showOnlyDifferences && isRowIdentical(attrKey)) return null;
                return (
                  <tr key={attrKey} className={isRowIdentical(attrKey) ? 'identical-row' : 'different-row'}>
                    <th scope="row">{attrKey.replace(/_/g, ' ')}</th>
                    {products.map(p => (
                      <td key={p.id}>{p.attributes[attrKey] ?? 'N/A'}</td>
                    ))}
                  </tr>
                );
              })}
            </>
          ))}
        </tbody>
      </table>
    </div>
  );
}

URL state for comparison (use `replaceState` to avoid polluting back-button history):

function toggleCompare(productId) {
  const params = new URLSearchParams(window.location.search);
  const current = params.getAll('compare');
  if (current.includes(productId)) {
    params.delete('compare');
    current.filter(id => id !== productId).forEach(id => params.append('compare', id));
  } else if (current.length < 4) {
    params.append('compare', productId);
  }
  window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
}

Best Practices

• Limit comparison to 2–4 products — more than 4 columns breaks table layout on most screens; enforce this in the UI
• Group attributes by category — organize specs into groups (Display, Performance, Battery) to prevent a 50-row flat table
• Offer "show differences only" toggle — rows where all products share the same value add noise; provide an easy toggle
• Make the table horizontally scrollable on mobile — use overflow-x: auto on a wrapper; never hide columns to fit small screens
• Pre-populate from listing page — when a shopper clicks "Compare Now" after selecting items on the PLP, navigate with IDs in the URL
• Use consistent attribute naming — specs across products must use identical field names (e.g., "Screen Size" not sometimes "Display Size") for table rows to align

Common Pitfalls

Related Skills

• @product-page-design
• @faceted-navigation
• @accessibility-commerce
• @recently-viewed-products

Camera Comparison Table

Problem/Feature Description

A consumer electronics retailer sells a large range of digital cameras and wants shoppers to be able to compare models side by side. The product team has noticed that customers frequently open multiple product pages in separate tabs to manually compare specs, leading to drop-off before purchase. The goal is to build a self-contained React comparison table component that can be dropped into the existing store.

The catalog team has organised camera specifications into logical groups — Display, Sensor, Performance, and Connectivity — and the data layer will supply products already normalised to a common attribute map. The component must work with a screen reader and be keyboard-accessible so the feature passes the store's WCAG compliance review. A product manager has also asked for a toggle that lets shoppers hide rows where every camera has the same value, to cut noise from a potentially 40-row spec sheet.

Output Specification

Produce the following files:

• ProductComparisonTable.jsx — the main comparison table React component. Accept products, attributeGroups, and showOnlyDifferences as props.
• ComparisonTable.css — all CSS for the table layout, sticky elements, and row styling.
• README.md — a short explanation of the component's props and how to integrate it.

The component should be runnable in isolation (no external dependencies beyond React). Use the sample data below to demonstrate the component rendering by exporting a Demo component in ProductComparisonTable.jsx that renders three cameras from the sample data.

Input Files

The following sample data is provided as context. Extract the JSON before beginning.

=============== FILE: inputs/sample-products.json =============== [ { "id": "cam-001", "name": "AlphaShot X100", "price": 899, "image": "/images/x100.jpg", "url": "/products/alphashot-x100", "attributes": { "screen_size": "3.0 inch", "resolution": "24 MP", "refresh_rate": "60 Hz", "sensor_type": "APS-C", "iso_range": "100-51200", "burst_speed": "10 fps", "video_4k": true, "wifi": true, "bluetooth": false, "weather_sealed": true } }, { "id": "cam-002", "name": "ZenLens Pro", "price": 1199, "image": "/images/zenlens.jpg", "url": "/products/zenlens-pro", "attributes": { "screen_size": "3.2 inch", "resolution": "33 MP", "refresh_rate": "60 Hz", "sensor_type": "Full Frame", "iso_range": "50-204800", "burst_speed": "15 fps", "video_4k": true, "wifi": true, "bluetooth": true, "weather_sealed": true } }, { "id": "cam-003", "name": "SnapMaster 500", "price": 499, "image": "/images/snap500.jpg", "url": "/products/snapmaster-500", "attributes": { "screen_size": "2.7 inch", "resolution": "20 MP", "refresh_rate": "60 Hz", "sensor_type": "Micro 4/3", "iso_range": "100-25600", "burst_speed": "6 fps", "video_4k": false, "wifi": true, "bluetooth": false, "weather_sealed": false } } ]

=============== FILE: inputs/attribute-groups.json =============== [ { "label": "Display", "attributes": ["screen_size", "refresh_rate"] }, { "label": "Sensor", "attributes": ["resolution", "sensor_type", "iso_range"] }, { "label": "Performance", "attributes": ["burst_speed", "video_4k"] }, { "label": "Connectivity", "attributes": ["wifi", "bluetooth", "weather_sealed"] } ]

Product Listing Compare Selection UI

Problem/Feature Description

A home appliances e-commerce store is adding a product comparison feature to its category pages. Shoppers browsing washing machines or refrigerators need to be able to tag multiple models for side-by-side review without leaving the listing page. The UX team has designed a two-part interaction: a checkbox on each product card that the shopper ticks to include a model, and a persistent bar that floats at the bottom of the screen showing which models are currently queued for comparison.

The engineering team needs React components for both the product card (with the comparison checkbox) and the floating tray. There is a hard constraint that the comparison must accommodate between 1 and a maximum number of products — the exact limit will be enforced in the UI itself so shoppers can never accidentally add more than allowed. The tray should give shoppers clear feedback about how many slots remain, offer a direct route to the comparison page, and let them remove individual items or wipe the entire selection.

Output Specification

Produce the following files:

• ProductCard.jsx — product card component that accepts product, comparedIds, and onToggleCompare as props. Demonstrate it with a static list of three appliances.
• ComparisonTray.jsx — floating tray component that accepts selectedProducts, onRemove, and onClear as props.
• ProductListing.jsx — a parent component that wires ProductCard instances and the ComparisonTray together, managing local state for selected product IDs. It should also render a Compare button/link that targets the comparison page with the current selection encoded in the URL.
• tray.css — CSS for the floating tray layout and positioning.

Use the sample product data below to populate the demonstration.

Input Files

The following sample data is provided. Extract it before beginning.

=============== FILE: inputs/products.json =============== [ { "id": "wm-101", "name": "CleanWave 7kg", "price": 349, "image": "/img/cleanwave.jpg" }, { "id": "wm-102", "name": "SpinPro Deluxe", "price": 499, "image": "/img/spinpro.jpg" }, { "id": "wm-103", "name": "EcoWash Slim", "price": 279, "image": "/img/ecowash.jpg" }, { "id": "wm-104", "name": "TurboClean X9", "price": 699, "image": "/img/turboclean.jpg" }, { "id": "wm-105", "name": "AquaFresh Plus", "price": 419, "image": "/img/aquafresh.jpg" } ]

Comparison State Hook and Data API

Problem/Feature Description

A furniture retailer is launching a product comparison feature. The frontend team needs two things: a reusable React hook that keeps the list of selected product IDs in sync with the URL so shoppers can share or bookmark their comparison, and a server-side data function that fetches and normalises product records before the comparison table renders them.

The team has run into a specific issue in a previous prototype: navigating back and forward in the browser produced unexpected behaviour because every checkbox click added a new entry to browser history. The new hook must avoid this. Another problem in the prototype was that some furniture pieces do not have every specification filled in — the previous version silently dropped those cells, which misaligned table columns. The new data layer must handle absent attributes in a way that keeps the table structurally consistent.

The team also wants a complete CSS file for the comparison table so that it scrolls correctly on small screens and keeps the row labels visible while scrolling horizontally on larger screens.

Output Specification

Produce the following files:

• hooks/useProductComparison.js — the URL-syncing comparison hook. Export useProductComparison which returns { comparedIds, toggle, clearAll }.
• api/comparison.js — the data-fetching function. Export getComparisonData(productIds) that returns normalised product objects. Use the mock data below instead of a real database call.
• ComparisonTable.css — CSS for the table wrapper and column/row layout, including mobile scrolling behaviour and sticky positioning.
• ARCHITECTURE.md — a brief document (bullet points are fine) describing the key design decisions made in the hook and the data function, especially around URL management and missing attribute handling.

Input Files

The following mock product database is provided. Extract it before beginning.

=============== FILE: inputs/mock-db.json =============== [ { "id": "sofa-001", "name": "CloudComfort 3-Seater", "slug": "cloudcomfort-3-seater", "price": 1299, "images": ["/img/cc3.jpg"], "attributes": [ { "key": "material", "value": "Linen" }, { "key": "seat_depth", "value": "60 cm" }, { "key": "leg_material", "value": "Oak" }, { "key": "removable_covers", "value": "Yes" }, { "key": "weight_kg", "value": "45" } ], "variants": [{ "price": 1299 }] }, { "id": "sofa-002", "name": "ModularLux Corner", "slug": "modularlux-corner", "price": 2199, "images": ["/img/mlcorner.jpg"], "attributes": [ { "key": "material", "value": "Velvet" }, { "key": "seat_depth", "value": "65 cm" }, { "key": "leg_material", "value": "Metal" }, { "key": "weight_kg", "value": "78" } ], "variants": [{ "price": 2199 }] }, { "id": "sofa-003", "name": "SlimLine 2-Seater", "slug": "slimline-2-seater", "price": 799, "images": ["/img/slim2.jpg"], "attributes": [ { "key": "material", "value": "Microfibre" }, { "key": "seat_depth", "value": "55 cm" }, { "key": "removable_covers", "value": "No" }, { "key": "weight_kg", "value": "32" } ], "variants": [{ "price": 799 }] } ]