Customer Account API
Create unique customer experiences with the Customer Account API. The API offers a full range of options making it possible for customers to view their orders, manage their profile and much more.
You can access the Customer Account GraphQL API using the global fetch().
The specified in the URL determines which version of the Customer Account API is used.
Examples
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';
export default async () => {
render(<Extension />, document.body);
};
const API_VERSION = '2026-01';
function Extension() {
const [customerName, setCustomerName] =
useState('');
const getCustomerNameQuery = {
query: `query {
customer {
firstName
}
}`,
};
useEffect(() => {
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);
});
return customerName ? (
<s-banner>
{shopify.i18n.translate('welcomeMsg', {
name: customerName,
})}
</s-banner>
) : null;
}
Examples
Extension.jsx
Default
import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useEffect, useState} from 'preact/hooks'; export default async () => { render(<Extension />, document.body); }; const API_VERSION = '2026-01'; function Extension() { const [customerName, setCustomerName] = useState(''); const getCustomerNameQuery = { query: `query { customer { firstName } }`, }; useEffect(() => { 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); }); return customerName ? ( <s-banner> {shopify.i18n.translate('welcomeMsg', { name: customerName, })} </s-banner> ) : null; }
Was this page helpful?