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 => 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 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