Embedded App Not Loading - No Option to Force Legacy Domain

[B-Rave]

When launching an embedded app in a test store, we are met with the following screen. Previously there was an option to "Force Legacy Domain" which would then launch the app in the store, but this option doesn't seem to be available anymore. Our app is using the latest App Bridge version of 3.7.10.

Any help would be appreciated!

[DaisyVo]

Hi @B-Rave 

It looks like you're running into a common issue with the "Force Legacy Domain" option being unavailable when launching an embedded app in a test store. Here’s a clear breakdown of what might be happening and how you can troubleshoot:

Why the Issue Happens

Shopify is phasing out older practices, and the "Force Legacy Domain" option is part of the legacy functionality that’s being deprecated. Your app's compatibility with the latest Shopify security and embedding standards could be a factor here.

Additionally, App Bridge 3.7.10 introduces stricter requirements for domain handling and cross-origin isolation. This means the app’s redirection or embedding setup might need to be updated to align with Shopify's latest standards.

Steps to Resolve

1-Check App URL Whitelist in Shopify Admin

• Go to your Shopify Partner Dashboard.
• Navigate to Apps > [Your App] > App Setup.
• Under "App URL," ensure the correct App URL and Redirect URLs are configured.
• Both must match the domains you’re using for the app during testing.

2-Ensure You’re Using HTTPS

• Shopify now enforces HTTPS for all embedded apps. Verify your app’s test environment uses HTTPS. If not, set up an HTTPS server with a valid SSL certificate.

3-App Bridge Configuration

Update your App Bridge integration to ensure it’s compatible with Shopify’s requirements:

import createApp from '@shopify/app-bridge';

const app = createApp({

  apiKey: 'YOUR_API_KEY',

  host: new URLSearchParams(window.location.search).get('host'),

});

Note: Check if you’re using the latest version of App Bridge (you mentioned 3.7.10, which is recent). If you’re on an earlier version, update it to avoid compatibility issues.

4-Enable Embedded App Redirects

In your app’s code, verify that you handle Shopify’s embedded app redirection:

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

const redirect = Redirect.create(app);

redirect.dispatch(

  Redirect.Action.REMOTE,

  'https://your-embedded-app-url'

);

5-Review Browser Compatibility

• Test in multiple browsers to see if the issue persists. Certain browsers may block redirection due to cross-origin policies.

Additional Debugging Tips

• Check Browser Console Logs: Look for errors related to iframe embedding or cross-origin policies.
• Inspect Shopify Community Updates: Occasionally, these issues arise from Shopify rolling out new changes. Keep an eye on their Developer Changelog.

If you’re still stuck after trying these steps, feel free to reach out with more details about your app’s configuration or error logs. We can dig deeper together.

If you need any other assistance, feel free to reply and I will try my best to respond.
Best regards,
Daisy