---
title: Home
description: The storefront landing page - a headline and a products grid.
type: guide
---

# Home



<HomeBrowser />

The home page is a server component: a headline section followed by a grid of the storefront's top products. It's the simplest route in the template and the one most teams customize first.

## How it works

**Static headline, live-fetched grid.** The headline and description are static strings from the `home` translation namespace, rendered with no data dependency, so they ship as part of the static shell with zero layout shift. The products grid is a separate `Suspense` boundary below it, so a slow catalog fetch never blocks the headline from painting.

**The grid mirrors `/collections/all`, not a curated list.** Products come from `searchIndexProducts()` — the same relevance-ranked Storefront `search` path (wildcard `*` query) that backs the all-products collection page — so the home grid shows exactly the first 8 products a shopper would see there, rather than a separate best-selling or hand-picked list.

## Out of the box

* **Headline section** — a centered `h1` and description above the grid, with a `4/1` aspect-ratio spacer on desktop and compact padding on mobile.
* **Products grid** — the top 8 products via `searchIndexProducts({ limit: 8, locale })`, cached with `cacheLife("max")` and product-level cache tags for granular revalidation.
* **"View all" link** — the grid's section heading links to `/collections/all` by default, set via the `title` and `collectionUrl` props on `ProductsGrid` in `app/page.tsx`.
* **Responsive columns** — 2 columns on mobile, 4 on desktop, using the standard [product card](/docs/anatomy/product-card).

## Common customizations

The home page doesn't ship these, but they're common additions teams layer on top.

* **Hero banner** — an image or video banner above the headline, for a merchandising-led landing page instead of a plain text intro.
* **Curated or best-selling sections** — additional `ProductsGrid` instances backed by a specific collection instead of the search index, for "New Arrivals" or "Best Sellers" rows.
* **Promotional content** — editorial blocks and banners between sections. The template ships a `ProductsSlider` component for a horizontally scrollable row of the same [product card](/docs/anatomy/product-card), though it isn't wired into any page by default.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)