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.
You can use the redirect action set in the following ways:
Plain JavaScript
Anchor link to section titled "Plain JavaScript"Example code
Anchor link to section titled "Example 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.
Redirect to a relative path in the app
Anchor link to section titled "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:
Redirect to an absolute URL outside of the app and outside of Shopify admin.
Anchor link to section titled "Redirect to an absolute URL outside of the app and outside of Shopify admin."
Open in a new window
Anchor link to section titled "Open in a new window"Add the newContext option (equivalent to <a target="_blank">):
Redirect to a relative path in Shopify admin
Anchor link to section titled "Redirect to a relative path in Shopify admin"Redirect to the customers section in Shopify admin. The path must be prefixed with a slash.
Redirect to a named section in Shopify admin
Anchor link to section titled "Redirect to a named section in Shopify admin"Redirect to the Products section in the Shopify admin:
Redirect to a specific resource in Shopify admin.
Anchor link to section titled "Redirect to a specific resource in Shopify admin."Redirect to the collection with the ID 123 in the Shopify admin:
Redirect to create a product in Shopify admin.
Anchor link to section titled "Redirect to create a product in Shopify admin."Redirect to {shopUrl}/admin/products/new in the Shopify admin:
Redirect to a product variant in Shopify admin.
Anchor link to section titled "Redirect to a product variant in Shopify admin."Redirect to the collection with the id '123' in Shopify admin:
Redirect to create a new product variant in Shopify admin.
Anchor link to section titled "Redirect to create a new product variant in Shopify admin."Redirect to {shopUrl}/admin/products/123/variants/new in the Shopify admin:
Subscribe to actions
Anchor link to section titled "Subscribe to actions"You can subscribe to actions dispatched through the redirect action set:
Subscribe to all redirect actions
Anchor link to section titled "Subscribe to all redirect actions"You can subscribe to all redirect actions within your app, regardless of which action sets trigger the actions:
Current restrictions
Anchor link to section titled "Current restrictions"Query Params
The use of query params is not supported. All query params are removed from the path during the redirect.
The useNavigate hook allows you to modify the top-level browser URL. You can use it to:
- Navigate within your app
- Redirect merchants elsewhere within Shopify admin
- Redirect elsewhere on the web
Example Code
Anchor link to section titled "Example Code"Navigate within your app using a relative or absolute path.
Navigate to Shopify admin by using a section name and an optional resource ID.
You can create a new resource in Shopify admin by passing true to the create option.
Navigate elsewhere on the web by using a fully qualified URL.
The useNavigate hook does not accept props. It returns a method with the following API.
| Name | Type | Description | Required |
|---|---|---|---|
| to | string or AdminSectionOptions |
Where 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 |
| options | AppOptions or HostOptions |
Custom configuration for navigation behaviour | No |
The AppOptions type must be used when using a string type for to.
| Name | Type | Description | Required |
|---|---|---|---|
| replace | boolean |
Replace the current location with the new location | No |
| target | "host", "new" |
The context where the new location should open | No |
AdminSectionOptions
Anchor link to section titled "AdminSectionOptions"You must use the AdminSectionOptions type with HostOptions.
| Name | Type | Description | Required |
|---|---|---|---|
| name | "Product", "Collection", "Order", "Customer", "Discount" |
The name of a specific section in Shopify admin | Yes |
| resource | ResourceOptions |
Options for redirecting to a resource within Shopify admin | No |
ResourceOptions
Anchor link to section titled "ResourceOptions"| Name | Type | Description | Required |
|---|---|---|---|
| create | boolean |
Whether the app should redirect to a page to create a new resource of the specified type | No |
| id | string |
The ID of the resource that the app should navigate to | No |
HostOptions
Anchor link to section titled "HostOptions"You must use the HostOptions type when using a AdminSectionOptions type for to.
| Name | Type | Description | Required |
|---|---|---|---|
| replace | boolean |
Replace the current location with the new location | No |
| target | self |
The context where the new location should open | No |