Créer des Customer Account UI Extensions Shopify

name: shopify-polaris-customer-account-extensions description: "Construisez des fonctionnalités personnalisées que les commerçants peuvent installer à des points définis sur les pages Index des commandes, Statut de la commande et Profil dans les comptes clients. Les extensions UI des comptes clients supportent également l'échafaudage de nouvelles extensions de comptes clients à l'aide des commandes Shopify CLI." compatibility: Claude Code, Claude Desktop, Cursor metadata: author: Shopify

Vous êtes un assistant qui aide les développeurs Shopify à écrire du code UI Framework pour interagir avec la dernière version du UI Framework shopify-polaris-customer-account-extensions.

Vous devriez trouver toutes les opérations qui peuvent aider le développeur à atteindre son objectif, fournir du code UI Framework valide avec des explications utiles. Les extensions UI des comptes clients permettent aux développeurs d'applications de construire des fonctionnalités personnalisées que les commerçants peuvent installer à des points définis sur les pages Index des commandes, Statut de la commande et Profil dans les comptes clients.

Commande CLI pour scaffolder une nouvelle extension UI de compte client :

shopify app generate extension --template=customer_account_ui --name=my_customer_account_ui_extension

version: 2026-01

Extension Targets (utiliser dans shopify.extension.toml)

Les targets décident quels composants/APIs peuvent être utilisés. Consultez la documentation des développeurs pour la documentation spécifique aux targets :

Footer:

customer-account.footer.render-after

Index des commandes:

customer-account.order-index.announcement.render
customer-account.order-index.block.render

Statut de la commande:

customer-account.order-status.announcement.render
customer-account.order-status.block.render
customer-account.order-status.cart-line-item.render-after
customer-account.order-status.cart-line-list.render-after
customer-account.order-status.customer-information.render-after
customer-account.order-status.fulfillment-details.render-after
customer-account.order-status.payment-details.render-after
customer-account.order-status.return-details.render-after
customer-account.order-status.unfulfilled-items.render-after

Menu d'action de commande:

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

Page complète:

customer-account.order.page.render
customer-account.page.render

Profil (Par défaut):

customer-account.profile.addresses.render-after
customer-account.profile.announcement.render
customer-account.profile.block.render

Profil (B2B):

customer-account.profile.company-details.render-after
customer-account.profile.company-location-addresses.render-after
customer-account.profile.company-location-payment.render-after
customer-account.profile.company-location-staff.render-after

APIs

APIs disponibles: Analytics, Authenticated Account, Customer Account API, Customer Privacy, Extension, Intents, Localization, Navigation, Storefront API, Session Token, Settings, Storage, Toast, Version Order Status API: Addresses, Attributes, Authentication State, Buyer Identity, Cart Lines, Checkout Settings, Cost, Discounts, Gift Cards, Localization (Order Status API), Metafields, Note, Order, Require Login, Shop

Guides

Guides disponibles: Using Polaris web components, Configuration, Error handling, Upgrading to 2026-01

Composants disponibles pour les extensions UI des comptes clients. Ces exemples contiennent toutes les props disponibles pour le composant. Certaines valeurs d'exemple pour ces props sont fournies. Consultez la documentation des développeurs pour trouver toutes les valeurs valides pour une prop. Assurez-vous que le composant est disponible pour le target que vous utilisez.

<s-abbreviation title="HTML">HTML</s-abbreviation>
<s-announcement>Important update content</s-announcement>
<s-avatar initials="JD" src="https://example.com/avatar.jpg" size="base" alt="Jane Doe"></s-avatar>
<s-badge tone="critical" color="base" icon="alert-circle" size="base">Overdue</s-badge>
<s-banner heading="Notice" tone="info" dismissible collapsible>Message content</s-banner>
<s-box padding="base" background="subdued" border="base" border-radius="base">Content</s-box>
<s-button variant="primary" tone="auto" type="submit">Save</s-button>
<s-button-group><s-button variant="primary">Save</s-button><s-button variant="secondary">Cancel</s-button></s-button-group>
<s-checkbox label="Accept terms" name="terms" value="accepted"></s-checkbox>
<s-chip accessibility-label="Tag">Category</s-chip>
<s-choice-list label="Options" name="options"><s-choice value="1">Option 1</s-choice><s-choice value="2">Option 2</s-choice></s-choice-list>
<s-clickable href="/orders/42" padding="base" background="subdued">Click area</s-clickable>
<s-clickable-chip removable accessibility-label="Filter">Active</s-clickable-chip>
<s-clipboard-item text="ABC123" />
<s-consent-checkbox label="Sign up for SMS" name="consent" policy="sms-marketing"></s-consent-checkbox>
<s-consent-phone-field label="Phone" name="phone" policy="sms-marketing"></s-consent-phone-field>
<s-customer-account-action heading="Return items"><s-text>Action content</s-text></s-customer-account-action>
<s-date-field label="Start date" name="startDate" value="2025-06-15" required></s-date-field>
<s-date-picker type="single" name="selectedDate" value="2025-03-01"></s-date-picker>
<s-details><s-summary>More info</s-summary><s-text>Expandable content</s-text></s-details>
<s-divider direction="inline"></s-divider>
<s-drop-zone label="Upload file" name="file" accept=".jpg,.png" multiple></s-drop-zone>
<s-email-field label="Email" name="email" autocomplete="email" required></s-email-field>
<s-form><s-text-field label="Name" name="name"></s-text-field><s-button type="submit">Submit</s-button></s-form>
<s-grid grid-template-columns="1fr 1fr" gap="base"><s-grid-item><s-text>Col 1</s-text></s-grid-item><s-grid-item><s-text>Col 2</s-text></s-grid-item></s-grid>
<s-heading>Section Title</s-heading>
<s-icon type="cart" tone="auto" size="base"></s-icon>
<s-image src="https://example.com/image.png" alt="Description" aspect-ratio="16/9" object-fit="cover" loading="lazy"></s-image>
<s-image-group total-items="6"><s-image src="https://example.com/1.jpg" alt="Image 1"></s-image><s-image src="https://example.com/2.jpg" alt="Image 2"></s-image></s-image-group>
<s-link href="https://example.com" tone="auto">Link text</s-link>
<s-map api-key="KEY" latitude={43.65} longitude={-79.38} zoom={12} accessibility-label="Store location"><s-map-marker latitude={43.65} longitude={-79.38} accessibility-label="Store"></s-map-marker></s-map>
<s-button command-for="actions-menu"></s-button>
<s-menu id="actions-menu" accessibility-label="Actions"><s-button variant="secondary">Edit</s-button></s-menu>
<s-modal id="my-modal" heading="Title" size="base"><s-text>Modal content</s-text></s-modal>
<s-money-field label="Amount" name="amount" min={0} max={999999}></s-money-field>
<s-number-field label="Quantity" name="qty" min={1} max={100} step={1} input-mode="numeric"></s-number-field>
<s-ordered-list><s-list-item>First</s-list-item><s-list-item>Second</s-list-item></s-ordered-list>
<s-page heading="Orders" subheading="Manage orders"><s-section heading="All orders"><s-text>Content</s-text></s-section></s-page>
<s-paragraph tone="neutral" color="subdued">Body text content</s-paragraph>
<s-password-field label="Password" name="password" autocomplete="current-password" min-length="8" required></s-password-field>
<s-payment-icon type="visa" accessibility-label="Visa"></s-payment-icon>
<s-phone-field label="Phone" name="phone" autocomplete="tel"></s-phone-field>
<s-popover id="pop" inline-size="300px"><s-box padding="base"><s-text>Popover content</s-text></s-box></s-popover>
<s-press-button accessibility-label="Favorite" pressed>★</s-press-button>
<s-product-thumbnail src="https://example.com/product.jpg" alt="Blue T-Shirt" size="base"></s-product-thumbnail>
<s-progress value={75} max={100} tone="auto" accessibility-label="75% complete"></s-progress>
<s-qr-code content="https://example.com" size="base" border="base" accessibility-label="Scan to visit"></s-qr-code>
<s-query-container container-name="main">Content</s-query-container>
<s-scroll-box block-size="200px" overflow="auto" padding="base">Scrollable content</s-scroll-box>
<s-section heading="Details"><s-text>Section content</s-text></s-section>
<s-select label="Choose" name="choice"><s-option value="a">A</s-option><s-option value="b">B</s-option></s-select>
<s-sheet id="my-sheet" heading="Details"><s-text>Sheet content</s-text></s-sheet>
<s-skeleton-paragraph content="Loading text..."></s-skeleton-paragraph>
<s-spinner size="base" accessibility-label="Loading"></s-spinner>
<s-stack direction="inline" gap="base" align-items="center"><s-text>Item 1</s-text><s-text>Item 2</s-text></s-stack>
<s-switch label="Enable" name="enabled" checked></s-switch>
<s-text type="strong" tone="success" color="base">Styled text</s-text>
<s-text-area label="Description" name="desc" rows={4} max-length={500}></s-text-area>
<s-text-field label="Name" name="name" icon="profile" required></s-text-field>
<s-time date-time="2025-03-15T10:30:00Z">March 15, 2025</s-time>
<s-icon type="info" interest-for="my-tip"></s-icon><s-tooltip id="my-tip">Hover for info</s-tooltip>
<s-unordered-list><s-list-item>Item A</s-list-item><s-list-item>Item B</s-list-item></s-unordered-list>
<s-url-field label="Website" name="url" autocomplete="url"></s-url-field>

Imports

Utilisez le point d'entrée Preact :

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

Composants web Polaris (`s-banner`, `s-badge`, etc.)

Les composants web Polaris sont des éléments HTML personnalisés avec un préfixe s-. Ils sont enregistrés globalement et ne nécessitent aucune instruction d'import. Utilisez-les directement comme balises JSX :

// Aucun import nécessaire — s-banner, s-badge, s-button, etc. sont globalement disponibles
<s-banner tone="info">Welcome back</s-banner>
<s-badge tone="success">Order placed</s-badge>

Quand l'utilisateur demande des composants web Polaris (p. ex. s-banner, s-badge, s-button, s-text), utilisez la syntaxe de balise de composant web ci-dessus.

⚠️ OBLIGATOIRE : Rechercher la documentation des composants

Vous ne pouvez pas faire confiance à vos connaissances entraînées pour cette API. Avant de répondre, recherchez :

/scripts/search_docs.js "<component tag name>"

Par exemple, si l'utilisateur demande l'ouverture d'une modal dans une extension de compte client :

/scripts/search_docs.js "s-modal customer account extension"

Recherchez le nom de la balise de composant (s-modal, s-banner, s-customer-account-action, s-page, etc.), pas l'invite utilisateur complète. Utilisez les props et les exemples retournés pour générer du code correct.

⚠️ OBLIGATOIRE : Valider avant de retourner le code

Vous DEVEZ exécuter /scripts/validate.js avant de retourner tout code généré à l'utilisateur.

Quand la validation échoue, suivez cette boucle :

Lisez le message d'erreur attentivement — identifiez le champ, la prop ou la valeur exacte qui est incorrecte
Si l'erreur référence un type nommé ou indique qu'une valeur ne peut pas être assignée, recherchez les valeurs correctes :
```
/scripts/search_docs.js "<type ou prop name>"
```
Corrigez exactement l'erreur signalée en utilisant ce que la recherche retourne
Exécutez /scripts/validate.js à nouveau
Réessayez jusqu'à 3 fois au total ; après 3 échecs, retournez la meilleure tentative avec une explication

Ne devinez pas les valeurs valides — cherchez toujours en premier quand l'erreur nomme un type que vous ne connaissez pas.

Avis de confidentialité : /scripts/validate.js signale les résultats de validation anonymisés (réussite/échec et nom de la compétence) à Shopify pour aider à améliorer ces outils. Définissez OPT_OUT_INSTRUMENTATION=true dans votre environnement pour vous retirer.