Retrieve customer tags in Profile and Order-Index pages

Extensions
1

Hi dev community.

shopify.extension.toml

...
api_version = "2025-07"

[[extensions]]
...
type = "ui_extension"

# Target for the profile page
[[extensions.targeting]]
module = "./src/ProfileBlock.jsx"
target = "customer-account.profile.block.render"
export = "profileBlock"

[[extensions.targeting]]
module = "./src/ProfileBlock.jsx"
target = "customer-account.order-index.block.render"
export = "orderIndexBlock"

...

[extensions.capabilities]
api_access = true

[extensions.capabilities.storefront_api_access]
allowed_apis = ["read:customer_tags"]

network_access = true

ProfileBlock.jsx

import {
  BlockStack,
  reactExtension,
  TextBlock,
  Banner,
  useSettings,
  useApi,
} from "@shopify/ui-extensions-react/customer-account";
import { useEffect, useState } from "react";

// Export for the profile page target
export const profileBlock = reactExtension(
  "customer-account.profile.block.render",
  () => <PromotionBanner />
);

// Export for the order history target
export const orderIndexBlock = reactExtension(
  "customer-account.order-index.block.render",
  () => <PromotionBanner />
);

// Function to fetch customer tags using the Storefront API
async function fetchCustomerTags(fetchFn) {
  if (typeof fetchFn !== "function") {
    throw new Error("authenticatedFetch is not a function");
  }

  const response = await fetchFn(
    "https://shopify.com/storefront/api/2025-07/graphql.json",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `
          {
            customer {
              tags
            }
          }
        `,
      }),
    }
  );

  const result = await response.json();
  return result?.data?.customer?.tags ?? [];
}

function PromotionBanner() {
  const { banner_text } = useSettings();
  const api = useApi(); // contains authenticatedFetch, but must be accessed carefully
  console.log("API from useApi:", api);
  const [customerTags, setCustomerTags] = useState([]);
  const [loading, setLoading] = useState(true);

  const restrictedTags = ["Student", "Personal", "Business"];

  useEffect(() => {
    const run = async () => {
      try {
        const fetchFn = api?.authenticatedFetch;
        const tags = await fetchCustomerTags(fetchFn);
        setCustomerTags(tags);
      } catch (error) {
        console.error("Error fetching customer tags:", error);
      } finally {
        setLoading(false);
      }
    };

    run();
  }, [api]);

  const hasRestrictedTag = customerTags.some((tag) =>
    restrictedTags.includes(tag)
  );

  if (loading || !banner_text || hasRestrictedTag) {
    return null;
  }

  return (
    <Banner>
      <BlockStack inlineAlignment="center">
        <TextBlock>{banner_text}</TextBlock>
      </BlockStack>
    </Banner>
  );
}

The goal of my extension is to retrieve customer’s tag when a customer logs into theyr profile or prevewing their past orders.
In my dev store, I have the customer account runs on the new customer accounts.
The following permission have been defined in the app:
image

Here is the error message I’m getting on the response:

Error fetching customer tags: Error: authenticatedFetch is not a function

At this moment, is it possible to retrieve customer’s tags with the latest API version?

2

You can query customer tags from your customer account extension using the Customer Account API. The Storefront API cannot be used from your extension to query customer data - only product data.

Code Example here, just replace firstName with tags.

1 Like
3

Thank you, for the quick response.
I’ve implemeted the suggested example from the provided link.
Unfortunatly, the query returned empty string:

image
image1327×175 11.1 KB

Here is my updated code in ProfileBlock.jsx


import React, { useEffect, useState } from "react";
import {
  BlockStack,
  reactExtension,
  useTranslate,
  TextBlock,
  Banner,
  useSettings,
} from "@shopify/ui-extensions-react/customer-account";


// Export for the profile page target
export const profileBlock = reactExtension(
  "customer-account.profile.block.render",
  () => <PromotionBanner />
);

// Export for the order history target
export const orderIndexBlock = reactExtension(
  "customer-account.order-index.block.render",
  () => <PromotionBanner />
);


function PromotionBanner() {
  const { banner_text } = useSettings();

  const [customerName, setCustomerName] = useState("");
  const [customerTags, setCustomerTags] = useState("");
  const translate = useTranslate();

  const getCustomerInfoQuery = {
    query: `query {
      customer {
        firstName
        tags
      }
    }`
  };

  useEffect(() => {
    fetch("shopify://customer-account/api/unstable/graphql.json",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(getCustomerInfoQuery),
      }).then((response) => response.json())
      .then(({data: { customer: {firstName}, tags: {tags}}}) => {
        setCustomerName(firstName);
        setCustomerTags(tags)
      }).catch(console.error);
  });

  const restrictedTags = ["Student", "Personal", "Business"];

  console.log('customer info: ', customerName, customerTags);

  const hasRestrictedTag = customerTags[0].some((tag) =>
    restrictedTags.includes(tag)
  );

  if (!banner_text || hasRestrictedTag) {
    return null;
  }

  return (
    <Banner>
      <BlockStack inlineAlignment="center">
        <TextBlock>{banner_text}</TextBlock>
      </BlockStack>
    </Banner>
  );
}

Is it something I’m not doing right here?

4

Tags are inside of customer:

fetch("shopify://customer-account/api/unstable/graphql.json",
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(getCustomerInfoQuery),
      }).then((response) => response.json())
      .then(({data: { customer: {firstName, tags}}}) => {
        setCustomerName(firstName);
        setCustomerTags(tags)
      }).catch(console.error);
5

Thank you, Kenza.
Your comments pointed me in the right direction.