Optimized loading on mobile devices

• You've created a Partner account and a development store.
• You have the Shopify Mobile app installed on your mobile phone (ideally, iOS or Android).

To enable optimized loading for your app:

1. From your Partner Dashboard, click Apps.
2. Click the name of your app.
3. Click Configuration.
4. In the App settings section, in the Embedded app home card, click Manage mobile optimization.
5. Next to Optimized loading for testing on development stores, click Enable.

Open the Shopify Mobile app, log into your development store, and launch your app. Your app should load faster and some UI elements, such as the title bar or product picker, will now provide native look and feel.

Test your app thoroughly to ensure that all functionality is working as expected.

If you find that your app isn't behaving as expected while testing it in your development store, take the following steps:

1. Familiarize yourself with how mobile-optimized loading works, and review the list of common issues and fixes.
2. Debug your app (on iOS or Android) to uncover the root cause and fix the problem.
3. If you can't determine the root cause, then ask a question on the Shopify APIs and SDKs section of the Shopify Community

If your app works as expected in your development environment, then you can enable mobile optimization in production with the following steps:

1. From your Partner Dashboard, click Apps.
2. Click the name of your app.
3. Click Configuration.
4. In the App settings section, in the Embedded app home card, click Manage mobile optimization.
5. Next to Optimized loading for all users on live stores, click Enable.

App users on Shopify Mobile will now get the optimized experience.

By default, embedded applications that are opened from the Shopify Mobile application run inside an iframe, hosted from the Shopify admin. Each time an application is launched, the Shopify admin site must be reloaded, adding a significant amount of time to the application’s load.

When you enable direct loading, the app is no longer loaded in an iframe inside of the Shopify admin. Instead, the Shopify Mobile app loads the application directly inside of a native WebView. In this mode, the Shopify App Bridge libraries automatically switch to communicate directly with the Shopify Mobile app. All of the same Shopify App Bridge functionality that is available on the Shopify Admin website is available in a native form in the mobile app.

When you use Shopify App Bridge to create UI, such as a resource picker or a modal dialog, the app displays native Android or iOS versions of these elements. This helps create a more deeply integrated and higher-quality user experience for the app when used through the Shopify Mobile app.