Optimized loading on mobile devices
To improve loading speeds for your app and offer your users better mobile experience, you can enable mobile optimization on the Partners Dashboard.
Requirements
Anchor link to section titled "Requirements"- 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).
Test your app in your development store
Anchor link to section titled "Test your app in your development store"To enable optimized loading for your app:
- From your Partner Dashboard, click Apps.
- Click the name of your app.
- Click App setup.
- In the Embedded app section, click Manage.
- In the Optimize loading on mobile, make sure that testing on development store is enabled.
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.
Please test your app thoroughly to ensure that all functionality is working as expected.
Debug your app
Anchor link to section titled "Debug your app"If you find that your app is not behaving as expected while testing it in your development store, please take the following steps:
- Familiarize your self with how mobile-optimized loading works, and review the list of common gotchas.
- Debug your app (on iOS or Android) to uncover the root cause and fix the problem.
- If you cannot determine the root cause, ask a question on the Shopify APIs and SDKs section of the Shopify Community
Enable mobile optimization in production
Anchor link to section titled "Enable mobile optimization in production"If you determine that your app works as expected in your development, you can enable mobile optimization in production:
- From your Partner Dashboard, click Apps.
- Click the name of your app.
- Click App setup.
- In the Embedded app section, click Manage.
- In the Optimize loading on mobile, enable optimized loading for all users on live stores.
That's it! Merchants who use your app on Shopify Mobile will enjoy the optimized experience.
How mobile-optimized loading works
Anchor link to section titled "How mobile-optimized loading works"By default, embedded applications that are opened from the Shopify Mobile application run inside of 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.
With direct loading enabled, 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 will 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, so you don’t have to make any changes to take advantage of this.
With this change, when you use Shopify App Bridge to create UI, such as a resource picker or a modal dialog, the app will display native Android or iOS versions of these elements. This will help create a more deeply integrated and higher-quality user experience for merchants who are using your apps via the Shopify Mobile app.
Common issues and fixes
Anchor link to section titled "Common issues and fixes"Issue | Fix |
---|---|
Using window.name or window.top to determine whether your app is running in embedded mode does not work. |
Use the isShopifyEmbedded utility, instead of accessing properties of the window object |
Using React Portals to communicate between modal windows does not work. | Use App Bridge's Modal API |
Your app's backend redirects the user to the web version of Shopify Admin | Have your app's backend redirect to the app home page and initialize App Bridge. |