Fetch Customer data in custom UI extension

[Muthu_Kumar]

I’m developing a Shopify custom UI extension app and encountering an issue where the app scopes (read_products, read_customers) are not being recognized by Shopify, even though I’ve defined them in my configuration files. This is causing an “Access denied for customer field. Required access: read_customers access scope” error when querying customer data in GraphiQL.
I have received → Access denied for customer field. Required access: read_customers access scope.

How to use HTML elements and CSS styling in a custom UI extension. I have tried using a simple “div” element. When I’m running that code locally. I have received “unsupported component: div”

[Alan_G]

Hey @Muthu_Kumar - happy to see if I can help out with this. Are you using our Remix app template here? Generally, you’d want to define your access scopes in the app’s config .toml file: App configuration

If the app has installed already on the shop and you’re getting that “required access” error, it’s likely that the access scopes didn’t pass correctly. I’d double check to see what access scopes your app has to check which ones were passed when the app was installed.

If you added any scopes after the initial installation, you do need to navigate back to your app’s page in the Shopify admin in order to trigger a reauthorization so that the new scopes get added, so it’s possible that may be what’s happening here.

For your HTML/CSS question, with UI extensions we do limit what components can be used in extensions, there’s a bit more info on this here in our old forums: Re: Can't use html in post puchase extension? - Shopify Community

Hope this helps - let me know if I can clarify anything on my end here

[Muthu_Kumar]

Im using Customer account UI extensions and tried Remix app template also. I have received the same problem.

For the shopify.app.toml file, I have added the scope like →
scopes = “read_products,read_customers”

Again I have create and installed the app in shopify dev-store. Now I can see that scopes values in Shopify partners-> my app-> API Access.
Required scopes

• read_customers
• read_products

But then i can’t access the customer data.

const {query, authenticatedAccount} = useApi();
const customer= useSubscription(authenticatedAccount.customer);
I tried this, but i get only customer’s ID, not other data.

For the HTML/CSS → You mean, I can’t use the HTML elements directly on that Customer account UI extension?

[curzey]

@Muthu_Kumar

authenticatedAccount

authenticatedAccount only returns the customer id, so that makes sense.

Depending on your target, I think you need the use Customer Account API reference.

Example

const exampleCustomerQuery = {
  query: `query {
    customer {
      id
      firstName
      metafields(identifiers: [{namespace: "custom", key: "some_key"}]) {
        type
        value
        key
      }
    }
  }`
};

fetch("shopify://customer-account/api/2025-01/graphql.json", {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(exampleCustomerQuery),
}).then(response => response.json())
  .then(data => {       
    console.log({data});
  })
  .catch(error => console.error('Error fetching customer data:', error));

[curzey]

@Muthu_Kumar

For the HTML/CSS → You mean, I can’t use the HTML elements directly on that Customer account UI extension?

Correct - you need to use the predefined components, which you can find here: Customer-account-ui-extensions components

A bit more on that here: Customer account UI extensions

[Muthu_Kumar]

Thank you for your reply, @curzey.

fetch(“shopify://customer-account/api/2025-01/graphql.json”, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(exampleCustomerQuery),
}).then(response => response.json())
.then(data => {
console.log({data});
})
.catch(error => console.error(‘Error fetching customer data:’, error))

I have implemented this method and was able to successfully retrieve the first_name and last_name fields. However, I was unable to fetch the other field values. The response returned the error: 'Field must have selection.

[curzey]

Hi again, I’m glad it worked.

My best bet would be to read the linked documentation carefully. Some fields has more levels.

What fields do you have problems with?

[Muthu_Kumar]

Hi @curzey

I couldn’t fetch the email, phone, address, and orders fields.

[curzey]

Can you share some code

[Muthu_Kumar]

Now I could fetch email and phone number. How to fetch orders list data and Do I need to get any permissions to fetch the order data?

const exampleCustomerQuery = {
  query: `query {
              customer {
                id
                firstName
                lastName
                phoneNumber{
                     phoneNumber
                }
                emailAddress{
                    emailAddress
                }
                metafields(identifiers: [{namespace: "custom", key: "some_key"}]) {
                  type
                  value
                  key
                }
       orders(first: 5) {
        edges {
          node {
            id
            name
            totalPrice {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }`,
};
fetch("shopify://customer-account/api/2025-01/graphql.json", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(exampleCustomerQuery),
})
  .then((response) => response.json())
  .then((data) => {
    console.log("hhey", { data });
  })
  .catch((error) => console.error("Error fetching customer data:", error));

[curzey]

I think you need more permissions to get the customer orders. Theres a Connection to orders on the Customer object so your query looks correct.

What errors do you get in the Network tab?

Read through the permissions for protected data here: Work with protected customer data.

You can also try with the customer_read_customer and customer_read_orders access scopes, to see if they make a change. Just remember to re-open your app and accept the new access scopes your app will request.

[Muthu_Kumar]

Thank you @curzey

I was able to successfully fetch both order and customer details.

Now, I have another question regarding the UI. In your previous response, you mentioned that we cannot use standard HTML and CSS within the UI extension.

However, I would like to implement a customizable interface on that page — for example, a tabbed layout with Tab 1 displaying the user list and Tab 2 showing the order list.

So, what would be the recommended approach to implement such a UI?
Can I create a custom tabbed interface within the existing framework, or am I limited to using only the predefined Customer Account UI extensions?

[curzey]

That’s great!

You’re limited to the existing components linked to earlier. But you can create a tabbed layout it.

[Muthu_Kumar]

Yeah, got it @curzey.

I’m currently integrating the Razorpay payment method with my Shopify store. When I click the ‘Install’ button, I’m redirected to the Razorpay dashboard. I’ve completed all the required steps — including account creation, basic details, and KYC verification — except for the ‘Collect Payments’ step.

However, I selected ‘Test Mode’ at that step and received my Razorpay Key ID and Secret, which I’ve downloaded. Despite this, Shopify still displays the ‘Install Razorpay’ prompt on the payments page, as if it hasn’t been installed.

Could you please help me understand why Razorpay isn’t showing as installed in Shopify even after completing these steps?

[curzey]

If this is not related to the topic, please create it as a new. Bear in mind, that this is a forum.

Also, it doesn’t seem applicable for the context. Sounds like you should create it as an app ticket / razorpay ticket / Shopify ticket.

[Muthu_Kumar]

Thank you @curzey for your support…