When you [generate an app extension](/docs/api/shopify-cli/app/app-generate-extension), a TOML configuration file named `shopify.extension.toml` is automatically generated in your app's extension directory.
> Note:
> This guide describes the TOML file structure that only applies to [checkout UI](/docs/api/checkout-ui-extensions), [admin UI](/docs/api/admin-extensions), [customer account UI](/docs/api/customer-account-ui-extensions), [product configuration](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui), [Shopify Flow triggers](/docs/apps/build/flow/triggers), [Shopify Flow actions](/docs/apps/build/flow/actions), [Shopify Flow templates](/docs/apps/build/flow/templates), and [Shopify Functions](/docs/apps/build/functions) extensions.
>
> The TOML file structure for other extensions follow a different pattern:
>
> - [Post-purchase UI](/docs/api/checkout-extensions/post-purchase/configuration)
> - [Product subscription](/docs/apps/build/purchase-options/product-subscription-app-extensions/start-building)
> - [Web pixel](/docs/apps/build/marketing-analytics/build-web-pixels)
> - [Shopify POS UI](/docs/api/pos-ui-extensions/getting-started)
> - [Theme app extensions](/docs/apps/build/online-store/theme-app-extensions/build)
## How it works
[Shopify CLI](/docs/apps/build/cli-for-apps) builds and serves app extensions using information defined in a TOML file named `shopify.extension.toml`. The TOML file is located in a directory within the [`extensions/` directory](/docs/apps/build/cli-for-apps/app-structure#directory-structure) of your app project.
The following example shows a `shopify.extension.toml` file that contains configuration settings for a [checkout UI extension](/docs/api/checkout-ui-extensions).
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-04"
[[extensions]]
name = "My UI extension"
description = "A UI extension"
handle = "my-ui-extension"
type = "ui_extension"
[extensions.capabilities]
api_access = true
block_progress = true
network_access = true
[[extensions.targeting]]
module = "./src/CheckoutDynamicRender.js"
target = "purchase.checkout.block.render"
[[extensions.targeting.metafields]]
key = "my-key"
namespace = "my-namespace"
[settings]
[[settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner"
</script>
</div>
</p>
## Extension types
Some extensions require specific configurations. To accommodate this, Shopify CLI groups extensions into different types in the TOML file:
| Extension |`type` value in the TOML file | `--template` flag value in the generate command |
| --- | --- | --- |
| [Checkout UI](/docs/api/checkout-ui-extensions) |`ui_extension` | `checkout_ui` |
| [Customer account UI](/docs/api/customer-account-ui-extensions) |`ui_extension` | `customer_account_ui` |
| [Editor extension collection](/docs/apps/build/customer-accounts/editor-extension-collections)<br><span class="heading-flag heading-flag--new">Developer preview</span> |`editor_extension_collection` | `editor_extension_collection` |
| [Admin action](/docs/apps/build/admin/actions-blocks/build-admin-action) | `ui_extension` | `admin_action` |
| [Admin block](/docs/apps/build/admin/actions-blocks/build-admin-block) | `ui_extension` | `admin_block` |
| [Product configuration](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) | `ui_extension` | `product_configuration` |
| [Shopify Flow trigger](/docs/apps/build/flow/triggers) | `flow_trigger` | `flow_trigger` |
| [Shopify Flow action](/docs/apps/build/flow/actions) | `flow_action` | `flow_action` |
| [Shopify Flow template](/docs/apps/build/flow/templates) | `flow_template` | `flow_template` |
| [Order discount](/docs/api/functions/reference/order-discounts) | `function` | `order_discounts` |
| [Product discount](/docs/api/functions/reference/product-discounts) | `function` | `product_discounts` |
| [Shipping discount](/docs/api/functions/reference/shipping-discounts)<br><span class="heading-flag heading-flag--new">Developer preview</span> | `function` | `shipping_discounts` |
| [Discounts allocator](/docs/api/functions/reference/discounts-allocator)<br><span class="heading-flag heading-flag--new">Developer preview</span> | `function` | `discounts_allocator` |
| [Delivery customization](/docs/api/functions/reference/delivery-customization) | `function` | `delivery_customization` |
| [Payment customization](/docs/api/functions/reference/payment-customization) | `function` | `payment_customization` |
| [Order routing location rule](/docs/api/functions/reference/order-routing-location-rule)<br><span class="heading-flag heading-flag--new">Beta</span> | `function` | `order_routing_location_rule` |
| [Cart and checkout validation](/docs/api/functions/reference/cart-checkout-validation) | `function` |`cart_checkout_validation` |
| [Cart transform](/docs/api/functions/reference/cart-transform) | `function` | `cart_transform` |
| [Fulfillment constraints](/docs/api/functions/reference/fulfillment-constraints) | `function` | `fulfillment_constraints` |
## Targets
A target is an identifier in `shopify.extension.toml` that specifies where you're injecting code into Shopify APIs, or other parts of the Shopify platform.
Each target is composed of three to four namespaces. The name begins with a broad Shopify context and ends with the behavior of the extensible element. For example, a checkout UI extension that renders a shipping address form has a target named `purchase.checkout.delivery-address.render-before`:
- `purchase`: The broad Shopify context.
- `checkout`: The targeted page.
- `delivery-address`: The element that the extension will be positioned near.
- `render-before`: An action verb that describes the behavior of the extensible element.
### Supported targets
The following table provides links to documentation on the supported targets associated with each app extension type.
> Note:
> Shopify Flow triggers and actions don't support configurable targets.
| Extension type | Documentation on supported targets |
| --- | --- |
| Checkout UI | [Checkout UI targets](/docs/api/checkout-ui-extensions/current/targets) |
| Customer account UI | [Customer Account UI targets](/docs/api/customer-account-ui-extensions/targets) |
| Admin UI | [Admin UI targets](/docs/api/admin-extensions/extension-targets) |
| Product configuration | Product configuration app extensions use the [admin.product-details.configuration.render](/docs/api/admin-extensions/extension-targets#extensiontargets-propertydetail-adminproductdetailsconfigurationrender) or [admin.product-variant-details.configuration.render](/docs/api/admin-extensions/extension-targets#extensiontargets-propertydetail-adminproductvariantdetailsconfigurationrender) target. |
| Shopify Functions | [Shopify function APIs and targets](/docs/api/functions#available-apis)<br><br>The available targets depend on the Function APIs that you're using. |
## Common properties
This section describes the configuration settings in `shopify.extension.toml` that are common to [checkout UI extensions](/docs/apps/build/checkout/technologies), [admin UI](/docs/api/admin-extensions), [product configuration](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui), [Shopify Flow triggers](/docs/apps/build/flow/triggers), [Shopify Flow actions](/docs/apps/build/flow/actions), [Shopify Flow templates](/docs/apps/build/flow/templates), and [Shopify Functions](/docs/apps/build/functions) extensions.
| Property | Description |
|---|---|
| `api_version`<br><span class="heading-flag">Required</span> | The version of the API that's being used for the extension. If provided in the `[[extensions]]` array, then the specified API version is used instead of the root level `api_version`. |
| `[[extensions]]`<br><span class="heading-flag">Required</span> | The name of the array that contains all extensions listed in the TOML file. Contains the following properties:<br></br><ul><li>`name`:<span class="heading-flag">Required</span> The merchant-facing name of the extension. After you [generate an extension](/docs/api/shopify-cli/app/app-generate-extension), you're prompted to provide a name for your extension.<br></br>The `name` property is translatable if it starts with a `t:` and uses a key defined in your translation data. For example, you might have a `t:name` key that matches a translation key called `name`. [Learn more about localization](/docs/apps/build/checkout/localized-checkout-ui-extensions#how-it-works). <br></br><b>Limitations:</b><ul><li>Supports any characters. Shopify Flow actions and Shopify Flow triggers extensions can only include alphanumeric characters and spaces.</li><li>5 characters minimum</li><li>30 characters maximum</li></ul></li><li>`description`:<span class="heading-flag">Required</span> The merchant-facing description of the extension. <br></br>The `description` property is translatable if it starts with a `t:` and uses a key defined in your translation data. For example, `t:description` and you have a matching translation key called `description`. [Learn more about localization](/docs/apps/build/checkout/localized-checkout-ui-extensions#how-it-works).</li><li>`handle`:<span class="heading-flag">Required</span> The unique internal identifier for the extension.<br></br> After you create a draft version of the extension, or deploy an extension, you can't change the `handle` value.<br></br>If not specified, the `handle` value is automatically populated using a transformed `name` value that removes any unsupported characters. For example, if you enter `google maps` as the extension name, then Shopify populates the `handle` value as `google-maps`.<br></br><b>Limitations:</b><ul><li>Allowed characters: `a-z`, `A-Z`, `0-9`, `-`</li><li>100 characters maximum</li><li>Must be unique within the app</li></ul></li><li>`type`:<span class="heading-flag">Required</span> The extension type. For more information, refer to [Extension types](#extension-types).</li></ul> |
| `[settings]`<br><span class="heading-flag">Optional</span> | The name of the array that defines settings that a merchant can set values for. If provided in the `[[extensions]]` array, then the specified settings are used instead of the root level `settings`. |
| `[[settings.fields]]`<br><span class="heading-flag">Optional</span> | The name of the array that contains the [settings fields](/docs/api/checkout-ui-extensions/latest/configuration#settings-definition). |
| `[[extensions.targeting]]`<br><span class="heading-flag">Required</span> | The name of the array that contains a target and path to the related extension code. Contains the following required properties:<br></br><ul><li>`target`:<span class="heading-flag">Required</span> An identifier that specifies where you're injecting code into Shopify APIs, or other parts of the Shopify platform. For more information, refer to [Targets](#targets).</li><li>`module`:<span class="heading-flag">Required</span> The file that contains the extension code.</li></ul> |
## Extension-specific properties
This section describes the configuration settings in `shopify.extension.toml` that are specific to the following extensions:
- [Checkout UI extensions](#checkout-ui-extensions)
- [Customer account UI extensions](#customer-account-ui-extensions)
- [Editor extension collection](#editor-extension-collection)
- [Admin UI extensions](#admin-ui-extensions)
- [Product configuration extensions](#product-configuration-extensions)
- [Shopify Flow actions](#shopify-flow-actions)
- [Shopify Flow triggers](#shopify-flow-triggers)
- [Shopify Flow templates](#shopify-flow-templates)
- [Shopify Functions extensions](#shopify-functions-extensions)
### Checkout UI extensions
The following example TOML file contains configuration settings for a [checkout UI extension](/docs/api/checkout-ui-extensions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-04"
[[extensions]]
name = "My UI extension"
description = "A UI extension"
handle = "my-ui-extension"
type = "ui_extension"
[extensions.capabilities]
api_access = true
block_progress = true
network_access = true
[[extensions.targeting]]
module = "./src/CheckoutDynamicRender.js"
target = "purchase.checkout.block.render"
default_placement = "WALLETS1"
[[extensions.targeting.metafields]]
key = "my-key"
namespace = "my-namespace"
[settings]
[[settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner"
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to checkout UI extensions:
| Property | Description |
|---|---|
| `[extensions.capabilities]`<br><span class="heading-flag">Optional</span> | The name of the array that contains the checkout UI extension's capabilities:<ul><li>`api_access`:<span class="heading-flag">Optional</span> Whether your app extension can [query the Storefront API](/docs/api/checkout-ui-extensions/latest/configuration#api-access).</li><li>`block_progress`:<span class="heading-flag">Optional</span> Whether your app extension can [block the customer's progress](/docs/api/checkout-ui-extensions/latest/configuration#block-progress).</li><li>`network_access`:<span class="heading-flag">Optional</span> Whether your app extension can make [external network calls](/docs/api/checkout-ui-extensions/latest/configuration#network-access).</li></ul> |
| `[extensions.metafields]`<br><span class="heading-flag">Optional</span> | An array that sets the default for each `[[extensions.targeting.metafields]]`, if `[[extensions.targeting.metafields]]` isn't specified. |
| `[[extensions.targeting.metafields]]`<br><span class="heading-flag">Optional</span> | The [metafields](/docs/api/checkout-ui-extensions/latest/targets/block/purchase-thank-you-block-render#standardapi-propertydetail-metafields) that your extension target needs to read:<ul><li>`key`:<span class="heading-flag">Optional</span> The name for the metafield.</li><li>`namespace`:<span class="heading-flag">Optional</span> A container for a group of metafields. Grouping metafields within a namespace prevents your metafields from conflicting with other metafields with the same key name.</li></ul> You can specify up to five `key` and `namespace` pairs in the configuration file. When the extension is executed, Shopify looks for the metafields in each resource and returns their contents. |
| `[[extensions.targeting.default_placement]]`<br><span class="heading-flag">Optional</span> | Defines which location of a block extension target an extension is placed in when added. After adding the extension, the merchant can move it to other locations. Value must be one of the [checkout placements](/docs/apps/build/checkout/test-checkout-ui-extensions#block-targets) for the block extension target.
|
### Customer account UI extensions
The following example TOML files contain configuration settings for [a static and a full page extension](/docs/api/customer-account-ui-extensions/extension-targets-overview). The properties in the TOML files are similar to [checkout UI extensions](#checkout-ui-extensions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-07"
[[extensions]]
type = "ui_extension"
name = "customer-account-ui"
handle = "customer-account-ui"
[[extensions.targeting]]
module = "./src/CustomerAccountOrderIndexExtension.tsx"
target = "customer-account.order-index.block.render"
default_placement = "ORDER_INDEX"
[[extensions.targeting]]
module = "./src/CustomerAccountExtensionFullPage.tsx"
target = "customer-account.page.render"
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to customer account UI extensions:
| Property | Description |
|---|---|
| `[extensions.capabilities]`<br><span class="heading-flag">Optional</span> | The name of the array that contains the checkout UI extension's capabilities:<ul><li>`api_access`: Whether your app extension can [query the Storefront API](/docs/api/customer-account-ui-extensions/configuration#api-access).</li><li>`network_access`: Whether your app extension can make [external network calls](/docs/api/customer-account-ui-extensions/configuration#network-access).</li></ul> |
| `[extensions.metafields]`<br><span class="heading-flag">Optional</span>| An array that sets the default for each `[[extensions.targeting.metafields]]`, if `[[extensions.targeting.metafields]]` isn't specified. |
| `[[extensions.targeting.metafields]]`<br><span class="heading-flag">Optional</span> | The [metafields](/docs/api/customer-account-ui-extensions/latest/targets/order-status/customer-account-order-status-block-render#orderstatusapi-propertydetail-metafields) that your extension target needs to read:<ul><li>`key`: The name for the metafield.</li><li>`namespace`: A container for a group of metafields. Grouping metafields within a namespace prevents your metafields from conflicting with other metafields with the same key name.</li></ul> You can specify up to five `key` and `namespace` pairs in the configuration file. When the extension is executed, Shopify looks for the metafields in each resource and returns their contents. |
| `[[extensions.targeting.default_placement]]`<br><span class="heading-flag">Optional</span> | Defines which location of a block extension target an extension is placed in when added. After adding the extension, the merchant can move it to other locations. Value must be one of the [customer account placements](/docs/apps/build/customer-accounts/extension-placement#define-default-placement) for the block extension target.|
### Editor extension collection
The following example TOML files contain configuration settings for an [editor extension collection](/docs/apps/build/customer-accounts/editor-extension-collections):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
[[extensions]]
name = "t:collection_name"
type = "editor_extension_collection"
handle = "editor-extension-collection"
includes=["customer-account-ui", "checkout-ui-extension"]
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to editor extension collections:
| Property | Required? | Description |
|---|---|---|
| `[extensions.includes]` | Yes | An array that sets the supported extensions that belong in the editor extension collection. <br></br><b>Limitations:</b><ul><li>Currently, can only contain customer account UI and checkout UI extensions.</li><li>Must contain two or more extensions.</li> |
### Admin UI extensions
The following example TOML files contain configuration settings for [an action and a block extension](/docs/apps/build/admin/actions-blocks). The properties in the TOML files are similar to [checkout UI extensions](#checkout-ui-extensions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-04"
[[extensions]]
name = "My feature"
handle = "action-extension"
type = "ui_extension"
[[extensions.targeting]]
module = "actionExtension.jsx"
target = "admin.product.item.action.render"
</script>
</div>
</p>
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-04"
[[extensions]]
name = "My block extension"
handle = "block-extension"
type = "ui_extension"
[[extensions.targeting]]
module = "blockExtension.jsx"
target = "admin.product.item.block.render"
</script>
</div>
</p>
### Product configuration extensions
The following example TOML file contains configuration settings for a [product configuration extension](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui). The properties in the TOML file are similar to a [checkout UI extension](#checkout-ui-extensions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-07"
[[extensions]]
name = "My product config extension"
handle = "my-product-config-extension"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/ProductDetailsConfigurationExtension.tsx"
target = "admin.product-details.configuration.render"
[[extensions.targeting]]
module = "./src/ProductVariantDetailsConfigurationExtension.tsx"
target = "admin.product-variant-details.configuration.render"
</script>
</div>
</p>
### Shopify Flow actions
The following example TOML file contains configuration settings for a [Shopify Flow action](/docs/apps/build/flow/actions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
[[extensions]]
name = "Send email action"
description = "Send an email to a customer."
handle = "send-email-action"
type = "flow_action"
runtime_url = "https://runtime-endpoint.com"
schema = "./schema.graphql"
return_type_ref = "EmailDelivered"
validation_url = "https://validation-url"
config_page_url = "https://url.com/config"
config_page_preview_url = "https://url.com/config/preview"
[settings]
[[settings.fields]]
description = "The email address to send to"
key = "email_address"
name = "Email address"
type = "single_line_text_field"
required = true
[[settings.fields]]
description = "The subject of the email"
key = "subject"
name = "Subject"
type = "single_line_text_field"
required = true
[[settings.fields]]
description = "The body of the email"
key = "body"
name = "Body"
type = "multi_line_text_field"
required = true
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to a Shopify Flow action:
| Property | Description |
|---|---|
| `[[extensions]]`<br><span class="heading-flag">Required</span> | The name of the array that contains all extensions listed in the TOML file. Contains the following properties:<br></br><ul><li>`runtime_url`:<span class="heading-flag">Required</span> The endpoint where Flow sends your action's payload when your step is being executed at runtime. [The payload](/docs/apps/build/flow/actions/endpoints#flow-action-execution) contains data that you can use to execute the action in your app.</li><li>`validation_url`:<span class="heading-flag">Optional</span> [An endpoint](/docs/apps/build/flow/actions/endpoints#custom-validation) that validates the contents of custom properties in an action payload when an action is saved. This endpoint is only required if you want to use a [custom configuration page](/docs/apps/build/flow/actions/build-config-ui).</li><li>`schema`:<span class="heading-flag">Optional</span> A relative path to a GraphQL schema definition file that contains custom types that you can use as part of your action. Only required if `return_type_ref` is also present.</li><li>`return_type_ref`:<span class="heading-flag">Optional</span> The name of the type to be returned by the action. This type must be present in the referenced schema file. Only required if `schema` is also present.</li><li>`config_page_url`:<span class="heading-flag">Optional</span> A route that renders your [custom configuration page](/docs/apps/build/flow/actions/build-config-ui).</li><li>`config_page_preview_url`:<span class="heading-flag">Optional</span> [An endpoint](/docs/apps/build/flow/actions/endpoints#custom-configuration-page-preview) that provides data about your custom configuration page to display in the automation tool. This endpoint is only required if you want to use a [custom configuration page](/docs/apps/build/flow/actions/build-config-ui).</li></ul> |
| `[[settings.fields]]` <br><span class="heading-flag">Required</span> | The name of the array that contains the settings fields. Contains the following property:<br></br><ul><li>`required`:<span class="heading-flag">Required</span> Specifies whether a field is required (`true`) or optional (`false`).</li></ul> |
### Shopify Flow triggers
The following example TOML file contains configuration settings for a [Shopify Flow trigger](/docs/apps/build/flow/triggers). The properties in the TOML file are similar to a [Shopify Flow action](#shopify-flow-actions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
[[extensions]]
name = "Shopify Email sent"
description = "Triggered when an email is sent from Shopify"
handle = "shopify-email-sent"
type = "flow_trigger"
[settings]
[[settings.fields]]
description = "The customer who received the email."
key = "customer_id"
name = "Customer ID"
type = "customer_reference"
[[settings.fields]]
description = "The marketing campaign ID."
key = "campaign_id"
name = "Campaign ID"
type = "single_line_text_field"
</script>
</div>
</p>
### Shopify Flow templates
The following example TOML file contains configuration settings for a [Shopify Flow template](/docs/apps/build/flow/templates).
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
[[extensions]]
name = "t:name"
type = "flow_template"
handle = "example-name"
description = "t:description"
[extensions.template]
categories = ["orders", "risk"]
module = "./template.flow"
require_app = false
discoverable = true
enabled = true
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to a Shopify Flow template:
| Property | Description |
|---|---|
| `[extensions.template]`<br><span class="heading-flag">Required</span> | Settings related to the template. Contains the following properties:<br></br><ul><li>`categories`:<span class="heading-flag">Required</span> The categories that best describe the function of your template. Must be an array containing only strings of valid categories. Must choose at least one category. Max 2 recommended. Valid categories are: `buyer_experience`, `customers`, `inventory_and_merch`, `loyalty`, `orders`, `promotions`, `risk`, `fulfillment`, `b2b`, `payment_reminders`, `custom_data`, and `error_monitoring`.</li><li>`module`:<span class="heading-flag">Required</span> The file path of the template workflow in the extension's folder.</li><li>`require_app`:<span class="heading-flag">Optional</span> Whether your template is visible only to merchants who have your app installed. Defaults to `false` if not provided.</li><li>`discoverable`:<span class="heading-flag">Optional</span> Whether your template should be displayed in the template browser. When `false`, the template is accessible only through a deep link. Defaults to `true` if not provided.</li><li>`enabled`:<span class="heading-flag">Optional</span> Whether your template should be made available after being approved and released. Defaults to `true` if not provided.</li></ul> |
### Shopify Functions extensions
The following example TOML file contains configuration settings for a [Shopify Function extension](/docs/apps/build/functions):
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="filename" data-value="shopify.extension.toml"></script>
<script type="text/plain" data-language="toml">
api_version = "2023-10"
[[extensions]]
name = "Product Discount"
handle = "product-discount"
type = "function"
[[extensions.targeting]]
target = "purchase.product-discount.run"
input_query = "src/run.graphql"
export = "run"
[extensions.build]
command = "cargo build --target=wasm32-wasip1 --release"
path = "target/wasm32-wasip1/release/product-discount.wasm"
watch = [ "src/**/*.rs" ]
wasm_opt = true
[extensions.ui]
enable_create = true
handle = "ui-extension-handle"
[extensions.ui.paths]
create = "/product-discount/:functionId/new"
details = "/product-discount/:functionId/:id"
[extensions.input.variables]
namespace = "my-namespace"
key = "my-key"
</script>
</div>
</p>
The following table describes the properties in the TOML file that are specific to a Shopify Function extension:
| Property | Description |
|---|---|
| `[[extensions.targeting]]`<br><span class="heading-flag">Required</span> | The name of the array that contains a target and its associated WebAssembly module export. Contains the following properties:<br></br><ul><li>`target`:<span class="heading-flag">Required</span> An identifier that specifies where you're injecting code into the Shopify backend. Refer to the [Function API references](/docs/api/functions) for available function targets.</li><li>`input_query`:<span class="heading-flag">Optional</span> The path to the [input query](/docs/apps/build/functions/input-output#input) file for the target. If omitted, then the function receives no input.</li><li>`export`:<span class="heading-flag">Optional</span> The name of the [WebAssembly](/docs/apps/build/functions/programming-languages/webassembly-for-functions) export in your module that executes for the target. Functions don't use the `extensions.targeting.module` setting. Use `export` instead. Defaults to `_start`. </li></ul> |
| `[extensions.build]`<br><span class="heading-flag">Optional</span> | The settings related to the build and deployment of the function extension's WebAssembly module. Contains the following properties:<br></br><ul><li>`command`:<span class="heading-flag">Optional</span> The command to build the function, which is invoked by the Shopify CLI [`build` command](/docs/api/shopify-cli/app/app-build).</li><li>`path`:<span class="heading-flag">Optional</span> The relative path to the function's [WebAssembly](/docs/apps/build/functions/programming-languages/webassembly-for-functions) module. For example, `build/my-module.wasm`. Defaults to `dist/index.wasm`.</li><li>`watch`:<span class="heading-flag">Optional</span> The relative paths that Shopify CLI should watch when the [`dev` command](/docs/api/shopify-cli/app/app-dev) is invoked. Changes to matched files trigger a build of the function and update it in your application drafts. This setting accepts a single file path or glob pattern, or an array of file paths and glob patterns.<br><br>For JavaScript and TypeScript functions, this setting defaults to `['src/**/*.js', 'src/**/*.ts']`..<br><br>Only paths inside the function directory are allowed (no "../").<br><br>[Input queries](/docs/apps/build/functions/input-output/metafields-for-input-queries) are automatically included in watch paths and don't need to be configured in `build.watch`.</li><li>`wasm_opt`:<span class="heading-flag">Optional</span> Whether to optimize your module before upload. Defaults to `true`.</li></ul> |
| `[extensions.ui]`<br><span class="heading-flag">Optional</span> | The settings related to the [merchant interface](/docs/apps/build/functions/input-output/metafields-for-input-queries#creating-your-merchant-interface) for your function. Contains the following properties:<br></br><ul><li>`handle`: <span class="heading-flag">Optional</span> Learn how to [create your function merchant interface](/docs/apps/build/functions/input-output/metafields-for-input-queries#creating-your-merchant-interface).</li><li>`enable_create`:<span class="heading-flag">Optional</span> Learn how to [configure creation workflows for function owners](/docs/apps/build/functions/input-output/metafields-for-input-queries#configuring-creation-workflows-for-function-owners).</li></ul> |
| `[extensions.ui.paths]`<br><span class="heading-flag">Optional</span> | The settings related to the App Bridge paths of the [merchant interface](/docs/apps/build/functions/input-output/metafields-for-input-queries#creating-your-merchant-interface) for your function. Contains the following properties:<br></br><ul><li>`create`:<span class="heading-flag">Optional</span> Refer to [create your function merchant interface](/docs/apps/build/functions/input-output/metafields-for-input-queries#creating-your-merchant-interface).</li><li>`details`:<span class="heading-flag">Optional</span> Refer to [create your function merchant interface](/docs/apps/build/functions/input-output/metafields-for-input-queries#creating-your-merchant-interface).</li></ul> |
| `[extensions.input.variables]`<br><span class="heading-flag">Optional</span> | The [variables to use in your input query](/docs/apps/build/functions/input-output/use-variables-input-queries). Contains the following properties:<br></br><ul><li>`key`: The name for the metafield.</li><li>`namespace`: A container for a group of metafields. Grouping metafields within a namespace prevents your metafields from conflicting with other metafields with the same key name.</li></ul> |
## Differences in TOML file names
TOML file names can differ, depending on when you generated an extension:
- If you generated an extension before July 26, 2023, then your TOML file maps to one of the following names:
- **Checkout UI**: `shopify.ui.extension.toml`
- **Bundles UI extension**: `shopify.ui.extension.toml` (maps to a [product configuration extension](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui))
- **Post-purchase UI**: `shopify.ui.extension.toml`
- **Product subscription**: `shopify.ui.extension.toml`
- **Web pixel**: `shopify.ui.extension.toml`
- **Shopify POS UI**: `shopify.ui.extension.toml`
- **Shopify Functions**: `shopify.function.extension.toml`
- **Theme app extensions**: `shopify.theme.extension.toml`
- If you generated an extension after July 26, 2023, then the TOML file is named `shopify.extension.toml`.