> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joinmarkt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Homepage & Sections

> How to build a storefront homepage that lists products, heroes, and CTAs.

# Homepage & Sections

The homepage is the store entry at `/`. Theme developers decide layout; Join Markt supplies `store` + `products`.

## Goals

1. Brand / hero
2. Path to browse or buy (product grid or CTA → `/products`)
3. Trust (policies, support links)
4. Fast first paint — avoid huge client bundles on Nunjucks; code-split on Vite

***

## Nunjucks homepage (`templates/home.njk`)

```njk theme={null}
{% extends "layouts/base.njk" %}

{% block content %}
  <section class="hero">
    <h1>{{ store.name }}</h1>
    <p>{{ store.description }}</p>
    <a href="{{ '/products' | shopUrl }}">Shop all</a>
  </section>

  <section class="featured-products">
    <h2>Products</h2>
    <div class="grid">
      {% for product in products.slice(0, 12) %}
        <a class="card" href="{{ ('/product/' ~ product.slug) | shopUrl }}">
          {% if product.image %}
            <img src="{{ product.image | imageUrl }}" alt="" />
          {% endif %}
          <h3>{{ product.name }}</h3>
          <span>{{ product.minPrice | formatPrice(currency) }}</span>
        </a>
      {% else %}
        <p>Coming soon.</p>
      {% endfor %}
    </div>
  </section>
{% endblock %}
```

### Optional: settings-driven featured IDs

In `settings.json`:

```json theme={null}
{
  "homepage": {
    "featuredProductIds": ["slug-a", "slug-b"]
  }
}
```

In template:

```njk theme={null}
{% set featured = helpers.components.products.getItemsByIds(
  products,
  settings.homepage.featuredProductIds or []
) %}
{% for product in featured %}
  {# card #}
{% endfor %}
```

***

## Vite homepage

Default template: `src/pages/LandingPage.tsx` (or equivalent route `/`).

Pattern:

1. Read `useStore()` / storefront bootstrap.
2. Render Visual Builder **sections** when present (Hero, Features, Product grid).
3. Fallback static layout if no section config.

Hero settings (Visual Builder) may include:

* Headline, subcopy, CTAs
* Optional hero image (`imageUrl`, `showImage`, `imageScale`)
* Search / stats toggles

Product section = map `products` to cards linking to `/product/:slug`.

Developers customize section components in the theme; sellers edit content in **Visual Builder** without touching code.

***

## Recommended homepage sections

| Section      | Data source              | Notes                              |
| ------------ | ------------------------ | ---------------------------------- |
| Hero         | `store` + theme settings | CTA → `/products` or first product |
| Product grid | `products`               | Cap 8–12; link “View all”          |
| Featured     | IDs from settings        | `getItemsByIds` or `.filter`       |
| Trust / FAQ  | Static copy              | Optional                           |
| Footer       | Policy routes            | `/privacy`, `/terms`, `/refunds`   |

***

## Empty & loading states

Always handle:

* **Loading** — skeleton while storefront API resolves (Vite)
* **Empty catalog** — “No products yet” instead of a blank grid
* **Hidden products** — respect platform visibility; do not show drafts

***

## See also

* [Shortcodes & Tags](/storefront/shortcodes)
* [Products & Catalog](/storefront/products)
* [Custom Themes](/storefront/custom-themes)