Difference between Shopify App Bridge and Polaris

[d_tehrani]

I'm using React to develop an App, and I'm unsure about the difference between Shopify App Bridge and Polaris.

For example, both Shopify App Bridge and Polaris provide Loading component, and I'm not sure which one to use.

Is there a difference?

[ameyacharya]

Was wondering the same thing. Can someone from Shopify clear this out?

[FernandoDaniel]

Hi D tehrani.

In short:

• Polaris is for making your app look like Shopify.
• App Bridge is for making your app work with Shopify.

They are often used together to create a seamless experience for merchants using embedded apps.


A more detailed explanation:

Polaris is Shopify's design system and component library. It provides pre-built UI components (buttons, cards, forms, etc.) that match the look and feel of the Shopify admin.

 Example: You want to add a button or a data table inside your app's UI that looks like it belongs in Shopify.

import { Button, Card } from '@shopify/polaris';

function MyAppPage() {
  return (
    <Card sectioned>
      <Button primary onClick={() => alert('Button clicked!')}>
        Save changes
      </Button>
    </Card>
  );
}

  

App Bridge is a JavaScript library that allows your embedded Shopify app (running in an iframe / WebView within the Shopify admin) to communicate and interact with the Shopify host environment.

Example: Your app needs to open Shopify's product picker.

import { createApp } from '@shopify/app-bridge';
import { ResourcePicker } from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: 'YOUR_APP_API_KEY',
  host: new URLSearchParams(location.search).get("host"),
});

const productPicker = ResourcePicker.create(app, {
  resourceType: ResourcePicker.ResourceType.Product,
  options: { selectMultiple: false }
});

// To open the picker
productPicker.dispatch(ResourcePicker.Action.OPEN);