Skip to content
Modals vs Redirects in Shopify Embedded Apps: What Works Best?
The development of Shopify embedded apps requires designers to choose between using modals or redirects for user navigation and interaction. Both options are supported by Shopify App Bridge that brings separate benefits to each solution. The incorrect selection for user interaction features may both negatively affect user experience and reduce workflow speed and possibly result in Shopify’s review process application denial.
The blog investigates technical and UX aspects between App Bridge modals and Shopify redirects in addition to providing guidelines on implementing both effectively in Shopify embedded apps.
What Are Modals and Redirects in Shopify Embedded Apps?
Modals:
- The Shopify Admin interface contains modals which display as visual elements above its interface surface. Such interfaces create an interaction space which stays inside the current display area without causing any loss of context.
- The modal system displays context information through brief forms for obtaining user confirmations and processing data input. The application helps users complete their tasks more efficiently while providing better interactions with the platform.
- When Shopify employs App Bridge for modal implementation the result is a smooth integration experience across the Shopify Admin interface.
Redirects:
- The user’s destination will change according to redirects which direct users between pages found within Shopify Admin and external apps. This is essential for navigation.
- Complex processes like onboarding new users and distributing users between different sections of the system along with directing users to explore new features and move seamlessly between different app sections achieve success through redirects.
Implementing Modals with Shopify App Bridge
To create App Bridge modals, use the Modal action from @shopify/app-bridge/actions. Here’s a basic example:
Ready to launch your Shopify store? We will create a standout site with our development and app development to build a store that sells.
Contact us now and get your store up and running fast!
Implementing Redirects with Shopify App Bridge
Redirects are useful when deeper navigation is necessary. To implement Shopify redirects:
This method is more effective when navigating between full-page sections of your Shopify embedded apps.
Modals vs Redirects: Use Cases
| Use Case | Recommended |
| Editing a small part of data (e.g. tags, status) | Modal |
| Multi-step flows (e.g. onboarding, settings) | Redirect |
| Viewing or selecting a single product/customer | Modal |
| Creating new entities (e.g. product, discount rule) | Redirect |
| Confirmation dialogs | Modal |
| Viewing analytics or reports | Redirect |
The right choice enhances the UX of Shopify embedded apps and maintains user context or depth of interaction.
Pros and Cons: A Comparative Analysis
Modals :
| Pros | Cons |
| Keeps user in context | Limited space |
| Quick actions feel native | Can become cluttered |
| No full-page reload | Not ideal for complex forms |
Redirects :
| Pros | Cons |
| Great for full-page flows | Breaks user flow if overused |
| Easier to manage routes in frameworks | Can feel slow for quick edits |
| Better for editing large datasets | Requires reinitializing app context |
Choosing wisely impacts the overall performance and adoption of your Shopify embedded apps.
Shopify Best Practices for Navigation in Embedded Apps
Shopify provides clear UX guidelines for using Shopify App Bridge modals and Shopify redirects:
- Users maintain their position in their current context when they use modals for tasks that require focus including verification checks or single-field edits.
- Redirect flows should be used for complete workflows such as settings and dashboards and multi-step creation that requires separate pages or navigation systems.
- Tools that display modals within other modals result in an undesirable user experience. The problem can be solved by making the flows easier to use or redirecting tasks to special sections.
- Shopify App Bridge modals should replace browser modals (window.confirm) to provide users with a uniform Shopify Admin environment.
- Observing accessibility guidelines that Shopify modals follow will enable support of all users.
Following these practices ensures your Shopify embedded apps pass review and delight merchants.
Conclusion
Shopify embedded apps use the combination of Shopify App Bridge modals and Shopify redirects to navigate between pages. Each serves a specific purpose:
- When maintaining context and simplicity use modals.
- Deeper multi-step processes should use redirect elements.
The ability to recognize the special attributes of both tools permits developers to create user-friendly Shopify embedded applications which operate quickly and provide easy use for merchants. These tools enhance user interfaces when properly implemented to satisfy the requirements of Shopify’s ecosystem.
Ready to build smoother, more dynamic Shopify embedded apps with the right navigation tools? Whether you’re upgrading an existing app or starting fresh, mastering Shopify App Bridge modals and Shopify redirects is crucial.
If you need expert guidance in optimizing navigation, implementing Shopify modal implementation, or scaling your app’s UX—reach out to our developer team today!
