Product Comparison

Overview

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

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

• 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

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

• 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

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

• 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

// 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>
  );
}

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>
  );
}

replaceState

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

position: sticky

padding-bottom

null

Related Skills

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