App integration with online stores
You can expose your app's features to millions of merchants' customers by integrating your app with online stores.
The Shopify platform can match your app's needs, from something as small as a block of inline content, to augmentations that span the entire purchase experience. Our platform makes it possible to seamlessly incorporate your app's features into online stores using Liquid templates, hosted assets on the Shopify CDN, and a purpose-driven deployment and versioning release pipeline.
This guide explains the methods that you can use to integrate your app with online stores.
Theme app extensions
Theme app extensions provide your app with two integration types that extend themes in the online store: app blocks and app embed blocks. These integration types take advantage of Online Store 2.0 features. Every new app that that you submit to the Shopify App Store needs to use theme app extensions to integrate with online store themes.
Theme app extensions don't edit theme code, which provides the following benefits:
Reduced risk of an app introducing breaking changes to the theme
Minimized app support debt
Increased app adoption by offering merchants a cleaner experience for app integration and customization.
Increased user retention owing to a graceful, out of the box integration experience.
Other integration methods for themes
You can use the
Asset resource alongside theme app extensions to provide specific types of support for vintage themes.
If you're creating a new app that integrates with a theme, and you're submitting the app to the Shopify App Store, then you need to use theme app extensions. However, if you offer your app functionality as an app block, which isn't compatible with vintage themes, then you still might need to use the Asset or ScriptTag resource in addition to theme app extensions. Apps that are already published on the Shopify App Store are exempt from this requirement.
If your app interacts with a store's theme, then you need to make sure that the app also works in the theme editor environment. If necessary, you can set your app to detect the theme editor, so that you can adjust your app to work in that environment.
If your app adds a visible element to an online store, then the element needs to be deactivated by default so that merchants can either preview or edit the element before activating it. You need to provide merchants with instructions on how to activate either the visible element or the app.
If uninstalling your app leaves code behind in the theme, then you need to provide merchants with instructions on how to remove the code completely, so that they can remain on their theme upgrade path. When a merchant removes the code, leaving even an extra line break or space will take the theme off its upgrade path.
If your app edits theme code and a merchant changes their published theme, then you need to update your app to work on the new theme.
Other integration method for the online store
An app proxy forwards requests made to a configurable route on an online store's origin to an external origin to display data on a store page. For example, an app proxy can forward requests from
https://johns-apparel.myshopify.com/admin/themes/app/my-app to your app server. App proxies allow you to share data with an online store without worrying about Cross-origin Security Concerns (CORS).
What integration method should I use?
Review the following app use cases to determine which integration method you should use.
|Use case||Integration method|
|Your app injects inline content on a page||App blocks|
|Your app doesn't have a UI component or it adds a floating or overlaid element to a theme||App embeded blocks|
|Your app injects inline content on a page and you want to add support for vintage themes||ScriptTags REST Admin API and GraphQL Admin API|
|Your app must modify the code of vintage themes||Asset REST Admin API resource|
|You want to forward requests made to a route on an online store's origin to an external origin to display data on a store page||App proxies|