Manage Templates

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.

// 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;
}

Changing page template

You can change a page template inside the Customizer:

1. Navigate to the Customizer.
2. Click on Template settings in the left panel.
3. Select a template from the dropdown menu.
4. Click Save.

Creating a template

You can create a new template in Pack’s admin:

1. Navigate to Pack’s admin.
2. Click on Sections > Templates in the left sidebar.
3. Click on Create template in the top right corner.
4. Enter a name for your template, select a template type and optionally add sections.
5. Click Save.

Editing a template

You can edit a template in Pack’s admin:

1. Navigate to Pack’s admin.
2. Click on Sections > Templates in the left sidebar.
3. 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:

1. Navigate to Pack’s admin.
2. Click on Sections > Templates in the left sidebar.
3. Click on the three dots next to the template you want to publish.
4. Click Publish.

You can follow the same steps to unpublish a template.