Skip to main content

Redirect

The Redirect action set allows you to modify the top-level browser URL. Use the Redirect action set to navigate within your app, or to redirect users elsewhere in the Shopify admin or on the web.

You can use the redirect action set in the following ways:

  1. Plain JavaScript
  2. React hook

Anchor to Plain JavaScriptPlain JavaScript

Anchor to Example codeExample code

Import the createApp function from @shopify/app-bridge and the Redirect action from @shopify/app-bridge/actions. Then use the createApp function to create an app.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

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

const app = createApp(config);

const redirect = Redirect.create(app);

Anchor to Redirect to a relative path in the appRedirect to a relative path in the app

Redirect to a local app path. The path must be prefixed with a slash and is treated as relative to the app origin:

// Go to {appOrigin}/settings
redirect.dispatch(Redirect.Action.APP, '/settings');

Anchor to Redirect to an absolute URL outside of the app and outside of Shopify admin.Redirect to an absolute URL outside of the app and outside of Shopify admin.

// Go to http://example.com
redirect.dispatch(Redirect.Action.REMOTE, 'http://example.com');

Anchor to Open in a new windowOpen in a new window

Add the newContext option (equivalent to <a target="_blank">):

// Go to http://example.com in a new window
redirect.dispatch(Redirect.Action.REMOTE, {
url: 'http://example.com',
newContext: true,
});

Anchor to Redirect to a relative path in Shopify adminRedirect to a relative path in Shopify admin

Redirect to the customers section in Shopify admin. The path must be prefixed with a slash.

// Go to {shopUrl}/admin/customers
redirect.dispatch(Redirect.Action.ADMIN_PATH, '/customers');

// Go to {shopUrl}/admin/customers in a new window
redirect.dispatch(Redirect.Action.ADMIN_PATH, {
path: '/customers',
newContext: true,
});

Anchor to Redirect to a named section in Shopify adminRedirect to a named section in Shopify admin

Redirect to the Products section in the Shopify admin:

// Go to {shopUrl}/admin/products
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
name: Redirect.ResourceType.Product,
});

// Go to {shopUrl}/admin/products in a new window
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
section: {
name: Redirect.ResourceType.Product,
},
newContext: true,
});

Anchor to Redirect to a specific resource in Shopify admin.Redirect to a specific resource in Shopify admin.

Redirect to the collection with the ID 123 in the Shopify admin:

// Go to {shopUrl}/admin/collections/123
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
name: Redirect.ResourceType.Collection,
resource: {
id: '123',
},
});

Anchor to Redirect to create a product in Shopify admin.Redirect to create a product in Shopify admin.

Redirect to {shopUrl}/admin/products/new in the Shopify admin:

// Go to {shopUrl}/admin/products/new
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
name: Redirect.ResourceType.Product,
resource: {
create: true,
},
});

Anchor to Redirect to a product variant in Shopify admin.Redirect to a product variant in Shopify admin.

Redirect to the collection with the id '123' in Shopify admin:

// Go to {shopUrl}/admin/products/123/variant/456
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
name: Redirect.ResourceType.Product,
resource: {
id: '123',
variant: {
id: '456',
},
},
});

Anchor to Redirect to create a new product variant in Shopify admin.Redirect to create a new product variant in Shopify admin.

Redirect to {shopUrl}/admin/products/123/variants/new in the Shopify admin:

// Go to {shopUrl}/admin/products/123/variants/new
redirect.dispatch(Redirect.Action.ADMIN_SECTION, {
name: Redirect.ResourceType.Product,
resource: {
id: '123',
variant: {
create: true,
},
},
});

Anchor to Subscribe to actionsSubscribe to actions

You can subscribe to actions dispatched through the redirect action set:

redirect.subscribe(Redirect.Action.APP, (payload: Redirect.AppPayload) => {
// Do something with the redirect
console.log(`Navigated to ${payload.path}`);
});

Anchor to Subscribe to all redirect actionsSubscribe to all redirect actions

You can subscribe to all redirect actions within your app, regardless of which action sets trigger the actions:

app.subscribe(Redirect.Action.APP, (payload: Redirect.AppPayload) => {
// Do something with the redirect
console.log(`Navigated to ${payload.path}`);
});

Anchor to Current restrictionsCurrent restrictions

Query Params

The use of query params is not supported. All query params are removed from the path during the redirect.

Anchor to ReactReact

The useNavigate hook allows you to modify the top-level browser URL. You can use it to:

  • Navigate within your app
  • Redirect users elsewhere in the Shopify admin
  • Redirect elsewhere on the web

Anchor to Example CodeExample Code

Note

When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge Provider.

Navigate within your app using a relative or absolute path.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
const navigate = useNavigate();

return (
<>
<link onClick={() = /> {
navigate('https://my-app.com/about');
}}>About

<link onClick={() = /> {
navigate('/about');
}}>About
);
}

Navigate to Shopify admin by using a section name and an optional resource ID.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
const navigate = useNavigate();

return (
<link onClick={() = /> {
navigate({
name: 'Collection',
resource: {
id: '123',
}
});
}}>Deluxe collection
);
}

You can create a new resource in Shopify admin by passing true to the create option.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
const navigate = useNavigate();

return (
<link onClick={() = /> {
navigate({
name: 'Collection',
resource: {
create: true,
}
});
}}>Create a new collection
);
}

Navigate elsewhere on the web by using a fully qualified URL.

import {useNavigate} from '@shopify/app-bridge-react';

function MyComponent {
const navigate = useNavigate();

return (
<link onClick={() = /> {
navigate('https://shopify.com');
}}>Shopify
);
}

Anchor to PropsProps

The useNavigate hook does not accept props. It returns a method with the following API.

NameTypeDescriptionRequired
tostring or AdminSectionOptionsWhere the app should redirect. If using a string, options must conform to AppOptions. For navigating in Shopify admin, use the AdminSectionOptions type and use the HostOptions type for passing options.Yes
optionsAppOptions or HostOptionsCustom configuration for navigation behaviourNo

Anchor to AppOptionsAppOptions

The AppOptions type must be used when using a string type for to.

NameTypeDescriptionRequired
replacebooleanReplace the current location with the new locationNo
target"host", "new"The context where the new location should openNo

Anchor to AdminSectionOptionsAdminSectionOptions

You must use the AdminSectionOptions type with HostOptions.

NameTypeDescriptionRequired
name"Product", "Collection", "Order", "Customer", "Discount"The name of a specific section in Shopify adminYes
resourceResourceOptionsOptions for redirecting to a resource within Shopify adminNo

Anchor to ResourceOptionsResourceOptions

NameTypeDescriptionRequired
createbooleanWhether the app should redirect to a page to create a new resource of the specified typeNo
idstringThe ID of the resource that the app should navigate toNo

Anchor to HostOptionsHostOptions

You must use the HostOptions type when using a AdminSectionOptions type for to.

NameTypeDescriptionRequired
replacebooleanReplace the current location with the new locationNo
targetselfThe context where the new location should openNo
Was this page helpful?