UX guidelines

• 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.

• 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.

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.

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

• checkoutProfile ID: The numeric ID of the checkoutProfile 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.
• 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.

After you have this information, construct the URL as follows using the extension: protocol and app bridge navigation:

For example, if

• The checkoutProfile ID is 12345679
• Your editor extension collection handle is loyalty_program

Then your URL will be the following:

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.