Route templates
The createShopifyRouteTemplates function tells Hydrogen where your app serves products, collections, and other Shopify resources. Use the function when your app serves a resource at a path other than Shopify's default.
Import createShopifyRouteTemplates from @shopify/hydrogen.
Pass the same route templates to handleShopifyRoutes, handleShopifyRedirects, ShopifyScripts, and the search result URL functions.
Anchor to Route definitionsRoute definitions
Tells Hydrogen where your app serves products, collections, and other Shopify resources. Pass the returned object to , , the routes option, and the predictive search URL helpers.
Add a key only for a route that your app serves at a non-standard path. Hydrogen uses Shopify's default path for each key that you leave out. Pass an empty object when your app serves every route at its default path. Each template starts with / and includes the handle placeholders for its route. Leave the locale path prefix out of templates. Hydrogen adds the prefix for you.
TypeScript checks the shape of each template. The function returns the object that you pass.
- Anchor to routesroutesroutesTRoutes extends ShopifyRouteTemplatesTRoutes extends ShopifyRouteTemplatesrequiredrequired
The non-standard paths that your app serves, keyed by standard route name.
The route templates, typed for Hydrogen's route, redirect, and URL helpers.
ShopifyRouteTemplates
Your app's custom path templates for Shopify standard storefront routes, keyed by route name.
- article
The app's article path. Hydrogen redirects Shopify article paths, such as `/blogs/news/snowboard-guide`, to this template.
StandardRouteTemplateWithParam<"blogHandle"> & StandardRouteTemplateWithParam<"articleHandle"> - blog
The app's blog path. Hydrogen redirects Shopify blog paths, such as `/blogs/news`, to this template.
StandardRouteTemplateWithParam<"blogHandle"> - cart
The app's cart path. Hydrogen redirects Shopify's `/cart` path to this template.
StandardRouteTemplate - collection
The app's collection path. Hydrogen redirects Shopify collection paths, such as `/collections/winter`, to this template.
StandardRouteTemplateWithParam<"collectionHandle"> - collectionList
The app's collection list path. Hydrogen redirects Shopify's `/collections` path and the legacy `/products` path to this template.
StandardRouteTemplate - page
The app's page path. Hydrogen redirects Shopify page paths, such as `/pages/about-us`, to this template.
StandardRouteTemplateWithParam<"pageHandle"> - policy
The app's policy path. Hydrogen redirects Shopify policy paths, such as `/policies/privacy-policy`, to this template.
StandardRouteTemplateWithParam<"policyHandle"> - product
The app's product path. Hydrogen redirects Shopify product paths, such as `/products/snowboard`, to this template.
StandardRouteTemplateWithParam<"productHandle"> - productInCollection
The app's path for products inside a collection. Hydrogen redirects Shopify paths such as `/collections/winter/products/snowboard` to this template. The template must include `:productHandle`. Add `:collectionHandle` when the app's product path also names the collection.
StandardRouteTemplateWithParam<"productHandle"> - search
The app's search path. Hydrogen redirects Shopify's `/search` path to this template.
StandardRouteTemplate
StandardRouteTemplateWithParam
A path template that starts with `/` and includes the named handle placeholder.
`/${string}:${Param}` | `/${string}:${Param}/${string}`StandardRouteTemplate
A path template that starts with `/`.
`/${string}`TypeScript
Examples
Description
Map Shopify standard routes to custom paths. This example sets templates for product, collection, article, cart, policy, and search routes.
TypeScript
import { createShopifyRouteTemplates } from "@shopify/hydrogen"; export const routeTemplates = createShopifyRouteTemplates({ product: "/p/:productHandle", collection: "/c/:collectionHandle", article: "/journal/:blogHandle/:articleHandle", cart: "/basket", policy: "/legal/:policyHandle", search: "/find", });Description
Create empty route templates for an app that serves Shopify's default paths. This example gives the app one place to update if its routes change.
TypeScript
import { createShopifyRouteTemplates } from "@shopify/hydrogen"; export const routeTemplates = createShopifyRouteTemplates({});