Build an editor extension collection
Anchor to What you'll learnWhat 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
The development store should be pre-populated with test data, including an order associated with the email address you'll use to log in to the customer account experience.
You'll need to use Shopify CLI version >= 3.60.0.
Scaffold an app that uses Shopify CLI. This tutorial is compatible with the extension-only template.
Project
Anchor to Generate an editor extension collectionGenerate an editor extension collection
Anchor to Create the editor extension collectionCreate the editor extension collection
-
Navigate to your app directory.
-
Run the following command to create a new extension:
Terminal
- Select
Editor extension collectionas the extension type, and then provide a name for your collection.
You now have a new directory for your app under <app-name> > extensions.
Anchor to Add your wishlist profile and full page extension to the collectionAdd 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-keyas 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.
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.
Anchor to Deploy your editor extension collectionDeploy your editor extension collection
After you've added your extensions to the collection, you can deploy your editor extension collection using Shopify CLI.
Terminal
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.
Anchor to Install your app and test your editor extension collection in the checkout and accounts editorInstall your app and test your editor extension collection in the checkout and accounts editor
- Install your app on your development store.
- Navigate to the checkout and accounts editor for that store.
- In the editor, you can test the extensions that you've grouped together.
Anchor to Tutorial complete!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.
