Create theme app extensions

What you'll learn #

After you've finished this tutorial, you'll have accomplished the following tasks: Created a theme app extension Previewed the theme app extension Tested the theme app extension Added onboarding instructions in your app Deployed and released the theme app extension

Requirements #

* You're a technology partner with app development permissions and have created a dev store. * You've created an app that uses JoonWeb CLI * You've installed the additional project dependencies * You understand the theme app extensions framework.

Step 1: Create a new extension #

You'll use JoonWeb CLI to generate a new theme app extension. Navigate to the directory of the app that you want to add your extension to. Run the following command to start creating the extension: `joonweb app generate extension` Select Theme app extension as the extension type. [theme_app_extension] Provide a name for your extension. You should now have a new extension directory that includes an example block extension

Step 2: Preview your theme app extension #

You can preview your extension by running the dev command, which starts a local development server that supports hot reloading. This preview is available only in Google Chrome. Navigate to your app directory. Run the following command: `joonweb app serve` When you run the dev command, JoonWeb CLI builds your app and bundles your app extensions. It also walks you through multiple configuration steps. If you've already run dev or deploy for this app, then some of these steps are skipped. To learn about the processes that are executed when you run dev, refer to the JoonWeb CLI command reference. Follow the instructions in the CLI output to preview the theme app extension. This includes the following steps: Opening the host theme in the theme editor Adding your app block to the theme Saving the theme Click the URL that's printed at the bottom of the CLI output to preview your extension.

Step 3: Test your changes #

Verify that your app looks and behaves correctly by testing your changes on a theme in your dev store. In your dev store, go to "Edit Site" Builder Follow the procedures for: * Adding app blocks/section. * Activating app embed blocks * Verify the app behaves as expected. **For example, verify the following:** * App embed blocks for floating/script components are positioned properly without obscuring page content. * You can use the builder to activate and deactivate app embed blocks and configure their settings. * You can use the builder to add, remove, and reposition app blocks and configure their settings. * App documentation, such as app onboarding instructions, is clear, accurate, and complete.

Step 4: Include onboarding instructions in your app #

Provide instructions for what merchants need to do after installing your app.

Step 5: Deploy and release the 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. `joonweb app deploy` Releasing an app version replaces the current active version that's served to sites that have your app installed. It might take several minutes for app users to be upgraded to the new version.