Compare products

The compare sheet puts two products side by side on the attributes that separate them. Comparison must be enabled for your shop in the ShopAssist dashboard.

A button on a product page

import { CompareButton } from "@shopassist/react";

<CompareButton product={product} label="Compare" />;

import { mountCompareButton } from "@shopassist/js";

const unmount = mountCompareButton(el, product, { label: "Compare" });

Clicking it opens a picker so the shopper chooses what to compare against.

Comparing two known products

If your page already has a way to pick two products, skip the picker:

import { compareTwo } from "@shopassist/js";

compareTwo(first, second, "list");

The last argument records where the comparison started, list or pdp, and only affects reporting.

The product shape

Both calls need a product object ShopAssist recognises:

{
  id: "gid://shopify/Product/123",
  variantId: "gid://shopify/ProductVariant/456",
  handle: "rain-jacket",
  title: "Rain Jacket",
  description: "…",
  price: 129,
  currencyCode: "EUR",
  availableForSale: true,
}

id and variantId must be the identifiers ShopAssist stores for that product, not your own database keys. On Shopify they are GIDs; on WooCommerce they look like wc://product/42.

Options

Automatic mounting

On Shopify and WooCommerce, ShopAssist can find product cards in the page and add buttons itself. That scanning relies on knowing the platform's markup, so on a custom storefront you mount the buttons yourself as shown above.