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.
Learn more about templates here.
Available Types
You can find all available template types inside your storefront's Github repository in the /app/routes
directory.
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.
// 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.
// 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.
// 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.
// 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.
// 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.
// app/routes/$.tsx
export default function Route404() {
return null;
}
Changing page template
You can change a page template inside the Customizer:
- Navigate to the Customizer.
- Click on Template settings in the left panel.
- Select a template from the dropdown menu.
- Click Save.
Creating a template
You can create a new template in Pack’s admin:
- Navigate to Pack’s admin.
- Click on Sections > Templates in the left sidebar.
- Click on Create template in the top right corner.
- Enter a name for your template, select a template type and optionally add sections.
- Click Save.
Editing a template
You can edit a template in Pack’s admin:
- Navigate to Pack’s admin.
- Click on Sections > Templates in the left sidebar.
- Click on the template you want to edit.
Deleting a template
Currently, you cannot delete a template. This feature is coming soon.
Publishing a template
You can publish a template in Pack’s admin:
- Navigate to Pack’s admin.
- Click on Sections > Templates in the left sidebar.
- Click on the three dots next to the template you want to publish.
- Click Publish.
You can follow the same steps to unpublish a template.