You’ll want to take those products and display them to merchants in a form. In this case, the discount is hardcoded for demo purposes. This prevents an error being thrown if your app is not inside the Shopify Admin. Shopify App Bridge is a JavaScript library that seamlessly integrates your app into Shopify user interfaces, including the web admin, mobile app, and POS. Failure to use SSL when running an embedded app will cause errors in web browsers, due to mixed content restrictions. Later on, you’ll use onSelection to pass product IDs to the API calls you’ll be making. Mixed content restrictions in web browsers require all embedded applications to also use HTTPS. 'enabled' : 'disabled'; description="Temporarily disable all Sample App price updates". Discover everything you can build on Shopify’s platform, How we make Shopify’s platform safe and secure for everyone, Make money by selling apps to Shopify merchants, How Shopify is building for the future with GraphQL, Create new features for the Shopify admin experience, Add Shopify buying experiences to any platform, Access information about your Partner business, Customize the look and feel of online stores, Surface your app features wherever merchants need them, Add features to Shopify’s point-of-sale apps, Connect Shopify merchants with any marketing channel, Create complex workflows for Shopify Plus merchants, Build on Shopify’s customer-service chat platform, Customize Shopify’s checkout with your own payment flow, Learn how to build, sell and maintain Shopify apps, Learn how to build and customize Shopify themes, Quickly and securely connect with Shopify APIs, Build apps using Shopify’s open-source design system. You can disable this functionality by passing forceRedirect: false as a configuration option. If you enable this feature for an existing app that isn't designed to use Shopify App Bridge, then merchants will no longer be able to use the app. To do this, visit https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com in your web browser. Add the Layout component inside of the Polaris Page component: code contained in /pages/annotated-layout.js, Add the provider component from App Bridge React to your, code contained in /components/ClientRouter.js. A React class component is required, instead of a functional component, because you’ll be implementing Polaris components that require state. Translations are provided in the locales folder. In your pages/index.js, replace the TextStyle component and text with the EmptyState component and example text: The console log has been added to indicate the clicked action. To learn more about this process, see Getting and storing the shop origin. To learn more about using your app with Shopify POS, visit our guide on Shopify POS. 4. If you don’t want to, then you can omit the line and use this.state.discount instead. Now that you have a page, add the Polaris Layout component to give structure to the other components that you’ll add. First, create a development store and an app. In this tutorial we’ve focused primarily on the web admin, but App Bridge will ensure your app name, logo, and navigation menu appears reliably across all of Shopify’s interfaces. Once you’ve added Shopify App Bridge to your app, you need to initialize it by passing in your API key and the shop name. Learn more about authenticating your app using session tokens. In the sample app, we used “Simple resource list” as the name for our “index” link, and "Annotated layout" for our "annotated-layout" link. When building with React, you can use the Shopify App Bridge React library to initialize the library by passing your app's Shopify API Key and the shop origin to the App Bridge Provider component. You can also debug your app with Shopify App Bridge. Shopify App Bridge can also be included directly on a page with a
