Choose a version:

Profile page (B2B)

Profile page (B2B) extensions render on the Profile page for business-to-business (B2B) customers. These targets appear alongside Shopify's native company and location management UI so customers see your extension content in direct context with their company profile.

Anchor to Use casesUse cases

Company details: Display supplementary company information, such as account manager contacts or company-specific policies.
Location addresses: Show additional address context for a company location, such as delivery zone restrictions or warehouse details.
Payment methods: Provide payment-related notices for a company location, such as credit terms or approved payment methods.
Staff management: Display custom staff-related information for a company location, such as role descriptions or onboarding links.
Custom profile content: Add app-specific content blocks to the Profile page that render for all customers, including B2B customers.

Anchor to Profile page (B2B) targetsProfile page (B2B) targets

Profile page (B2B) targets render on the Profile page for B2B customers. They're useful for adding contextual information about company details, location-specific settings, and custom content.

Anchor to Company details (render after) ,[object Object]Company details (render after) target

customer-account.profile.company-details.render-after

Renders after the company name and before the company location information on the Profile page.

Use this target to display supplementary company information such as account details, company-specific messaging, or links to external resources. This target gives you access to the Authenticated Account API, which provides company and location data through useAuthenticatedAccountPurchasingCompany() (React) or authenticatedAccount (TS).

Support

Components (63)

APIs (13)

Examples

import {

reactExtension,

Banner,

useAuthenticatedAccountPurchasingCompany,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.profile.company-details.render-after',

() => <Extension />,

);

function Extension() {

const purchasingCompany = useAuthenticatedAccountPurchasingCompany();

if (!purchasingCompany) {

return null;

}

return (

Your company account is managed by your organization's admin. Contact

your admin for changes to company details.

</Banner>

);

}

Examples

Description

Show a banner after the company name with account-specific information. This example reads the purchasing company using `useAuthenticatedAccountPurchasingCompany()` (React) or `authenticatedAccount` (TS) to confirm the B2B context before rendering.

React

import {
  reactExtension,
  Banner,
  useAuthenticatedAccountPurchasingCompany,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-details.render-after',
  () => <Extension />,
);

function Extension() {
  const purchasingCompany = useAuthenticatedAccountPurchasingCompany();

  if (!purchasingCompany) {
    return null;
  }

  return (
    <Banner status="info">
      Your company account is managed by your organization's admin. Contact
      your admin for changes to company details.
    </Banner>
  );
}

TS

import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-details.render-after',
  (root, {authenticatedAccount}) => {
    const purchasingCompany =
      authenticatedAccount?.purchasingCompany?.current;

    if (!purchasingCompany) {
      return;
    }

    root.appendChild(
      root.createComponent(
        Banner,
        {status: 'info'},
        `Your company account is managed by your organization's admin. Contact your admin for changes to company details.`,
      ),
    );
  },
);

Description

Display a link to an external company resource after the company details. This example uses `useAuthenticatedAccountPurchasingCompany()` (React) or `authenticatedAccount` (TS) to access the purchasing company context.

React

import {
  reactExtension,
  BlockStack,
  Heading,
  Link,
  Text,
  useAuthenticatedAccountPurchasingCompany,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-details.render-after',
  () => <Extension />,
);

function Extension() {
  const purchasingCompany = useAuthenticatedAccountPurchasingCompany();

  if (!purchasingCompany) {
    return null;
  }

  return (
    <BlockStack spacing="base">
      <Heading>Company resources</Heading>
      <Text>
        Access your company's purchasing guidelines and approved product
        catalog.
      </Text>
      <Link to="https://your-app.com/company-resources">
        View company resources
      </Link>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  extension,
  Heading,
  Link,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-details.render-after',
  (root, {authenticatedAccount}) => {
    const purchasingCompany =
      authenticatedAccount?.purchasingCompany?.current;

    if (!purchasingCompany) {
      return;
    }

    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Company resources'),
        root.createComponent(
          Text,
          undefined,
          `Access your company's purchasing guidelines and approved product catalog.`,
        ),
        root.createComponent(
          Link,
          {to: 'https://your-app.com/company-resources'},
          'View company resources',
        ),
      ]),
    );
  },
);

Anchor to Company location addresses (render after) ,[object Object]Company location addresses (render after) target

customer-account.profile.company-location-addresses.render-after

Renders after the addresses section for a company location on the Profile page. A separate instance of this extension is rendered for each company location.

Use this target to display additional address information for a specific company location, such as delivery restrictions or warehouse notes. This target provides locationId to identify the current company location, and also gives you access to the Authenticated Account API.

Support

Components (63)

APIs (13)

Examples

import {

reactExtension,

Banner,

useApi,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.profile.company-location-addresses.render-after',

() => <Extension />,

);

function Extension() {

const {locationId} = useApi<'customer-account.profile.company-location-addresses.render-after'>();

return (

Delivery to this location is available Monday through Friday.

Contact support with location reference {locationId} for special

delivery arrangements.

</Banner>

);

}

Examples

Description

Show a banner after the company location addresses with delivery zone information. This example uses `locationId` from `useApi()` (React) or the API object (TS) to reference the current company location.

React

import {
  reactExtension,
  Banner,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-addresses.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-addresses.render-after'>();

  return (
    <Banner status="info">
      Delivery to this location is available Monday through Friday.
      Contact support with location reference {locationId} for special
      delivery arrangements.
    </Banner>
  );
}

TS

import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-addresses.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(
        Banner,
        {status: 'info'},
        `Delivery to this location is available Monday through Friday. Contact support with location reference ${locationId} for special delivery arrangements.`,
      ),
    );
  },
);

Description

Display address validation information for the company location. This example uses `locationId` from `useApi()` (React) or the API object (TS) to identify the location and renders a status message.

React

import {
  reactExtension,
  BlockStack,
  Heading,
  Text,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-addresses.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-addresses.render-after'>();

  return (
    <BlockStack spacing="base">
      <Heading>Address verification</Heading>
      <Text>
        The shipping address for this location has been verified and is
        eligible for expedited delivery.
      </Text>
      <Text appearance="subdued">
        Location: {locationId}
      </Text>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  extension,
  Heading,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-addresses.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Address verification'),
        root.createComponent(
          Text,
          undefined,
          'The shipping address for this location has been verified and is eligible for expedited delivery.',
        ),
        root.createComponent(
          Text,
          {appearance: 'subdued'},
          `Location: ${locationId}`,
        ),
      ]),
    );
  },
);

Anchor to Company location payment (render after) ,[object Object]Company location payment (render after) target

customer-account.profile.company-location-payment.render-after

Renders after the Payment methods section for a company location on the Profile page. A separate instance of this extension is rendered for each company location.

Use this target to display payment-related information for a specific company location, such as credit terms or approved payment methods. This target provides locationId to identify the current company location, and also gives you access to the Authenticated Account API.

Support

Components (63)

APIs (13)

Examples

import {

reactExtension,

Banner,

useApi,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.profile.company-location-payment.render-after',

() => <Extension />,

);

function Extension() {

const {locationId} = useApi<'customer-account.profile.company-location-payment.render-after'>();

return (

This location has Net 30 payment terms. Invoices are sent on the 1st

of each month. Contact your account manager for payment inquiries.

</Banner>

);

}

Examples

Description

Show a notice about payment terms for the company location. This example uses `locationId` from `useApi()` (React) or the API object (TS) to reference the current company location.

React

import {
  reactExtension,
  Banner,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-payment.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-payment.render-after'>();

  return (
    <Banner status="info">
      This location has Net 30 payment terms. Invoices are sent on the 1st
      of each month. Contact your account manager for payment inquiries.
    </Banner>
  );
}

TS

import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-payment.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(
        Banner,
        {status: 'info'},
        'This location has Net 30 payment terms. Invoices are sent on the 1st of each month. Contact your account manager for payment inquiries.',
      ),
    );
  },
);

Description

Display credit limit details for the company location. This example uses `locationId` from `useApi()` (React) or the API object (TS) to identify the location and shows credit-related information.

React

import {
  reactExtension,
  BlockStack,
  Heading,
  Text,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-payment.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-payment.render-after'>();

  return (
    <BlockStack spacing="base">
      <Heading>Credit information</Heading>
      <Text>
        Review your location's credit terms and available balance with your
        account manager.
      </Text>
      <Text appearance="subdued">
        Location: {locationId}
      </Text>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  extension,
  Heading,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-payment.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Credit information'),
        root.createComponent(
          Text,
          undefined,
          `Review your location's credit terms and available balance with your account manager.`,
        ),
        root.createComponent(
          Text,
          {appearance: 'subdued'},
          `Location: ${locationId}`,
        ),
      ]),
    );
  },
);

Anchor to Company location staff (render after) ,[object Object]Company location staff (render after) target

customer-account.profile.company-location-staff.render-after

Renders after the Staff and permissions section for a company location on the Profile page. A separate instance of this extension is rendered for each company location.

Use this target to display staff-related information for a specific company location, such as role descriptions or onboarding instructions. This target provides locationId to identify the current company location, and also gives you access to the Authenticated Account API.

Support

Components (63)

APIs (13)

Examples

import {

reactExtension,

Banner,

useApi,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.profile.company-location-staff.render-after',

() => <Extension />,

);

function Extension() {

const {locationId} = useApi<'customer-account.profile.company-location-staff.render-after'>();

return (

New staff members at this location will receive an onboarding email

with purchasing guidelines and approval workflows.

</Banner>

);

}

Examples

Description

Show a banner after the staff section with onboarding information for the company location. This example uses `locationId` from `useApi()` (React) or the API object (TS) to reference the current company location.

React

import {
  reactExtension,
  Banner,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-staff.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-staff.render-after'>();

  return (
    <Banner status="info">
      New staff members at this location will receive an onboarding email
      with purchasing guidelines and approval workflows.
    </Banner>
  );
}

TS

import {
  Banner,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-staff.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(
        Banner,
        {status: 'info'},
        'New staff members at this location will receive an onboarding email with purchasing guidelines and approval workflows.',
      ),
    );
  },
);

Description

Display a summary of staff permission levels for the company location. This example uses `locationId` from `useApi()` (React) or the API object (TS) to identify the location.

React

import {
  reactExtension,
  BlockStack,
  Heading,
  Text,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.company-location-staff.render-after',
  () => <Extension />,
);

function Extension() {
  const {locationId} = useApi<'customer-account.profile.company-location-staff.render-after'>();

  return (
    <BlockStack spacing="base">
      <Heading>Permission levels</Heading>
      <Text>
        Staff permissions at this location are managed by your company
        admin. Contact your admin to request permission changes.
      </Text>
      <Text appearance="subdued">
        Location: {locationId}
      </Text>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  extension,
  Heading,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.company-location-staff.render-after',
  (root, {locationId}) => {
    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Permission levels'),
        root.createComponent(
          Text,
          undefined,
          'Staff permissions at this location are managed by your company admin. Contact your admin to request permission changes.',
        ),
        root.createComponent(
          Text,
          {appearance: 'subdued'},
          `Location: ${locationId}`,
        ),
      ]),
    );
  },
);

Anchor to Profile block ,[object Object]Profile block target

customer-account.profile.block.render

Renders a block extension target on the Profile page. This target renders for all customers, including B2B customers.

Merchants can choose to place this extension in any of the supported locations. To preview your extension in each supported location, use the placement reference for that location as a URL parameter.

Support

Components (63)

APIs (13)

Examples

import {

reactExtension,

BlockStack,

Heading,

Link,

Text,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.profile.block.render',

() => <Extension />,

);

function Extension() {

return (

<Heading>Loyalty program</Heading>

<Text>

You're a valued member of our loyalty program. Check your points

balance and available rewards.

</Text>

View rewards

</Link>

</BlockStack>

);

}

Examples

Description

Show a custom content block on the Profile page that displays loyalty points information. This example renders for all customers, including B2B customers.

React

import {
  reactExtension,
  BlockStack,
  Heading,
  Link,
  Text,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack spacing="base">
      <Heading>Loyalty program</Heading>
      <Text>
        You're a valued member of our loyalty program. Check your points
        balance and available rewards.
      </Text>
      <Link to="https://your-app.com/loyalty">
        View rewards
      </Link>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  extension,
  Heading,
  Link,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.block.render',
  (root) => {
    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Loyalty program'),
        root.createComponent(
          Text,
          undefined,
          `You're a valued member of our loyalty program. Check your points balance and available rewards.`,
        ),
        root.createComponent(
          Link,
          {to: 'https://your-app.com/loyalty'},
          'View rewards',
        ),
      ]),
    );
  },
);

Description

Add a custom section to the Profile page with app-specific content. This block extension renders for all customers and can be placed in any supported location by the merchant.

React

import {
  reactExtension,
  BlockStack,
  Button,
  Heading,
  Text,
  useApi,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.profile.block.render',
  () => <Extension />,
);

function Extension() {
  const {toast} = useApi();

  return (
    <BlockStack spacing="base">
      <Heading>Subscription preferences</Heading>
      <Text>
        Manage your email and notification preferences for order updates,
        promotions, and account activity.
      </Text>
      <Button onPress={() => toast.show('Preferences updated')}>
        Update preferences
      </Button>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  Button,
  extension,
  Heading,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.profile.block.render',
  (root, {toast}) => {
    root.appendChild(
      root.createComponent(BlockStack, {spacing: 'base'}, [
        root.createComponent(Heading, undefined, 'Subscription preferences'),
        root.createComponent(
          Text,
          undefined,
          'Manage your email and notification preferences for order updates, promotions, and account activity.',
        ),
        root.createComponent(
          Button,
          {onPress: () => toast.show('Preferences updated')},
          'Update preferences',
        ),
      ]),
    );
  },
);

Anchor to Best practicesBest practices

Check for B2B context: For targets that rely on B2B data, always check that useAuthenticatedAccountPurchasingCompany() (React) or authenticatedAccount?.purchasingCompany?.current (TS) is defined before rendering company-specific content. Not all customers are B2B customers.
Keep content contextual: Profile page extensions render alongside company and location management UI, so content should be directly relevant to the section it appears in.
Handle multiple instances: The company location targets (company-location-addresses, company-location-payment, company-location-staff) render a separate instance for each company location. Use locationId to differentiate between locations.
Avoid heavy rendering: These targets render inline within the Profile page. Avoid complex layouts or large data fetches that could cause layout shifts. Use Banner or lightweight BlockStack layouts for the best experience.

Anchor to LimitationsLimitations

B2B only: The company details and company location targets only render for B2B customers, who are customers associated with a company location in the admin. They won't appear for default (non-B2B) customers.
Block placement: The customer-account.profile.block.render target is a block extension whose placement is controlled by the merchant. You can't programmatically control where it appears on the page.

Was this page helpful?

Anchor to Use casesUse cases

Anchor to Profile page (B2B) targetsProfile page (B2B) targets

Anchor to Company details (render after) ,[object Object]Company details (render after) target

Supported components

Available APIs

Supported components

Available APIs

Examples

Description

React

TS

Description

React

TS

Anchor to Company location addresses (render after) ,[object Object]Company location addresses (render after) target

Supported components

Available APIs

Supported components

Available APIs

Examples

Description

React

TS

Description

React

TS

Anchor to Company location payment (render after) ,[object Object]Company location payment (render after) target

Supported components

Available APIs

Supported components

Available APIs

Examples

Description

React

TS

Description

React

TS

Anchor to Company location staff (render after) ,[object Object]Company location staff (render after) target

Supported components

Available APIs

Supported components

Available APIs

Examples

Description

React

TS

Description

React

TS

Anchor to Profile block ,[object Object]Profile block target

Supported components

Available APIs

Supported components

Available APIs

Examples

Description

React

TS

Description

React

TS

Anchor to Best practicesBest practices

Anchor to LimitationsLimitations