How to access order tags/metafields in Customer Account UI Extension (Order Status Page)?

Extensions
1

Hi, I’ve been using Sidekick to help me replace the checkout.order.tags and checkout.order.fulfillment_status in my Order Status page with the new app-based version, but I’m stuck. I asked Sidekick to write a post detailing where I’m up to with the problem:

I’m migrating a custom script from the legacy Order Status Page (using checkout.order.tags and checkout.order.fulfillment_status) to a Customer Account UI Extension, and I’m struggling to access the same order data.

What I’m trying to do: Display manufacturing status messages on the Order Status page based on order tags (or metafields). For example:

  • If order has tag x CUTTER → show “Your mats are being cut”

  • If order has tag x EMBROIDERY → show “Your mats are being embroidered”

  • Only show for unfulfilled/partially fulfilled orders

What I’ve tried:

  1. Direct access to order data

    • The shopify.order object only contains basic fields (id, name, cancelledAt, processedAt, confirmationNumber). No tags or fulfillmentStatus.

  2. Order metafields

    • Created an order metafield (custom.manufacturing_status) with Customer Account API read access enabled, but shopify.metafields returns an empty array.

  3. GraphQL queries

    • Attempted to query using shopify.query():
    query {
  order(id: "gid://shopify/Order/123") {
    tags
    fulfillmentStatus
    metafield(namespace: "custom", key: "manufacturing_status") {
      value
    }
  }
}

    Error: Field 'order' doesn't exist on type 'QueryRoot'

  4. Schema introspection

    • Checked available query fields and discovered the query API appears to be pointing to the Storefront API (which has customer, product, collection, etc.) rather than a Customer Account-specific API.

My questions:

  1. How do I access order tags in a Customer Account UI Extension on the order status page?

  2. If tags aren’t available, how do I access order metafields that have Customer Account API access enabled?

  3. Is there a different API or query structure I should be using for the customer-account.order-status.block.render target?

  4. How can I check fulfillment status (unfulfilled vs partially fulfilled vs fulfilled) to conditionally show/hide the extension?

My setup:

  • Extension target: customer-account.order-status.block.render

  • API version: 2025-10

  • Using Preact with @shopify/ui-extensions

A Shopify staff member mentioned I should use “the Customer Account Extensibility API to query the Fulfillment Status” but I haven’t been able to find documentation on the correct query structure or available fields for this API.

Any help would be greatly appreciated! Thanks in advance.

2

Hi @Ashley_Kennerley

I believe for Customer Extensions like OSP / TYP, you can still access the Customer API instead of the Storefront API. But you do have to use a special URL.

Here’s the docs: Customer Account API

Notice the special shopify root of this URL, it’s a special proxy that allows you to interact with the Shopify Customer API directly:

    fetch(
      `shopify://customer-account/api/${API_VERSION}/graphql.json`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(
          getCustomerNameQuery,
        ),
      },
    )
      .then((response) => response.json())
      .then(
        ({
          data: {
            customer: {firstName},
          },
        }) => {
          setCustomerName(firstName);
        },
      )
      .catch(console.error);
  });