Embedded vs Standalone Shopify Apps: Key Differences and How to Choose

If you're looking to create a Shopify app, you may have come across Embedded and Standalone app types. In this article, we'll discuss the difference between app types and potential issues related to each one. To learn more about creating Shopify apps, refer to How to Build a Shopify App: An Ultimate Guide (Extended).

Although the Embedded and Standalone apps may appear and function similarly to the user, they differ in their operation. The Embedded app is integrated into the Shopify admin and allows users to manage the app within the same dashboard. Conversely, the Standalone app runs on its own website, separate from the Shopify admin. This means that users must switch between the Shopify admin and the Standalone app to manage their app.

Benefits of Embedded apps

Embedded apps have a list of advantages for both merchants and developers.

Appear in the store admin dashboard

Merchants can set up or adjust an app without opening an external website. With embedded apps, they can do it in a familiar user interface of an admin dashboard.

Improved performance and user experience

App performance is a critical aspect of a merchant's user experience when using apps in the Shopify admin. Slow load times can dissuade merchants from adopting an app, increase bounce rates, and ultimately decrease overall usage.

Embedded apps can load faster due to built-in Shopify optimization. Moreover, Embedded apps have reduced content layout shifts, which makes merchants perceive an app as faster and more responsive, even if the actual loading time does not change.

Out-of-the-box mobile optimization

Embedded apps are optimized for the Shopify Mobile app, which greatly improves the mobile experience for merchants. To enable mobile optimization for your app, follow these steps in your Partner Dashboard:

Faster app development and publishing

The tools used for creating embedded Shopify apps, such as App Bridge, provide various built-in components such as Button, Menu, and Navigation, among others.

Usage of these components also increases the likelihood of successfully passing the app review process by enabling developers to easily comply with the Shopify App Design Guidelines. Adherence to these guidelines is mandatory for publishing an app on the Shopify App Store.

Enhanced security

When a merchant initiates an action on the app's user interface, such as by clicking a button, the interface sends a request to the server, which then executes the action. In Embedded apps, each such request is automatically protected: once the merchant triggers the action, the app generates a unique token, which is sent to the server along with the request. The server then uses this token to verify that the request was sent from the intended store. As a result, the Embedded apps provide protection against unauthorized access to the app.

Benefits of Standalone apps

Appear on external website

A standalone app should be placed on an external website, outside of the Shopify admin. This can be beneficial in unique business cases. For instance, there may be a website that contains all of the company's applications, where merchants can find other useful Shopify apps to install.

No Shopify design requirements

Embedded apps must comply with the Shopify App Design Guidelines, which makes sense for apps appearing in the admin dashboard. However, there may be situations where the Shopify guidelines do not fit the business needs, and custom design is needed. In such cases, you can create a Standalone app, which does not need to comply with the Shopify App Design Guidelines.

No App Bridge requirement

Shopify App Bridge is a technology that must only be used for embedded apps and must not be used for standalone ones. If development is already in progress and it has been realized that App Bridge is not being used, the app can be turned into a standalone one instead of being recreated from scratch with App Bridge.

App Bridge for Embedded Apps

App Bridge is a library that offers user interface components for creating embedded apps. Embedded apps must use App Bridge, while standalone apps should not. Otherwise, your app will not pass the app review and will not be published on the Shopify App Store.

It is possible to create a custom (not public) embedded app without App Bridge, but be cautious. Do not attempt to migrate the app to App Bridge on the fly, as it could lead to numerous problems.

Examples of Standalone apps

Examples of Embedded apps

App Bridge vs No App Bridge

The main differences between App Bridge and the standard client-server approach are the authentication/authorization workflow and the programming code of the user interface.

To authenticate with the Shopify API, the standard client-server approach requires an access token. In contrast, App Bridge requires session tokens, which must be set up differently from the development side.

Regarding the user interface, the standard HTML code can be used with the client-server approach. However, App Bridge provides its own approach for displaying elements, such as buttons, and controlling their behavior.

App type can’t be changed

Switching an app's type from Embedded to Standalone, or vice versa, is not an easy task and requires altering the app's functionality. Embedded apps require App Bridge, while Standalone apps do not. To migrate to or from App Bridge, the user interface must be rewritten from the ground up, and the way it communicates with the app's logic must also be changed.

Conclusion

Embedded and Standalone apps may appear similar, yet they have distinct implementations. Choose the one that best meets your requirements: Embedded, which appears on the Shopify admin dashboard, or Standalone, which is located outside the dashboard (e.g. on your website). Note that switching types of apps in the middle of development usually slows down the development and therefore increases the cost.

If you still have questions or want to give us some feedback, email us at hi@softcery.com, and we can help you out.