Theme app extensions overview

Theme app extensions allow developers to extend themes in a way that protects theme code integrity and provides better app development and merchant experiences. Theme app extensions gracefully integrate with Online Store 2.0 themes, including Dawn, Shopify's Online Store 2.0 reference theme.

This guide introduces you to theme app extensions.

Prepare your app for Online Store 2.0 with theme app extensions

Theme app extensions are currently available in a developer preview and can only be used in development stores. The developer preview gives you early access to build and test theme app extensions for your apps before Online Store 2.0 themes are available to merchants.

For the preview, you'll have early access to clone Shopify's product reviews app and Dawn GitHub repositories. Experiment with the theme app extension in your development store to learn how the product reviews app extends Dawn. The developer preview also gives you time to learn how to migrate your existing apps to theme app extensions.

Framework

Theme app extensions contain the following resources:

  • Blocks - Liquid files that act as the entry point for what you want to inject in a theme.

  • Assets - CSS, JavaScript, and other static app content that gets injected into themes.

  • Snippets - Reusable Liquid snippets that can be used across multiple blocks.

The theme app extensions framework includes the following types of blocks:

  • App blocks, which are for apps that inject inline content on a page.

  • App embed blocks, which are for apps that don't have a UI component or that add floating or overlaid elements to a theme.

Designing for the best merchant experience

Apps built in the theme app extension framework don't edit theme code, which decreases the risk of introducing breaking changes to the theme, makes it easier to iterate on the content of the integration, and provides for a better merchant experience.

Merchants can use the theme editor to configure exposed settings and add app blocks in theme sections for precise positioning in a page's layout.

UX guidelines

Theme app extensions provide a set of UX guidelines to help you design a great customer-facing and merchant experience.

Benefits

Your app will benefit from using theme app extensions rather than other integration methods:

  • Theme app extensions automatically expose your app in the theme editor. You can leverage the editor’s visual editing capabilities without needing to replicate them in your app.

  • You can deploy your app at the same time to all online stores that use it. You also have access to lifecycle management for app versioning and asset hosting on the Shopify CDN.

  • You can build without having to add integration mechanisms for the different themes that exist. You can build a single set of integration logic and instructions that will work for all themes.

  • You can build without requiring merchants to edit their theme code manually. Merchants will love you for that.

Getting started

To start building your theme app extension, use our getting started tutorial.

Migrate

Shopify provides a migration process that allows apps using the Asset and ScriptTag resources to use theme app extensions instead.

Resources

Tools