Templates in Pack: Understanding and Managing Page Structures
Templates are React components that you can directly edit to add or change a given route's (e.g., page, product, collection...) structure and layout.

Each template has access to a renderSections
prop which is a function that will render all the dynamic sections added in the Customizer or Pack Admin for that template.
Available Types
You can find all available template types inside your storefront's Github repository in the /app/routes
directory.
- Home — renders on
/
home page visits - Page — renders on
/pages/:handle
visits - Blog — renders on
/blogs/:handle
visits - Article — renders on
/articles/:handle
visits - Product — renders on
/products/:handle
visits - Collection — renders on
/collections/:handle
visits - Account — renders on
/account/:subroute
visits - 404 — renders on
invalid-routes
visits
Default Templates
When you create a store, you’ll find several templates that are already created for you by default. Let’s review each template.
Home
This template will be used for your storefront's homepage.
Page
This template will be used for all pages that follow the /pages/
route in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/pages/:handle
route. Use useSections
instead to return the section data
in an object to give you more control of how you want to render the sections.
// app/routes/($locale).pages.$handle.tsx
export default function PageRoute() {
const { page } = useLoaderData<typeof loader>();
return (
<div data-comp={PageRoute.displayName}>
<RenderSections content={page} />
</div>
);
}
Blog
This template will be used for all blog pages that follow the /blogs/
route in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/blogs/:handle
route. Use useSections
instead to return the section data
in an object to give you more control of how you want to render the sections.
// app/routes/($locale).blogs.$handle.tsx
export default function BlogRoute() {
const { blog, siteTitle, url } = useLoaderData<typeof loader>();
return (
<div data-comp={BlogRoute.displayName}>
<RenderSections content={blog} />
</div>
);
}
Article
This template will be used for all article pages that follow the /blogs/:blogHandle/:articleHandle
route in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/blogs/:blogHandle/:articleHandle
route. Use useSections
instead to return
the section data in an object to give you more control of how you want to
render the sections.
// app/routes/($locale).articles.$handle.tsx
export default function ArticleRoute() {
const { article, siteTitle, url } = useLoaderData<typeof loader>();
return (
<div className="py-contained" data-comp={ArticleRoute.displayName}>
<section>
{/* ... */}
</section>
<RenderSections content={article} />
<ArticleSchemaMarkup article={article} siteTitle={siteTitle} url={url} />
</div>
);
}
Product
This template will be used for all product pages that follow the /products/:handle
route in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/products/:handle
route. Use useSections
instead to return the section
data in an object to give you more control of how you want to render the
sections.
// app/routes/($locale).products.$handle.tsx
export default function ProductRoute() {
const { product, productPage, selectedVariant, siteTitle, url } =
useLoaderData<typeof loader>();
return (
<ProductProvider
data={product}
initialVariantId={selectedVariant?.id || null}
>
<div data-comp={ProductRoute.displayName}>
<Product product={product} />
<RenderSections content={productPage} />
<ProductSchemaMarkup
product={product}
siteTitle={siteTitle}
url={url}
/>
</div>
</ProductProvider>
);
}
Collection
This template will be used for all collection pages that follow the /collections/:handle
route in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/collections/:handle
route. Use useSections
instead to return the section
data in an object to give you more control of how you want to render the
sections.
// app/routes/($locale).collections.$handle.tsx
export default function CollectionRoute() {
// ... //
const [collection, setCollection] = useState(resolveFirstCollection)
const [allProductsLoaded, setAllProductsLoaded] = useState(false)
return (
<div data-comp={CollectionRoute.displayName}>
{collectionPage && <RenderSections content={collectionPage} />}
<section data-comp="collection">
<Collection
allProductsLoaded={allProductsLoaded}
collection={collection}
showHeading={!hasVisibleHeroSection}
/>
</section>
</div>
)
}
Account
The account template comprises multiple other sub-templates for routes such as sign-in, order history, address book, payment methods, and more.
All available sub-templates for the account template can be found in the /app/routes
directory.
404
This template will be used for all 404 pages in your storefront.
RenderSections
will render any customizer CMS sections defined for the given
/404
route. Use useSections
instead to return the section data in an
object to give you more control of how you want to render the sections.
// app/routes/$.tsx
export default function Route404() {
return null
}