--- title: Build an editor extension collection description: Learn how to get started building editor extension collections. source_url: html: https://shopify.dev/docs/apps/build/customer-accounts/editor-extension-collections/build-editor-extension-collection md: https://shopify.dev/docs/apps/build/customer-accounts/editor-extension-collections/build-editor-extension-collection.md --- # Build an editor extension collection ![The editor extension collection in the checkout and accounts editor](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/apps/customer-accounts/editor-extension-collections/extension-collection-tutorial-BL6l1I7U.png) ## What you'll learn In this tutorial, you'll learn how to do the following tasks: * Generate an editor extension collection using Shopify CLI. * Group related extensions such as a Wishlist **Profile** extension and a Wishlist **Full page** extension. * Deploy your editor extension collection and test it in the checkout and accounts editor. ## Requirements [Create a Partner account](https://www.shopify.com/partners) [Create a development store](https://shopify.dev/docs/apps/tools/development-stores#create-a-development-store-to-test-your-app) The development store should be pre-populated with [test data](https://shopify.dev/docs/api/development-stores/generated-test-data), including an order associated with the email address you'll use to log in to the customer account experience. [Shopify CLI](https://shopify.dev/docs/apps/tools/cli/installation) You'll need to use the [latest version of Shopify CLI](https://shopify.dev/docs/api/shopify-cli#upgrade). [Scaffold an app](https://shopify.dev/docs/apps/build/scaffold-app) Scaffold an app that uses Shopify CLI. This tutorial is compatible with the [extension-only template](https://shopify.dev/docs/apps/app-extensions/extension-only-apps). [Complete the full page extension tutorial](https://shopify.dev/docs/apps/build/customer-accounts/full-page-extensions/build-new-pages) ## Project [View on GitHub](https://github.com/Shopify/customer-account-tutorials/tree/main/preact/example-customer-account--wishlist--preact) ### Generate an editor extension collection ### Create the editor extension collection 1. Navigate to your app directory. 2. Run the following command to create a new extension: ## Terminal ```terminal shopify app generate extension ``` 1. Select `Editor extension collection` as the extension type, and then provide a name for your collection. You now have a new directory for your app under `` > `extensions`. ### Add your wishlist profile and full page extension to the collection The editor extension collection has the following properties: * **name** - The name of your editor extension collection. This name can also be translated using `t:translation-key` as you include a locale folder and locale files you can add your translation keys to. * **type** - This is usually static and should not be changed. * **handle** - A unique identifier for your editor extension collection in your app. * **includes** - An array that contains the handles of the extensions you want in the collection. ## /preact/example-customer-account--wishlist--preact/extensions/editor-extension-collection/shopify.extension.toml ```toml [[extensions]] name = "t:collection_name" uid = "aff2d787-08fb-5b20-9ff8-08f1d91dda8c86f44aa3" type = "editor_extension_collection" handle = "wishlist-management" includes=["wishlist-extension-preact", "wishlist-profile-block"] # You can also add extensions to the collection this way #[[extensions.include]] #handle="" # A second editor extension collection added in the same extension toml config # [[extensions]] # name = "t:collection_two_name" # type = "editor_extension_collection" # handle = "editor-extension-collection" # includes=[] ``` In your editor extension collection, you need to include the handles of the extensions that you want to group together. In this case, you need to include the handles of the wishlist profile and full page extension that you created in the [full-page-extension tutorial](https://shopify.dev/docs/apps/customer-accounts/full-page-extensions/build-full-page-extensions). ## /preact/example-customer-account--wishlist--preact/extensions/editor-extension-collection/shopify.extension.toml ```toml [[extensions]] name = "t:collection_name" uid = "aff2d787-08fb-5b20-9ff8-08f1d91dda8c86f44aa3" type = "editor_extension_collection" handle = "wishlist-management" includes=["wishlist-extension-preact", "wishlist-profile-block"] # You can also add extensions to the collection this way #[[extensions.include]] #handle="" # A second editor extension collection added in the same extension toml config # [[extensions]] # name = "t:collection_two_name" # type = "editor_extension_collection" # handle = "editor-extension-collection" # includes=[] ``` ### Preview and test your editor extension collection 1. Start `app dev` if it's not already running: ## Terminal ```bash shopify app dev ``` 2. Navigate to the [checkout and accounts editor](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-editor) for your development store. 3. In the editor, you can test the extensions that you've grouped together. ### Deploy your extension When you're ready to release your changes to users, you can create and release an [app version](https://shopify.dev/docs/apps/launch/deployment/app-versions). An app version is a snapshot of your app configuration and all extensions. 1. Navigate to your app directory. 2. Run the following command. Optionally, you can provide a name or message for the version using the `--version` and `--message` flags. ## Terminal ```terminal shopify app deploy ``` Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version. Tip If you want to create a version, but avoid releasing it to users, then run the `deploy` command with a `--no-release` flag. You can release the unreleased app version using Shopify CLI's [`release`](https://shopify.dev/docs/api/shopify-cli/app/app-release) command, or through the Dev Dashboard. ## /preact/example-customer-account--wishlist--preact/extensions/editor-extension-collection/shopify.extension.toml ```toml [[extensions]] name = "t:collection_name" uid = "aff2d787-08fb-5b20-9ff8-08f1d91dda8c86f44aa3" type = "editor_extension_collection" handle = "wishlist-management" includes=["wishlist-extension-preact", "wishlist-profile-block"] # You can also add extensions to the collection this way #[[extensions.include]] #handle="" # A second editor extension collection added in the same extension toml config # [[extensions]] # name = "t:collection_two_name" # type = "editor_extension_collection" # handle = "editor-extension-collection" # includes=[] ``` ## Tutorial complete! Nice work - what you just built could be used by Shopify merchants around the world! Keep the momentum going with these related tutorials and resources. ### Next Steps [![](https://shopify.dev/images/icons/32/build.png)![](https://shopify.dev/images/icons/32/build-dark.png)](https://shopify.dev/docs/apps/deployment/app-versions) [Deployment](https://shopify.dev/docs/apps/deployment/app-versions) [Learn how to deploy app versions to release changes to users.](https://shopify.dev/docs/apps/deployment/app-versions) [![](https://shopify.dev/images/icons/32/app.png)![](https://shopify.dev/images/icons/32/app-dark.png)](https://shopify.dev/docs/apps/store/review/app-pre-submission#install-your-app-on-a-development-store) [Installing your app](https://shopify.dev/docs/apps/store/review/app-pre-submission#install-your-app-on-a-development-store) [Learn how to install your app on a development store](https://shopify.dev/docs/apps/store/review/app-pre-submission#install-your-app-on-a-development-store) [![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/apps/build/customer-accounts/test) [Testing](https://shopify.dev/docs/apps/build/customer-accounts/test) [Learn how to test your app in the checkout and accounts editor](https://shopify.dev/docs/apps/build/customer-accounts/test)