Skip to main content

customer-account.order.action.menu-item.render
Target

A static extension target that renders as 1 order action on the Order Index and Order Status pages in customer accounts.

Anchor to orderapiOrderApi

The API object provided to this and other customer-account.order extension targets.

Anchor to orderId
orderId
string
required
Was this section helpful?

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to analytics
analytics
required

Methods for interacting with Web Pixels, such as emitting an event.

Note

Requires to connect a third-party domain to Shopify for your customer account pages.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

Anchor to authenticatedAccount
authenticatedAccount
required

Information about the authenticated account.

Anchor to customerPrivacy
customerPrivacy
StatefulRemoteSubscribable<>
required

Customer privacy consent settings and a flag denoting if consent has previously been collected.

Anchor to extension
extension
required

Meta information about the extension.

Anchor to i18n
i18n
required

Utilities for translating content and formatting values according to the current localization of the user.

Anchor to localization
localization
required

Details about the language of the buyer.

Anchor to navigation
navigation
required
Anchor to query
query
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>
required

Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.

Anchor to sessionToken
sessionToken
required

Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.

Anchor to settings
settings
StatefulRemoteSubscribable<>
required

The settings matching the settings definition written in the shopify.ui.extension.toml file.

See settings examples for more information.

Note

When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.

Anchor to storage
storage
required

Key-value storage for the extension target.

Anchor to ui
ui
required

Methods to interact with the extension's UI.

Anchor to version
version
Version
required

The renderer version being used for the extension.

Anchor to extensionPoint
extensionPoint
Target
required

The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.

Deprecated

Deprecated as of version 2023-07, use extension.target instead.

Was this section helpful?

Anchor to buttonpropsButtonProps

Supported props for Buttons used in order actions.

children only support text.

Omit onPress and to to trigger the customer-account.order.action.render extension target on press.

Anchor to to
to
string
required

Destination URL to link to.

E.g. extension:/ to navigate to the Full-page extension.

Anchor to accessibilityLabel
accessibilityLabel
string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

Anchor to appearance
appearance
Extract<, 'monochrome' | 'critical'>

Specify the color treatment of the Button.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Anchor to loadingLabel
loadingLabel
string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

Anchor to onPress
onPress
() => void

Callback that is run when the button is pressed.

Was this section helpful?

Customer account order menu item extension example

import React from "react";
import {
Button,
reactExtension,
useApi,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
"customer-account.order.action.menu-item.render",
() => <MenuActionItemExtension />
);

function MenuActionItemExtension() {
const {i18n} = useApi<"customer-account.order.action.menu-item.render">()
return <Button>{i18n.translate("menuItem.button")}</Button>;
}

Anchor to examplesExamples

Additional examples for menu item extensions.

Anchor to example-loading-your-data-before-rendering-the-menu-itemLoading your data before rendering the menu item
Was this section helpful?

Loading your data before rendering the menu item

React

import React from "react";
import {
Button,
reactExtension,
useApi,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
"customer-account.order.action.menu-item.render",
async () => {
const data = await fetchMenuItems();

return <MenuActionItemExtension data={data}/>
}
);

interface Props {
data: any;
}

function MenuActionItemExtension(props: Props) {
return <Button to={props.data.url}>{props.data.itemName}</Button>;
}

function fetchMenuItems() {
throw new Error("Function not implemented.");
}


Anchor to relatedRelated

LimitationsOrder status page