Getting started with theme app extensions

This tutorial provides information on how you can get started building theme app extensions with Shopify CLI.

For more information on extension commands, refer to Shopify CLI extension commands.

To see app block and app embed block examples in an example app, refer to Shopify's product reviews app.

Requirements

Log in to your Partner account

Scaffold and register a theme app extension

Use Shopify CLI to create a theme app extension scaffold and register the extension with your app.

When Shopify CLI creates the theme app extension, it will add a dedicated theme-app-extension directory to your app.

  1. Open a terminal window and cd to the root directory of your project:

  2. Create the theme app extension and select the app to which you'll register the extension:

  3. Navigate to your new theme extension and register it with your app:

  4. Refer to the recommendations for improving asset management and app performance.

Push your app to a draft version

The shopify extension push command pushes app updates to draft versions on your development store. This allows you to test your theme app extension in a sandbox environment before publishing to online stores.

  1. Push the extension to a draft version in the Partner Dashboard:

  2. Navigate to the Partner Dashboard using the link returned from the shopify extension push command.

  3. In the Partner Dashboard, navigate to the Development Store Preview section and click Enable.

Test your changes

Verify that your app looks and behaves correctly by testing your changes on a theme in your development store.

  1. In your development store, go to an Online Store 2.0 theme and navigate to the theme editor.

  2. From the theme editor, do the following:

Actions in the theme editor
Type Step
App block, wrapped Select Add section and, from the Apps section of the selection list, drag and drop the app block to a location on the page.
App block From a compatible section select Add Block and, from the Apps section of the selection list, drag and drop the app block to a location on the page.
App embed block Select Theme Settings > App embeds and activate the app embed block.

  1. Verify the app behaves as expected. For examples, refer to the recommendations for lifecycle management

Include onboarding instructions in your app

Provide instructions for what merchants need to do to after installing your app. For more information, refer to the UX guidelines.

Publish the theme app extension

After your theme app extension is ready for online stores, you can push the latest code and make the app extension public.

  1. Push the extension to the Partner Dashboard:

  2. Navigate to your theme extension in the Partner Dashboard using the link returned from the shopify extension push command.

  3. Click Create Version.

  4. When the new version displays in the versions list, click Publish.