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 the latest version of Shopify CLI.
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 Preview and test your editor extension collectionPreview and test your editor extension collection
- Start
app devif it's not already running:Terminal
shopify app dev - Navigate to the checkout and accounts editor for your dev store.
- In the editor, you can test the extensions that you've grouped together.
Anchor to Deploy your extensionDeploy your extension
When you're ready to release your changes to users, you can create and release an app version. An app version is a snapshot of your app configuration and all extensions.
-
Navigate to your app directory.
-
Run the following command.
Optionally, you can provide a name or message for the version using the
--versionand--messageflags.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.
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 command, or through the Dev Dashboard.
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 command, or through the Dev Dashboard.
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.
