--- title: Intents API description: >- The Intents API launches Shopify's native admin interfaces for creating and editing resources. When your extension calls an intent, merchants complete their changes using the standard admin UI, and your extension receives the result. api_version: 2026-04-rc source_url: html: >- https://shopify.dev/docs/api/admin-extensions/2026-04-rc/target-apis/utility-apis/intents-api md: >- https://shopify.dev/docs/api/admin-extensions/2026-04-rc/target-apis/utility-apis/intents-api.md --- # Intents API **Requires an admin UI \[block or action]\(/docs/api/admin-extensions/2026-04-rc#building-your-extension) extension.:** The Intents API launches Shopify's native admin interfaces for creating and editing resources. When your extension calls an intent, merchants complete their changes using the standard admin UI, and your extension receives the result. This means you don't need to build custom forms. Use this API to build workflows like adding products to collections from bulk actions, creating multiple related resources in sequence (like a product, collection, and discount for a promotion), opening specific resources for editing from custom buttons, or launching discount creation with pre-selected types. ### Use cases * **Extension communication:** Enable communication between extensions through intents. * **Navigation triggers:** Handle navigation requests from other extensions. * **Workflow coordination:** Coordinate workflows across multiple extensions. * **Deep linking:** Support deep linking and cross-extension navigation. ### invoke method The `invoke` method launches a Shopify admin workflow for creating or editing resources. The method returns a promise that resolves to an activity handle you can await to get the workflow result. The method accepts either: * **String query:** `${action}:${type},${value}` with optional second parameter (`IntentQueryOptions`) * **Object:** Properties for `action`, `type`, `value`, and `data` ### IntentQueryOptions parameters Optional parameters for the `invoke` method when using the string query format: * **`value`** (`string`): The resource identifier for edit operations (for example, `'gid://shopify/Product/123'`). Required when editing existing resources. Omit for create operations. * **`data`** (`{ [key: string]: unknown }`): Additional context required by specific resource types. For example, discounts require a type, variants require a product ID, and metaobjects require a definition type. ### Supported resources The following tables show which resource types you can create or edit, and what values you need to pass for `value` and `data` for each operation. #### Article [Articles](https://shopify.dev/docs/api/admin-graphql/latest/objects/Article) are blog posts published on the Online Store. Use this to create or edit articles for merchant blogs. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Article` | — | — | | `edit` | `shopify/Article` | `gid://shopify/Article/{id}` | — | #### Catalog [Catalogs](https://shopify.dev/docs/api/admin-graphql/latest/interfaces/Catalog) are product groupings that organize products for different markets or channels. Use this to create or edit catalogs for B2B or multi-market selling. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Catalog` | — | — | | `edit` | `shopify/Catalog` | `gid://shopify/Catalog/{id}` | — | #### Collection [Collections](https://shopify.dev/docs/api/admin-graphql/latest/objects/Collection) are groups of products organized manually or by automated rules. Use this to create or edit product collections. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Collection` | — | — | | `edit` | `shopify/Collection` | `gid://shopify/Collection/{id}` | — | #### Customer [Customers](https://shopify.dev/docs/api/admin-graphql/latest/objects/Customer) are profiles with contact information, order history, and metadata. Use this to create or edit customer accounts. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Customer` | — | — | | `edit` | `shopify/Customer` | `gid://shopify/Customer/{id}` | — | #### Delivery profile [Delivery profiles](https://shopify.dev/docs/api/admin-graphql/latest/objects/DeliveryProfile) define shipping rates and rules for products across locations and zones. Use this to create or edit shipping configurations for different product groups. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/DeliveryProfile` | — | — | | `edit` | `shopify/DeliveryProfile` | `gid://shopify/DeliveryProfile/{id}` | — | #### Discount [Discounts](https://shopify.dev/docs/api/admin-graphql/latest/objects/DiscountNode) are price reductions applied to products, orders, or shipping. Use this to create or edit discount codes and automatic discounts. Creating discounts requires specifying a discount type. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Discount` | — | `{ type: 'amount-off-product' \| 'amount-off-order' \| 'buy-x-get-y' \| 'free-shipping' }` | | `edit` | `shopify/Discount` | `gid://shopify/Discount/{id}` | — | #### Location [Locations](https://shopify.dev/docs/api/admin-graphql/latest/objects/Location) are physical or virtual places where merchants store inventory and fulfill orders. Use this to create or edit locations for managing stock and fulfillment. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Location` | — | — | | `edit` | `shopify/Location` | `gid://shopify/Location/{id}` | — | #### Market [Markets](https://shopify.dev/docs/api/admin-graphql/latest/objects/Market) are geographic regions with customized pricing, languages, and domains. Use this to create or edit markets for international selling. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Market` | — | — | | `edit` | `shopify/Market` | `gid://shopify/Market/{id}` | — | #### Menu [Menus](https://shopify.dev/docs/api/admin-graphql/latest/objects/Menu) are navigation structures for the Online Store. Use this to create or edit menu structures and links. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Menu` | — | — | | `edit` | `shopify/Menu` | `gid://shopify/Menu/{id}` | — | #### Metafield definition [Metafield definitions](https://shopify.dev/docs/api/admin-graphql/latest/objects/MetafieldDefinition) are schemas that define custom data fields for resources. Use this to create or edit metafield definitions that merchants can use to add structured data to products, customers, and other resources. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/MetafieldDefinition` | — | `{ ownerType: 'Product' }` | | `edit` | `shopify/MetafieldDefinition` | `gid://shopify/MetafieldDefinition/{id}` | `{ ownerType: 'Product' }` | #### Metaobject [Metaobjects](https://shopify.dev/docs/api/admin-graphql/latest/objects/Metaobject) are custom structured data entries based on metaobject definitions. Use this to create or edit metaobject instances that store complex custom data. Requires a definition type. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Metaobject` | — | `{ type: 'shopify--color-pattern' }` | | `edit` | `shopify/Metaobject` | `gid://shopify/Metaobject/{id}` | `{ type: 'shopify--color-pattern' }` | #### Metaobject definition [Metaobject definitions](https://shopify.dev/docs/api/admin-graphql/latest/objects/MetaobjectDefinition) are schemas that define the structure for metaobjects. Use this to create or edit metaobject definitions that determine the fields and data types for custom structured data. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/MetaobjectDefinition` | — | — | | `edit` | `shopify/MetaobjectDefinition` | — | `{ type: 'my_metaobject_definition_type' }` | #### Page [Pages](https://shopify.dev/docs/api/admin-graphql/latest/objects/Page) are static content pages for the Online Store. Use this to create or edit pages like About Us, Contact, or custom informational pages. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Page` | — | — | | `edit` | `shopify/Page` | `gid://shopify/Page/{id}` | — | #### Product [Products](https://shopify.dev/docs/api/admin-graphql/latest/objects/Product) are items sold in the store with pricing, inventory, and variants. Use this to create or edit products. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/Product` | — | — | | `edit` | `shopify/Product` | `gid://shopify/Product/{id}` | — | #### Product variant [Product variants](https://shopify.dev/docs/api/admin-graphql/latest/objects/ProductVariant) are specific combinations of product options like size and color. Use this to create or edit product variants. Creating variants requires a parent product ID. | Action | Type | Value | Data | | - | - | - | - | | `create` | `shopify/ProductVariant` | — | `{ productId: 'gid://shopify/Product/{id}' }` | | `edit` | `shopify/ProductVariant` | `gid://shopify/ProductVariant/{id}` | `{ productId: 'gid://shopify/Product/{id}' }` | **Note:** When editing products with variants, query the \\\product.has\Only\Default\Variant\\\ field first. If \true\, then use the \\shopify\/Product\\ edit intent. If \false\, then use the \\shopify\/Product\Variant\\ edit intent for specific variants. #### Settings Settings are the configuration options for the store. Use this to invoke and edit settings. | Action | Type | Value | Data | | - | - | - | - | | `edit` | `settings/GiftCardExpiration` | — | — | | `edit` | `settings/LocationDefault` | — | — | | `edit` | `settings/NotificationsSenderEmail` | — | — | | `edit` | `settings/NotificationsStaff` | — | — | | `edit` | `settings/OrderIdFormat` | — | — | | `edit` | `settings/OrderProcessing` | — | — | | `edit` | `settings/PaymentCaptureMethod` | — | — | | `edit` | `settings/StoreDefaults` | — | — | | `edit` | `settings/StoreDetails` | — | — | * **export interface IntentInvokeApi { (query: IntentQuery): Promise; (intentURL: string, options?: IntentQueryOptions): Promise; }** ### Intent​Response The result returned when an intent workflow completes. Check the `code` property to determine the outcome: * `'ok'`: The merchant completed the workflow successfully. * `'error'`: The workflow failed due to validation or other errors. * `'closed'`: The merchant cancelled without completing. **`SuccessIntentResponse | ErrorIntentResponse | ClosedIntentResponse`** ### ClosedIntentResponse * **code** **'closed'** Indicates the workflow was closed without completion. When `'closed'`, the merchant exited the workflow before finishing. ### ErrorIntentResponse * **code** **'error'** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. * **issues** **{ path?: string\[]; message?: string; code?: string; }\[]** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. * **message** **string** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. ### SuccessIntentResponse * **code** **'ok'** Indicates successful completion. When `'ok'`, the merchant completed the workflow and the resource was created or updated. * **data** **{ \[key: string]: unknown; }** Additional data returned by the workflow, such as the created or updated resource information with IDs and properties. ### SuccessIntentResponse The response returned when a merchant successfully completes the workflow. Use this to access the created or updated resource data. * code Indicates successful completion. When \`'ok'\`, the merchant completed the workflow and the resource was created or updated. ```ts 'ok' ``` * data Additional data returned by the workflow, such as the created or updated resource information with IDs and properties. ```ts { [key: string]: unknown; } ``` ### ErrorIntentResponse The response returned when the workflow fails due to validation errors or other issues. Use this to display error messages and help merchants fix problems. * code Indicates the workflow failed. When \`'error'\`, the workflow encountered validation errors or other issues that prevented completion. ```ts 'error' ``` * issues Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. ```ts { path?: string[]; message?: string; code?: string; }[] ``` * message A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. ```ts string ``` ### ClosedIntentResponse The response returned when a merchant closes or cancels the workflow without completing it. Check for this response to handle cancellation gracefully in your extension. * code Indicates the workflow was closed without completion. When \`'closed'\`, the merchant exited the workflow before finishing. ```ts 'closed' ``` Examples ## Preview ![Launch the article creation workflow from a button click. This example uses \`shopify.intents.invoke()\` to open the article editor, awaits the workflow completion, and displays success or cancellation feedback based on the response code.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/admin/apis/intents-bqfuEvyn.png) ### Examples * #### ##### Description Launch the article creation workflow from a button click. This example uses \`shopify.intents.invoke()\` to open the article editor, awaits the workflow completion, and displays success or cancellation feedback based on the response code. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [creating, setCreating] = useState(false); const handleCreate = async () => { setCreating(true); const activity = await shopify.intents.invoke('create:shopify/Article'); const response = await activity.complete; setResult(response); setCreating(false); }; return ( {creating ? 'Creating...' : 'Launch Article Creator'} {result?.code === 'ok' && ( Article created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the article editor for a selected blog post. This example retrieves the article GID from extension context, passes it to the edit intent, and handles both successful updates and cancellations. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Article/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Article', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Article'} {result?.code === 'ok' && ( Article updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the catalog creation workflow to set up B2B customer groups or market-specific product collections. This example invokes the create intent, manages loading state, and displays success or cancellation feedback. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Catalog'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Catalog Creator'} {result?.code === 'ok' && ( Catalog created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the catalog editor to adjust product assignments or market settings. This example retrieves the catalog GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Catalog/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Catalog', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Catalog'} {result?.code === 'ok' && ( Catalog updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the collection creation workflow for organizing products on the storefront. This example invokes the create intent, tracks loading state, and displays feedback when the workflow completes. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Collection'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Collection Creator'} {result?.code === 'ok' && ( Collection created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the collection editor to modify products or automation rules. This example retrieves the collection GID, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Collection/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Collection', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Collection'} {result?.code === 'ok' && ( Collection updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the customer creation form to add a new profile with contact details and addresses. This example invokes the create intent, awaits completion, and displays feedback based on the result code. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Customer'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Customer Creator'} {result?.code === 'ok' && ( Customer created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the customer editor to update contact information or tags. This example retrieves the customer GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Customer/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Customer', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Customer'} {result?.code === 'ok' && ( Customer updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### Create a new delivery profile ##### Description Launch the delivery profile creation workflow to configure shipping rates, zones, and product assignments. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/DeliveryProfile'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Delivery Profile Creator'} {result?.code === 'ok' && ( Delivery profile created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Create Delivery Profile'); const button = document.createElement('s-button'); button.textContent = 'Launch Delivery Profile Creator'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Creating...'; const activity = await shopify.intents.invoke('create:shopify/DeliveryProfile'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Delivery profile created successfully!'; root.appendChild(banner); } else if (response.code === 'closed') { const text = document.createElement('s-text'); text.textContent = 'Creation cancelled'; root.appendChild(text); } button.disabled = false; button.textContent = 'Launch Delivery Profile Creator'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit an existing delivery profile ##### Description Open the delivery profile editor to adjust shipping rates, zones, or product assignments. This example retrieves the delivery profile GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/DeliveryProfile/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/DeliveryProfile', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Delivery Profile'} {result?.code === 'ok' && ( Delivery profile updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const {data} = shopify; const resourceId = data.selected[0]?.id || 'gid://shopify/DeliveryProfile/123456789'; const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Delivery Profile'); const text = document.createElement('s-text'); text.textContent = `Editing: ${resourceId}`; root.appendChild(text); const button = document.createElement('s-button'); button.textContent = 'Edit Delivery Profile'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:shopify/DeliveryProfile', { value: resourceId, }); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Delivery profile updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Delivery Profile'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### ##### Description Launch the discount creation form for setting up promotional campaigns. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Discount'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Discount Creator'} {result?.code === 'ok' && ( Discount created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the discount editor to adjust values or extend active dates. This example retrieves the discount GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Discount/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Discount', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Discount'} {result?.code === 'ok' && ( Discount updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### Create a new location ##### Description Launch the location creation workflow to add a new physical or virtual fulfillment location. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Location'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Location Creator'} {result?.code === 'ok' && ( Location created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Create Location'); const button = document.createElement('s-button'); button.textContent = 'Launch Location Creator'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Creating...'; const activity = await shopify.intents.invoke('create:shopify/Location'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Location created successfully!'; root.appendChild(banner); } else if (response.code === 'closed') { const text = document.createElement('s-text'); text.textContent = 'Creation cancelled'; root.appendChild(text); } button.disabled = false; button.textContent = 'Launch Location Creator'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit an existing location ##### Description Open the location editor to update address details, fulfillment settings, or inventory tracking. This example retrieves the location GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Location/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Location', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Location'} {result?.code === 'ok' && ( Location updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const {data} = shopify; const resourceId = data.selected[0]?.id || 'gid://shopify/Location/123456789'; const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Location'); const text = document.createElement('s-text'); text.textContent = `Editing: ${resourceId}`; root.appendChild(text); const button = document.createElement('s-button'); button.textContent = 'Edit Location'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:shopify/Location', { value: resourceId, }); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Location updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Location'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### ##### Description Launch the market creation workflow for international selling with region-specific configurations. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Market'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Market Creator'} {result?.code === 'ok' && ( Market created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the market editor to adjust geographic coverage or pricing strategies. This example retrieves the market GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Market/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Market', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Market'} {result?.code === 'ok' && ( Market updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the menu creation workflow for storefront navigation headers or footers. This example invokes the create intent, tracks loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Menu'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Menu Creator'} {result?.code === 'ok' && ( Menu created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the menu editor to reorganize navigation structure or update links. This example retrieves the menu GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Menu/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Menu', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Menu'} {result?.code === 'ok' && ( Menu updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the metafield definition creator to add custom data fields to products, orders, or customers. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/MetafieldDefinition'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Metafield Definition Creator'} {result?.code === 'ok' && ( Metafield Definition created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the metafield definition editor to modify validation rules or field descriptions. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/MetafieldDefinition/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/MetafieldDefinition', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Metafield Definition'} {result?.code === 'ok' && ( Metafield Definition updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the metaobject creator to add a new entry to a custom content type. This example invokes the create intent, tracks loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Metaobject'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Metaobject Creator'} {result?.code === 'ok' && ( Metaobject created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the metaobject editor to modify field values or resource references. This example retrieves the metaobject GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Metaobject/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Metaobject', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Metaobject'} {result?.code === 'ok' && ( Metaobject updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the metaobject definition creator to build reusable content types with custom field schemas. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/MetaobjectDefinition'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Metaobject Definition Creator'} {result?.code === 'ok' && ( Metaobject Definition created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the metaobject definition editor to add fields or update validation rules. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/MetaobjectDefinition/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/MetaobjectDefinition', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Metaobject Definition'} {result?.code === 'ok' && ( Metaobject Definition updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the page creator to add an informational page like About Us or Shipping Policy. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/Page'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Page Creator'} {result?.code === 'ok' && ( Page created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the page editor to update content or SEO metadata. This example retrieves the page GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/Page/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/Page', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Page'} {result?.code === 'ok' && ( Page updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the product creation workflow to add a new item to the store catalog. This example invokes the create intent, tracks loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [creating, setCreating] = useState(false); const handleCreate = async () => { setCreating(true); const activity = await shopify.intents.invoke('create:shopify/Product'); const response = await activity.complete; setResult(response); setCreating(false); }; return ( {creating ? 'Creating...' : 'Launch Product Creator'} {result?.code === 'ok' && ( Product created: {result.data?.product?.id} )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### ##### Description Open the product editor to update details, pricing, or images. This example retrieves the product GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [editing, setEditing] = useState(false); const productId = data.selected[0]?.id || 'gid://shopify/Product/123456789'; const handleEdit = async () => { setEditing(true); const activity = await shopify.intents.invoke('edit:shopify/Product', { value: productId, }); const response = await activity.complete; setResult(response); setEditing(false); }; return ( Product: {productId} {editing ? 'Opening...' : 'Edit Product'} {result?.code === 'ok' && ( Product updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### ##### Description Launch the variant creation workflow to add size, color, or material options to a product. This example invokes the create intent, manages loading state, and displays feedback on completion. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('create:shopify/ProductVariant'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Creating...' : 'Launch Product Variant Creator'} {result?.code === 'ok' && ( Product Variant created successfully! )} {result?.code === 'closed' && ( Creation cancelled )} ); } ``` * #### Edit default location ##### Description Launch locations in Settings to update the default location of the store. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/LocationDefault'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Editing...' : 'Launch Default Location Editor'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit default location cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Default Location'); const button = document.createElement('s-button'); button.textContent = 'Launch Default Location Editor'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Editing...'; const activity = await shopify.intents.invoke('edit:settings/LocationDefault'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit default location cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Launch Default Location Editor'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit store details ##### Description Launch store details in Settings to update the store name, email, or phone number. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/StoreDetails'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Editing...' : 'Launch Store Details Editor'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit store details cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Store Details'); const button = document.createElement('s-button'); button.textContent = 'Launch Store Details Editor'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Editing...'; const activity = await shopify.intents.invoke('edit:settings/StoreDetails'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit store details cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Launch Store Details Editor'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit store defaults ##### Description Launch store defaults in Settings to update the store currency, timezone, or country. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/StoreDefaults'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Editing...' : 'Launch Store Defaults Editor'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit store defaults cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Store Defaults'); const button = document.createElement('s-button'); button.textContent = 'Launch Store Defaults Editor'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Editing...'; const activity = await shopify.intents.invoke('edit:settings/StoreDefaults'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit store defaults cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Launch Store Defaults Editor'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit Order ID Format ##### Description Launch order ID in Settings to update the format. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/OrderIdFormat'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Editing...' : 'Launch Order ID Format Editor'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit order ID format cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Order ID Format'); const button = document.createElement('s-button'); button.textContent = 'Launch Order ID Format Editor'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Editing...'; const activity = await shopify.intents.invoke('edit:settings/OrderIdFormat'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit order ID format cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Launch Order ID Format Editor'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit order processing ##### Description Launch order processing in Settings to update the order processing settings. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/OrderProcessing'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Editing...' : 'Launch Order Processing Editor'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit order processing cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Edit Order Processing'); const button = document.createElement('s-button'); button.textContent = 'Launch Order Processing Editor'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Editing...'; const activity = await shopify.intents.invoke('edit:settings/OrderProcessing'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit order processing cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Launch Order Processing Editor'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### ##### Description Open the variant editor to modify pricing, SKU, or inventory levels. This example retrieves the variant GID from extension context, invokes the edit intent, and handles the completion response. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const {data} = shopify; const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const resourceId = data.selected[0]?.id || 'gid://shopify/ProductVariant/123456789'; const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:shopify/ProductVariant', { value: resourceId, }); const response = await activity.complete; setResult(response); setLoading(false); }; return ( Editing: {resourceId} {loading ? 'Opening...' : 'Edit Product Variant'} {result?.code === 'ok' && ( Product Variant updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` * #### Edit gift card expiration ##### Description Launch gift card expiration in Settings to update the store's gift card expiration policy. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/GiftCardExpiration'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Opening...' : 'Edit Gift Card Expiration'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Gift Card Expiration'); const button = document.createElement('s-button'); button.textContent = 'Edit Gift Card Expiration'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:settings/GiftCardExpiration'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Gift Card Expiration'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit payment capture method ##### Description Launch payment capture method in Settings to update how the store captures payments. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/PaymentCaptureMethod'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Opening...' : 'Edit Payment Capture Method'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Payment Capture Method'); const button = document.createElement('s-button'); button.textContent = 'Edit Payment Capture Method'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:settings/PaymentCaptureMethod'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Payment Capture Method'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit notifications sender email ##### Description Launch notifications sender email in Settings to update the email address used for customer notifications. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/NotificationsSenderEmail'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Opening...' : 'Edit Sender Email'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Notifications Sender Email'); const button = document.createElement('s-button'); button.textContent = 'Edit Sender Email'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:settings/NotificationsSenderEmail'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Sender Email'; }); root.appendChild(button); document.body.appendChild(root); }; ``` * #### Edit staff notifications ##### Description Launch staff notifications in Settings to update notification preferences for staff members. ##### jsx ```tsx import {render} from 'preact'; import {useState} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const handleAction = async () => { setLoading(true); const activity = await shopify.intents.invoke('edit:settings/NotificationsStaff'); const response = await activity.complete; setResult(response); setLoading(false); }; return ( {loading ? 'Opening...' : 'Edit Staff Notifications'} {result?.code === 'ok' && ( Settings updated! )} {result?.code === 'closed' && ( Edit cancelled )} ); } ``` ##### js ```js export default async () => { const root = document.createElement('s-admin-block'); root.setAttribute('heading', 'Staff Notifications'); const button = document.createElement('s-button'); button.textContent = 'Edit Staff Notifications'; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Opening...'; const activity = await shopify.intents.invoke('edit:settings/NotificationsStaff'); const response = await activity.complete; if (response.code === 'ok') { const banner = document.createElement('s-banner'); banner.setAttribute('tone', 'success'); banner.textContent = 'Settings updated!'; root.appendChild(banner); } else if (response.code === 'closed') { const cancel = document.createElement('s-text'); cancel.textContent = 'Edit cancelled'; root.appendChild(cancel); } button.disabled = false; button.textContent = 'Edit Staff Notifications'; }); root.appendChild(button); document.body.appendChild(root); }; ``` *** ## Best practices * **Parse `ErrorIntentResponse.issues` array for specific feedback:** When `code: 'error'`, the `issues` array contains structured validation errors with field paths and messages. Use this to show specific error feedback rather than generic error messages. * **Distinguish `closed` from `error`:** `code: 'closed'` means the merchant cancelled, while `code: 'error'` means validation or save failures. Handle these differently. Closed isn't an error state. * **Query `product.hasOnlyDefaultVariant` before editing:** If the value is `false`, use the `shopify/ProductVariant` edit intent instead of `shopify/Product` to edit specific variants. *** ## Limitations * Some resources require `data` for create operations. Discounts need `{ type: 'amount-off-product' }`, variants need `{ productId: 'gid://...' }`, and metaobjects need `{ type: 'definition-type' }`. Missing required data causes the intent to fail. * MetaobjectDefinition edit requires `{ data: { type: 'definition-type' }}` instead of passing the GID in `value`. It's the only resource with this pattern. * Intent workflows pause your extension until completion. You can't run other operations while an intent is open. * The workflow UI can't be customized. Field order, labels, and validation messages are controlled by Shopify and can't be modified. * Your extension only receives the final result. Intermediate workflow state and partial saves aren't communicated back to your extension. ***