Redirect from embedded app - How to do from shopify remixjs app

Shopify Apps

Topic summary

A developer needs to redirect users to Shopify’s admin discounts page from a button click within a Shopify Polaris RemixJS embedded app.

Solution provided:

  • Use Shopify’s App Bridge SDK with the Redirect action, not standard navigation methods
  • Ensure App Bridge Provider is configured in the root file (root.jsx)
  • Import useAppBridge hook and Redirect from App Bridge packages
  • Implement button click handler using Redirect.create(app) and dispatch with Redirect.Action.ADMIN_PATH

Key technical requirements:

  • Must use relative admin paths (e.g., ‘/discounts’) rather than full URLs
  • Only works within embedded apps using App Bridge
  • User must be logged in with appropriate permissions

Code example demonstrates the complete implementation using Polaris Button component with the redirect logic.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I want to redirect user when button click to this url → https://admin.shopify.com/store/bigapples/discounts

how to do it? I am using Shopify Polaris Remixjs embedded app

1 Like
2

Hello @AlexLew

To redirect a user from a Shopify embedded RemixJS app to an admin URL (like discounts page) such as:

https://admin.shopify.com/store/bigapples/discounts

you must use App Bridge (Shopify’s JS SDK for embedded apps) and the Redirect action.

Here’s how to do it properly:

  1. Ensure App Bridge is set up in your Remix app
    In your root file (like root.jsx), make sure your app is wrapped with App Bridge using Provider.

tsx

Here's how to do it properly:
1. Ensure App Bridge is set up in your Remix app
In your root file (like root.jsx), make sure your app is wrapped with App Bridge using Provider.
  1. Use App Bridge Redirect on button click
import {useAppBridge} from '@shopify/app-bridge-react';
import {Redirect} from '@shopify/app-bridge/actions';
import {Button} from '@shopify/polaris';

export function GoToDiscountsButton() {
  const app = useAppBridge();

  const handleClick = () => {
    const redirect = Redirect.create(app);
    redirect.dispatch(Redirect.Action.ADMIN_PATH, {
      path: '/discounts'
    });
  };

  return (
    
  );
}

Notes:
. You must use relative admin path (/discounts) with ADMIN_PATH, not full URLs.

. The user must be logged in and have permission to access the /discounts section.

. This works only inside embedded apps using App Bridge.

Thank you :blush: