import ExtensionCollectionCreate from 'app/views/partials/apps/customer-accounts/editor-extension-collection/create.mdx'
import UiExtensionRequirements from 'app/views/partials/apps/customer-accounts/editor-extension-collection/requirements.mdx'
<Repo
extension="react"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react"
/>
<Repo
extension="javascript"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js"
/>
<Picker name="extension">
<PickerOption name="react" />
<PickerOption name="javascript" />
</Picker>
<Overview>
<If featureFlagDisabled="customer_account_extensibility_ga">
<Notice type="beta" title="Developer preview">
Editor extension collections are part of the <a href="/docs/api/release-notes/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview">Checkout and Customer Accounts Extensibility developer preview</a>
and can only be seen in the checkout and accounts editor if you have the developer preview enabled.
</Notice>
</If>
## 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.
</Overview>
<Requirements>
<UiExtensionRequirements />
</Requirements>
<StepSection>
<Step>
### Generate an editor extension collection
<Substep>
<ExtensionCollectionCreate />
</Substep>
</Step>
<Step>
### Add your wishlist profile and full page extension to the collection
<Substep>
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.
<CodeRef
extension="react"
tag="config.setup-collection-details"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/editor-extension-collection/shopify.extension.toml" />
<CodeRef
extension="javascript"
tag="config.setup-collection-details"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/editor-extension-collection/shopify.extension.toml" />
</Substep>
<Substep>
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](/docs/apps/customer-accounts/full-page-extensions/build-full-page-extensions).
<CodeRef
extension="react"
tag="config.setup-includes"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/react/example-customer-account--wishlist--react/extensions/editor-extension-collection/shopify.extension.toml" />
<CodeRef
extension="javascript"
tag="config.setup-includes"
href="https://github.com/Shopify/customer-account-tutorials/blob/main/javascript/example-customer-account--wishlist--js/extensions/editor-extension-collection/shopify.extension.toml" />
</Substep>
</Step>
<Step>
### Deploy your editor extension collection
<Substep>
After you've added your extensions to the collection, you can deploy your editor extension collection using Shopify CLI.
<Codeblock terminal>
```bash
shopify app deploy
```
</Codeblock>
<Notice type="warning" title="Caution">
If your dev server is already running and **development store preview** is on (in Shopify CLI or Partner Dashboard), then restart your dev server to avoid encountering issues when trying to access the [checkout and accounts editor](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-editor).
</Notice>
</Substep>
</Step>
<Step>
### Install your app and test your editor extension collection in the checkout and accounts editor
<Substep>
1. [Install your app on your development store](/docs/apps/store/review/app-pre-submission#install-your-app-on-a-development-store).
2. Navigate to the [checkout and accounts editor](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-editor) for that store.
3. In the editor, you can test the extensions that you've grouped together.
</Substep>
</Step>
</StepSection>
<NextSteps>
## 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
<CardGrid>
<LinkCard href="/docs/apps/deployment/app-versions">
#### Deployment
Learn how to deploy app versions to release changes to users.
</LinkCard>
<LinkCard href="/docs/apps/store/review/app-pre-submission#install-your-app-on-a-development-store">
#### Installing your app
Learn how to install your app on a development store
</LinkCard>
<LinkCard href="/docs/apps/build/customer-accounts/test">
#### Testing
Learn how to test your app in the checkout and accounts editor
</LinkCard>
</CardGrid>
</NextSteps>