Home

The home page is a server component that renders a hero banner, a featured products carousel, and an informational section. Product data is fetched server-side from Shopify.

Hero section

A full-width banner with a background image, gradient overlay, headline, subheadline, and a CTA link. The hero scales responsively - 300px tall on mobile, 400px on small screens, and 500px on medium and up.

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: "...", width: 1920, height: 1080 }).

The headline and CTA are configurable through the HeroSection type. 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 carousel

A horizontally scrollable carousel showing up to 10 products fetched via getProducts(). Each item is a product card with:

• Featured image with hover slideshow — on desktop, hovering the image area reveals a CSS snap-scroll slideshow starting at the second image with chevron navigation (up to 5 images fetched per product card, variant-specific color images are excluded)
• Out-of-stock overlay when unavailable
• Title and price (with compare-at price for discounts)
• Quick-add button for in-stock items

The carousel uses CSS snap scrolling with chevron navigation arrows on desktop. On mobile, cards are approximately 7/12 of the viewport width and scroll full-bleed past the viewport edge. Items per view scale with screen size: ~1.7 on mobile, 2 on small screens, 3 on tablet, 4 on desktop, 5+ on wide screens. Navigation arrows are hidden on mobile.

Information section

A two-column grid (stacked on mobile) with a heading and descriptive prose. This is static content explaining the template's capabilities.

Data fetching

Products are fetched server-side with getProducts({ limit: 10, locale }), which queries the Shopify Storefront API and caches the result with cacheLife("max") and product-level cache tags for granular revalidation.

Key files

File	Purpose
app/page.tsx	Root page, metadata generation, product fetch
components/hero-section.tsx	Full-width hero banner with image, headline, CTA
components/cms/blocks/top-products-carousel.tsx	Horizontally scrollable product carousel
components/product-card.tsx	Product card with image, price, quick-add
lib/shopify/operations/products.ts	Shopify product fetching with caching