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.

// 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.

// 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.

// 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.

// 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.

// 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.

// app/routes/$.tsx
export default function Route404() {
  return null
}

Guides

Templates

Learn more about templates

Read more

Sections

Learn more about sections

Read more

Localhost Setup

Learn how to set up your localhost

Read more

Was this page helpful?