Overview
Every built-in storefront page, its URL, its route file and where to read about it.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
Every storefront page a customer can open, from the home page to an order confirmation, is already built into the engine. This section lists them all and shows how to change one, or add a page the engine does not have. Start here to find the page you want to change.
A route is one URL pattern plus the code that answers it: a loader that fetches the data, a head that sets the title and meta tags, and a component that draws the page. For the concepts behind this, read Routes and pages.
What do you want to do?
Change a built-in page
Take over a route file, or point the same URL at your own file.
Add a new page
Serve a URL the engine does not have, such as /faq.
Find a page's URL and data
Use the table below, then open the page for its params and loader.
Redirect an old URL
See which redirects exist and how to add your own.
How built-in routes work
When your theme builds, the engine writes one small file per route into app/routes/. These files are stubs: they wire the engine's loader, head and component into the router, and nothing more. Every stub starts with this line:
// @auto-generated- While the first line is there, the engine owns the file and rewrites it when a new engine version changes the stub. Do not edit it.
- Delete the line and the file is yours. The engine never touches it again, but it also stops updating it, so you keep the wiring in sync yourself.
- A missing file is written again.
Some routes add no file to app/routes/ at all: the engine writes their stubs into its own .twilight/ folder and serves them from there. These are every product list (search, products, category, tag, brand), product reviews, and the redirects from old Twig addresses (pending orders, /account/rating, the five short account URLs, and /latest-products, /most-sales-products and /offers). To replace one, add a file of the same name to app/routes/ (for example app/routes/search.tsx) without the // @auto-generated line, and the build uses yours. They are marked engine in the table below.
Each page in this section shows its real stub and a customised version. To change a page without touching the stub, point the same URL at your own file from app/routes.ts, as described in Fork a built-in route.
Never add // @auto-generated to a file you wrote. The next build overwrites it.
URL anatomy
All storefront URLs follow the same shape.
| Part | Example | Notes |
|---|---|---|
| Optional locale | /ar/cart | {-$locale} in route paths. /ar/cart is the Arabic cart. A URL without the prefix redirects to one with it, see Locale prefix. |
| Store segment | /my-store/cart | Only on shared development and preview hosts, where one host serves many stores. The router adds and strips it, so route files never include it. |
$slug | /red-shoes/p123 | A readable name for people and search engines. |
| Short id | p123, c123, brand-123, tag-123, page-123 | The part the loader uses. The letters before the number say what kind of page it is. |
In a route path, $id is a param and {$id} is a param inside a segment, so /$slug/p{$id}
matches /red-shoes/p123 with id = 123. The $slug of the catalog and blog pages is cosmetic:
the loaders read only id.
Every route
Open a page for its params, what it loads and its edge cases. Every page uses the same sections: URL, route file, what it loads, edge cases.
| Page | URL | Route file | Docs |
|---|---|---|---|
| Home | / | index.tsx | Home |
| Cart | /cart | cart.tsx | Cart |
| Search | /search | search.tsx (engine) | Search |
| Products | /products?source=latest|sales|offers|reorder | products.tsx (engine) | Products |
| Product | /$slug/p{$id} | $slug.p$id.tsx | Product |
| Category | /$slug/c{$id} | $slug.c$id.tsx (engine) | Category |
| Brand products | /$slug/brand-{$id} | $slug.brand-$id.tsx | Brand products |
| Tag | /$slug/tag-{$id}, /tags/$id | $slug.tag-$id.tsx, tags.$id.tsx (engine) | Tag |
| Custom page | /$slug/page-{$id} | $slug.page-$id.tsx | Custom page |
| Brands | /brands | brands.tsx | Brands |
| Brand | /brands/$id | brands.$id.tsx (engine) | Brand |
| Blog | /blog | blog.tsx | Blog |
| Blog article | /blog/$slug/a-{$id} | blog_.$slug.a-$id.tsx | Blog article |
| Blog category | /blog/$slug/c-{$id} | blog_.$slug.c-$id.tsx | Blog category |
| Blog tag | /blog/$slug/tag-{$id} | blog_.$slug.tag-$id.tsx | Blog tag |
| Blog author | /blog/author/$id | blog_.author.$id.tsx | Blog author |
| Account | /account | account.tsx | Account |
| Profile | /account/profile | account.profile.tsx | Account profile |
| Wishlist | /account/wishlist | account.wishlist.tsx | Account wishlist |
| Wallet | /account/wallet | account.wallet.tsx | Account wallet |
| Notifications | /account/notifications | account.notifications.tsx | Account notifications |
| Settings | /account/settings | account.settings.tsx | Account settings |
| Orders | /account/orders | account.orders.tsx | Account orders |
| Order | /account/orders/$id | account.orders.$id.tsx | Account order |
| Pending orders | /pending-orders, /account/pending_orders | pending-orders.tsx, account.pending_orders.tsx (engine) | Pending orders |
| Logout | /logout | logout.tsx | Logout |
| Loyalty | /loyalty, /loyalty_points | loyalty.tsx, loyalty_points.tsx | Loyalty |
| Testimonials | /testimonials | testimonials.tsx | Testimonials |
| Product reviews | /reviews | reviews.tsx (engine) | Product reviews |
| Thank you | /thankyou/$orderId | thankyou.$orderId.tsx | Thank you |
| SEO redirects | /$slug/brand-{$id}, /pending-orders, /account/pending_orders, /logout, /account/rating, /profile, /orders, /wishlist, /wallet, /notifications, /latest-products, /most-sales-products, /offers | the redirect-only files: $slug.brand-$id.tsx and logout.tsx in your theme; account.rating.tsx, profile.tsx, orders.tsx, wishlist.tsx, wallet.tsx, notifications.tsx, latest-products.tsx, most-sales-products.tsx and offers.tsx (engine) | SEO redirects |
| Not found | any URL no route matches | none (built into the router) | Not found |
Every URL above also exists under the optional locale prefix (/ar/cart).
Things to know about the table:
- Redirect-only routes. The brand slug URL, both pending-orders URLs,
/logout,/account/rating, the five short account URLs (/profileand so on) and Twig's three listing URLs (/latest-products,/most-sales-products,/offers) have no page of their own. Their stubs hold aloaderor a redirect component and no page component. - The account section is one layout (
/account) with the pages under it. The account pages need a signed-in customer. - Two tag URLs, two brand URLs.
/tags/$idand/$slug/tag-{$id}both show a tag's products./brands/$idshows a brand's products, and/$slug/brand-{$id}redirects to it.
Next
- Add a custom route: serve a URL the engine does not have
- Home: the first built-in page, then Cart, Search and the catalog pages in the sidebar order
- Routes and pages: how routes, loaders and components fit together
- Fork a built-in route and Add a page: the short recipes