Skip to main content

CustomerAccountAction

A modal to complete an order action flow. This component can only be used to populate the customer-account.order.action.render extension target, which renders as a result of the customer clicking the order action button rendered via the customer-account.order.action.menu-item.render extension target.

Anchor to propertiesProperties

Anchor to heading
heading
string
required

Sets the heading of the Action container.

Anchor to id
id
string

A unique identifier for the element.

Was this section helpful?

Anchor to slotsSlots

Anchor to primary-action
primary-action
HTMLElement

The primary action to perform, provided as a button type element.

Anchor to secondary-actions
secondary-actions
HTMLElement

The secondary actions to perform, provided as button type elements.

Was this section helpful?

Anchor to slot button propertiesSlot button properties

Supported props for Buttons used inside CustomerAccountAction slots.

children only support text.

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the button text is not enough context for users using assistive technologies.

Anchor to click
click
((event: <typeof buttonTagName>) => void) | null

Callback when the button is activated. This will be called before the action indicated by type.

Anchor to command
command
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
Default: '--auto'

Sets the action the commandFor should take when this clickable is activated.

See the documentation of particular components for the actions they support.

  • --auto: a default action for the target component.
  • --show: shows the target component.
  • --hide: hides the target component.
  • --toggle: toggles the target component.
  • --copy: copies the target ClipboardItem.
Anchor to commandFor
commandFor
string

ID of a component that should respond to activations (e.g. clicks) on this component.

See command for how to control the behavior of the target.

Anchor to disabled
disabled
boolean
Default: false

Disables the button, disallowing any interaction.

Anchor to href
href
string

The URL to link to.

  • If set, it will navigate to the location specified by href after executing the onClick callback.
  • If a commandFor is set, the command will be executed instead of the navigation.
Anchor to loading
loading
boolean
Default: false

Replaces content with a loading indicator.

Was this section helpful?

Basic CustomerAccountAction

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
return (
<s-customer-account-action heading="Edit order">
Extension content
<s-button slot="primary-action" onClick={() => shopify.close()}>
Close
</s-button>
</s-customer-account-action>
);
}

Preview

An example of the CustomerAccountAction component shows a dismissible modal with a header that says "Edit order", a field for adjusting quantities, and a Close button.

Anchor to best-practicesBest Practices

  • Use CustomerAccountAction to shift focus toward information and functionality needed to confirm or complete an order action.
  • If the order action experience you’re building requires complex forms or large amounts of information, consider building a full-page extension instead.
  • See Polaris for more best practices and content guidelines for designing Modals.
Was this section helpful?