## Naming editor extension collections

- Use clear and descriptive names for your editor extension collections. Names should clearly describe the customer experience that the collection provides. For example, “Subscription management” or “Loyalty program”.
- Avoid using your app’s name in the name of your editor extension collection, or the extensions in it. In the checkout and accounts editor, editor extension collections and app blocks always appear under your app’s name, so that context already displays to merchants.
- Avoid using jargon or technical terms that merchants might not understand.
- Avoid using emojis.
- Editor extension collection names must be 50 characters or less.
- Editor extension collection handles must be 255 characters or less.

![Do's and Don'ts for editor extension collection naming](/assets/apps/customer-accounts/editor-extension-collections/do-dont-naming.png)

## Grouping

- An editor extension collection should consist of two or more extensions that work together. For example, group extensions that are used together in a specific workflow, such as grouping a loyalty banner that is displayed on the **Profile** page with a Loyalty **Full page** extension that contains loyalty points details.
- One extension can belong to multiple editor extension collections.
- Avoid grouping by UI type. For example, don't group all banners together.

![Do's and Don'ts for editor extension collection grouping](/assets/apps/customer-accounts/editor-extension-collections/do-dont-grouping.png)

## Deep linking to a collection

Save merchants time by deep linking to your collection from your app onboarding experience. Deep links send merchants directly to the **Apps** tab in the checkout and accounts editor—auto-scrolled to your collection.

<video title='Deeplinking to an editor extension collection' aria-label='How deep linking to an editor extension collection works' style="width: 100%; height: auto;" muted loop controls>
  <source src="/assets/apps/customer-accounts/editor-extension-collections/Deeplinking.webm" type="video/webm" />
</video>

To deep link to a collection, you’ll need the following data:

- **checkoutProfile ID**: The numeric ID of the [checkoutProfile](/docs/api/admin-graphql/latest/queries/checkoutProfiles) you want the link to open in. Merchants can have one published configuration, and multiple draft configurations. You can query all checkout and accounts configurations using checkoutProfiles and ask the merchant to select which one they want to open. Or, you can query the published configuration using [isPublished](/docs/api/admin-graphql/latest/queries/checkoutProfiles#argument-query-filter-is_published).
- **editor extension collection handle**: The handle of the editor extension collection you want to link to. You can find this in your editor [extension collection definition](/docs/apps/build/app-extensions/configure-app-extensions#editor-extension-collection).

After you have this information, construct the URL as follows using the `extension:` protocol and [app bridge navigation](/docs/api/app-bridge-library/apis/navigation#example-navigating-to-pages-in-the-shopify-admin):

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></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>
</div>


<script type="text/plain" data-language="tsx">
open(`extension:${collection.handle}?checkoutProfileId=${parseGid(profile.id)}`, '_top')
</script>

</div>
</p>


For example, if

- The **checkoutProfile** ID is `12345679`
- Your editor extension collection handle is `loyalty_program`

Then your URL will be the following:

<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></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>
</div>


<script type="text/plain" data-language="tsx">
open(`extension:loyalty_program?checkoutProfileId=12345679`, '_top')
</script>

</div>
</p>


## Extensions targeting multiple pages

One extension can target multiple pages. For example, an extension can be added to both the **Checkout** and **Order status** page. In this case, the merchant can choose which page to place the extension on.

![An extension inside a collection targeting multiple pages](/assets/apps/customer-accounts/editor-extension-collections/targeting-multiple-pages.png)