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 merchants elsewhere within the Shopify admin or on the web.
Setup
Create an app and import the Redirect
module from @shopify/app-bridge/actions
. Note that we'll be referring to this sample application throughout the examples below.
import createApp from '@shopify/app-bridge';
import {Redirect} from '@shopify/app-bridge/actions';
const app = createApp({
apiKey: '12345',
shopOrigin: shopOrigin,
});
const redirect = Redirect.create(app);
Redirect 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');
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');
Open 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,
});
Redirect 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,
});
Redirect 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,
});
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',
},
});
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,
},
});
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',
},
},
});
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,
},
},
});
Subscribe 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}`);
});
Subscribe 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.ActionType.APP, (payload: Redirect.AppPayload) => {
// Do something with the redirect
console.log(`Navigated to ${payload.path}`);
});
Current restrictions
Query Params
The use of query params is not supported. All query params are removed from the path during the redirect.