Show metafield data on cart lines

The cart knows what Shopify’s Ajax API tells it: titles, prices, quantities, properties. It doesn’t know your metafields. A cart enricher fetches extra product or variant fields from the Storefront API and attaches them to every matching line, so you can show a delivery estimate, a “ships separately” warning, an ingredient list, or anything else you store on the product. Typical uses: per-product delivery windows, allergen or ingredient badges, a custom “low stock” flag, loyalty point multipliers, subscriber-only pricing.

Register the enricher

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'delivery',
  onType: 'Product',
  fragment: `
    deliveryWindow: metafield(namespace: "custom", key: "delivery_window") { value }
    shipsSeparately: metafield(namespace: "custom", key: "ships_separately") { value }
  `,
});

Three fields:

Field	Description
`id`	Namespace for the result; it lands at `line.metadata[id]`. Must be unique; a second registration with the same `id` is ignored.
`onType`	`'Product'` or `'ProductVariant'`. Also the join key, so product ID vs. variant ID.
`fragment`	A GraphQL field selection (no outer braces) spliced into the Storefront query. Braces must balance.

Whenever the cart loads or changes, Aftersell fetches your fragment for every product or variant in the cart. The fetch is non-blocking: the cart renders immediately and re-emits cart_updated once the data lands. A slow or failing fragment never delays or breaks the cart.

Read the data

Because enrichment is asynchronous, line.metadata.delivery is undefined until the first fetch resolves. Always guard the read.

window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    const deliveryWindow = line.metadata.delivery?.deliveryWindow?.value;
    if (!deliveryWindow) return; // not fetched yet

    console.log(line.title, 'arrives in', deliveryWindow);
  });
});

Render it in the cart

Enrichment puts the data on the line; a Custom code block in React mode draws it. Add the block as a Cart items sub-block so it renders once per line and receives that line as props.line:

function CustomCode(props) {
  const data = props.line?.metadata?.delivery;
  const window_ = data?.deliveryWindow?.value;

  if (!window_) return null;

  return (
    <div className="cart-external-custom-code_html" style={{ fontSize: '12px', opacity: 0.7 }}>
      Arrives in {window_}
    </div>
  );
}

Enriched values come back from the Storefront API as-is and unsanitized. Render them as text, as above, and never with dangerouslySetInnerHTML or by writing raw HTML.

Variant-level data

Set onType: 'ProductVariant' when the metafield lives on the variant rather than the product:

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'pricing',
  onType: 'ProductVariant',
  fragment: `
    anchorPrice: metafield(namespace: "custom", key: "anchor_price") { value }
    subscriberPrice: metafield(namespace: "custom", key: "subscriber_price") { value }
  `,
});

More than metafields

The fragment is spliced into a Storefront API query, so anything the API exposes on a Product or ProductVariant works, not just metafields:

window.aftersell.cart.hooks.registerCartEnricher({
  id: 'productInfo',
  onType: 'Product',
  fragment: `
    tags
    vendor
    productType
    availableForSale
  `,
});

// Then: warn about anything from a drop-ship vendor.
window.aftersell.cart.events.on('cart_updated', (state) => {
  const hasDropship = state.items.some((line) => {
    const tags = line.metadata.productInfo?.tags;
    return tags?.includes('dropship');
  });
});

Things to get right

Guard every read. metadata defaults to {} and your namespace is undefined until the fetch resolves. The cart renders before the data arrives, always.
Each id is its own namespace. Multiple enrichers coexist without colliding, including ones registered by other apps.
Metafields must be Storefront-visible. A metafield that isn’t exposed to the Storefront API returns null. Check the definition in Shopify admin if you get nothing back.
Keep the fragment small. It runs for every product in the cart, on every cart change. Ask for the fields you use, not everything.
Register at set-up time. It’s a hook, so it belongs at the top of your Initialization script.
Braces must balance. No outer braces around the fragment, but any nested selection needs its own matching pair. An unbalanced fragment is rejected.

Where to go next

registerCartEnricher: the full hook reference.
Custom code blocks: rendering the data.
Cart object: where metadata sits on a line.

Getting Started

Home Page

Best Practices

Post-Purchase Upsells

Cart

Checkout Upsells (Shopify Plus)

Thank You Page

Product Page Upsells

Rokt Thanks

Strategies

Analytics & Tracking

Integrations

Aftersell MCP

Billing & Account

Troubleshooting

Register the enricher

Read the data

Render it in the cart

Variant-level data

More than metafields

Things to get right

Where to go next

​Register the enricher

​Read the data

​Render it in the cart

​Variant-level data

​More than metafields

​Things to get right

​Where to go next

Register the enricher

Read the data

Render it in the cart

Variant-level data

More than metafields

Things to get right

Where to go next