Home
The storefront landing page - hero, featured products, and promotional content.
The home page is a server component that renders a hero banner and a featured products grid. Product data is fetched server-side from Shopify.
Hero section
A full-width banner with a background image or autoplaying background video, gradient overlay, headline, subheadline, and a CTA link. On mobile, the hero height comes from its vertical padding; on medium screens and up, it keeps a wide 3 / 1 aspect ratio.
By default the hero uses a statically imported image from public/hero.jpg, which enables automatic blur placeholders and prevents layout shift. To use a custom image, pass a backgroundImage prop — either a static import (import myHero from "@/public/my-hero.jpg") or a remote URL object ({ url: "https://...", alt: "..." }).
To use a video hero, pass backgroundVideo: { url: "https://...", previewImage: { url: "https://...", alt: "..." } }. Videos use the shared AutoPlayVideo component, so they autoplay when visible and pause when off-screen. When both backgroundVideo and backgroundImage are present, the video is used.
The headline and CTA are configurable through the BannerSection component's hero prop. By default the CTA links to /search to browse the catalog.
On mobile, the subheadline and CTA text are hidden to keep the banner compact.
Featured products grid
A responsive grid showing up to 8 products fetched via getProducts(). The grid uses the ProductsGrid component with a section title and a link to the full catalog. Each item is a product card with:
- Featured image, with a muted title-text fallback when the product has no image
- Out-of-stock overlay when unavailable
- Title and price (with compare-at price for discounts)
The grid is responsive: 2 columns on mobile, 3 on tablet, 4 on desktop. The ProductsSlider component is also available for a horizontally scrollable layout (used on the PDP for related products).
Data fetching
Products are fetched server-side with getCollectionProducts({ collection: "frontpage", limit: 8, locale }), which pulls from Shopify's default frontpage collection so merchants can curate the home page from the Shopify admin. The result is cached with cacheLife("max") and product- and collection-level cache tags for granular revalidation. To feature a different collection, change collectionHandle (and collectionUrl) on the FeaturedProducts call in app/page.tsx.
Key files
| File | Purpose |
|---|---|
app/page.tsx | Root page, metadata generation, product fetch |
components/sections/banner-section.tsx | Full-width hero banner with image, headline, CTA |
components/product/products-grid.tsx | Responsive product grid with section title |
components/product/products-slider.tsx | Horizontally scrollable product slider (used on PDP) |
components/product-card/product-card.tsx | Product card with image and price |
lib/shopify/operations/products.ts | Shopify product fetching with caching |