If you are creating an embedded Shopify app, the Shopify App Bridge is a mandatory tool that you must use to publish your app on the App Store. While it is technically possible to create an embedded app without using Shopify App Bridge, such an app will not pass the app review. This article covers everything you need to know to get started with App Bridge.
Shopify is a popular e-commerce platform that enables entrepreneurs to easily create and manage online stores. Merchants can extend store functionality by integrating various apps, which can be found on the Shopify App Store. These apps are designed to optimize online stores, enhance the overall shopping experience for customers, and more.
There are two types of Shopify apps: embedded and standalone. Embedded apps can be easily accessed through the store's admin dashboard, while standalone apps are located on other websites. To better understand the differences between Embedded and Standalone app, refer to Embedded vs Standalone Shopify Apps – Key Differences and How to Choose.
Shopify App Bridge is a set of tools and APIs provided by Shopify that enable developers to build embedded Shopify apps. These apps can integrate and communicate with Shopify stores, providing a seamless user experience by being embedded within the Shopify admin interface. The App Bridge includes a variety of components that developers can use to build their apps, such as UI components for creating consistent interfaces.
With Shopify App Bridge, developers can create apps that perform a wide range of functions, such as adding new features to the Shopify store, enhancing the customer experience, automating tasks, and more. The App Bridge simplifies the app development process by handling many common tasks associated with building Shopify apps and helps ensure a high-quality user experience.
To publish an embedded Shopify app to the Shopify App Store, it is mandatory to use the App Bridge version 2.0 or higher. Failure to use the App Bridge will result in the app not passing the Shopify app review process and not being published. Additionally, the Embedded App SDK (EASDK) cannot be used as it is a deprecated technology.
Importantly, the App Bridge must be used to implement the entirety of an app functionality. Developing some parts of an application with App Bridge and others without it, or with other technologies, will make the app ineligible for publication on the Shopify App Store.
App Bridge has a list of advantages for both merchants and developers.
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.
With App Bridge, apps can load faster due to built-in Shopify optimization. Moreover, App Bridge reduces content layout shifts, which makes merchants perceive an app as faster and more responsive, even if the actual loading time does not change.
Apps created with App Bridge 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:
Shopify App Bridge can significantly speed up the development of embedded Shopify Apps by providing developers with various pre-built components such as Button, Menu, and Navigation, among others.
Usage of Shopify App Bridge also increases the likelihood of successfully passing the app review process by enabling developers to easily comply with the Shopify App Design Guidelines through the use of provided App Bridge components. Adherence to these guidelines is mandatory for publishing an app on the Shopify App Store.
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. With App Bridge, each such request is automatically protected: once the merchant triggers the action, the App Bridge 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 App Bridge provides protection against unauthorized access to the app.
Every Shopify app consists of two main parts: the client and the server. The client is the visual component of the application that merchants can see, while the server contains the application's logic and communicates with a Shopify store. For embedded apps, the client side must use the App Bridge. The App Bridge itself consists of actions and methods that developers can use to build embedded apps.
Actions provide a way for embedded applications to trigger events with a payload. Most of Shopify App Bridge’s functionality relies on actions.
For example, if your app needs to display a standard Shopify green button with a label, App Bridge actions make it easy to create this button component with just one line of code. Without actions, developers would need to write a lot of code to define the button's style.
In addition to simplifying development, App Bridge actions ensure that your app adheres to Shopify's design guidelines and will pass app review. Because App Bridge is an official Shopify tool, all of its components meet the necessary requirements by default.
Methods, on the other hand, are triggered internally by an embedded application itself, allowing the app to access various information necessary for its logic to function. For example, an app can use methods to react to internal errors or determine whether it is being used on a desktop or mobile device.
Polaris is a component library provided by Shopify that offers various reusable UI elements and patterns, such as buttons, labels, icons, toggles, and more. Developers can use Polaris to create intuitive and good-looking Shopify Apps that adhere to Shopify App Design Guidelines.
Polaris offers a wider selection of UI components compared to Shopify App Bridge, and developers can replace App Bridge components with Polaris components if necessary. However, App Bridge must still be used for implementing the underlying application logic.
App Bridge can be considered the backbone of any embedded Shopify app. Polaris is an optional UI component library that can be used on top of the App Bridge.
Shopify officially encourages the use of Polaris for all types of apps.
To quickly start developing an embedded Shopify App with Shopify App Bridge, use a robust open-source app template available on GitHub - shopify app template go.
The template enables you to save development time by providing the necessary basics, such as the app structure, client-server communication, store installation logic, and minimal UI view.
App Bridge is a tool required for developing Shopify apps embedded into the admin dashboard. It provides better app performance and mobile optimization, as well as a set of standard, app review-compliant user interface components. App Bridge is compatible with Polaris, which includes a wider range of UI components, icons, and design patterns, but is optional. By using App Bridge, you can create reliable embedded Shopify applications.
