Show test prices, shipping rates, and offers

Your storefront renders prices, so it asks the SDK what the visitor’s test group gets and shows that. The samples use abconvert, the client your stack guide creates on the server, and useABConvert() in a component.

Show a test price

The Storefront API returns the original price. Ask the SDK for the visitor’s price and render that instead. Read it on the server, or in the browser in a component. Both use the same method.

const price = abconvert.getPriceByVariantId(productVariant.id);

// No test price: use the Storefront API price
const amount = price ? price.amount : Number(productVariant.price.amount);

const label = abconvert.formatPrice(amount, productVariant.price.currencyCode);

// components/ProductPrice.tsx
import { useEffect } from 'react';
import { useABConvert } from '@abconvert/headless/react';

export function ProductPrice({ productVariant }) {
  const { getPriceByVariantId, formatPrice, trackExposure } = useABConvert();
  const price = getPriceByVariantId(productVariant.id);

  // The visitor has seen the test price
  useEffect(() => {
    if (price) trackExposure(price.experimentId);
  }, [price]);

  // No test price: use the Storefront API price
  const amount = price ? price.amount : Number(productVariant.price.amount);

  return <span>{formatPrice(amount, productVariant.price.currencyCode)}</span>;
}

getPriceByVariantId takes the product variant ID as the Storefront API returns it, gid://shopify/ProductVariant/47522361606401, or as the number, '47522361606401'. It returns null when the visitor sees the original price: the product variant is in no price test, or the visitor is not in its test. Fall back to the Storefront API price then. A visitor in Control gets the original price as a Price too, so their exposure is recorded like any other. The price is for the country you passed when you created the client. See Prices by country. For a collection card, read by product:

Server or browser

// The lowest product variant price
abconvert.getPriceByProductId('6654464491584');

// The highest
abconvert.getPriceByProductId('6654464491584', { aggregate: 'max' });

Render the test price everywhere a price appears: product page, collection cards, search, and cart. Checkout applies the same price from the cart attributes. Reading a price records nothing. When the price is on screen, call trackExposure with price.experimentId so the visitor counts as having seen the test. See Record a price exposure.

Prices by country

If you sell in more than one country, pass country when you create the client: the country your storefront shows prices for. It is the same value you pass to the Storefront API in @inContext(country: ...). On Hydrogen, it is the country from your localization setup.

Server

const abconvert = await createABConvert({
  shop: 'your-store.myshopify.com',
  storefrontKey: 'abc_pk_4f9c2e7a1b3d5f6e8a0c2b4d6f8e0a1c',
  request,
  country: 'CA',
});

Every price method then returns the test price set for that country, or null when the test sets none for it. If you pass no country, the SDK uses your store’s default country.

Show shipping rates and offers

Checkout applies these on its own once the cart is connected. Read them when you want to show them earlier.

Server or browser

// Every rate the test group offers
abconvert.getShippingRates({ zone: 'United States' });

// For a free shipping progress bar
abconvert.getFreeShippingThreshold({ zone: 'United States' });

// For an offer banner
abconvert.getOffers();

You build the progress bar or banner. The SDK supplies the values for the visitor’s test group. When an offer is on screen, call trackExposure with its experimentId. See Record an offer exposure. On Next.js, a page rendered from a page key returns nothing for them: read them in a route handler and render the bar in the browser. See Shipping rates and offers on a cached page.

Common mistakes

Rendering the test price in one place only. A visitor sees $49 on the product page and $59 on the collection card. The fix: use the SDK wherever a price renders.
Passing a product ID to getPriceByVariantId. It takes a product variant ID and returns null for anything else. The fix: use getPriceByProductId for a product-level price.
Showing a test price without calling trackExposure. The visitor is counted as assigned but not as having experienced the test. The fix: call it once the price is on screen, as the component example does.
Showing the test price without connecting the cart. Checkout then charges the original price. The fix: connect the cart.

Get started

Build

Configure

Advanced

Reference

Show test prices, shipping rates, and offers

Show a test price

Prices by country

Show shipping rates and offers

Common mistakes

​Show a test price

​Prices by country

​Show shipping rates and offers

​Common mistakes

Show a test price

Prices by country

Show shipping rates and offers

Common mistakes