Templates in Pack: Understanding and Managing Page Structures

Templates are only available on Pack storefronts.

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
}

Guides

Templates

Learn more about templates

Sections

Learn more about sections

Localhost Setup

Learn how to set up your localhost