> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/german/plain-jane-interactive/getting-started/2.-setting-up-your-homepage.md).

# 2. Einrichten Ihrer Startseite

{% embed url="<https://youtu.be/KpO8Wdo-LeI>" %}

{% hint style="info" %}

> ⚠️ Hinweis: Die `Dynamischer Hintergrund` Sektion wurde in den neuesten Versionen von Plain Jane und Interactive veraltet. Verwende `Seiten-Leinwand` stattdessen — sie bietet die gleiche Funktionalität für Hintergrundbilder, Videos, Farben usw.
>
> ⚠️ Hinweis: Diese Anleitung gilt **unterstützen** für Plain Jane Starter-Benutzer.
> {% endhint %}

### Was du lernen wirst

* Wie du dein Startseiten-Layout in Plain Jane v3 und Interactive v2 anpasst
* Wie du Center-, Seitenbündige- und Kompaktmenüs hinzufügst und konfigurierst
* Wann welches Layout für beste Ergebnisse verwendet werden sollte
* Wie du Menüs verlinkst und die Navigation verwaltest
* Wie du die Startseite bei Bedarf vollständig überspringst

>

***

### 🛠️ Für neue Benutzer: Ein Menü einrichten

1. Gehen Sie zu **Onlineshop** > **Navigation** in deinem Shopify-Admin.
2. Klicken Sie **Menü hinzufügen** und nenne es z. B. `Testmenü`.
3. Füge Menüpunkte hinzu wie:
   * `Herren` → verlinke zu deiner Herren-Kollektion
   * `Lookbook` → verlinke zu einer benutzerdefinierten Seite oder zur Startseite
   * `Kontakt` → verlinke zur integrierten Kontaktseite von Shopify
4. Klicken Sie **Speichern**.

***

### 🎨 Layout 1: Zentrum-Menü

Dies ist das beliebteste Layout (z. B. Supreme-ähnliche Startseite).

#### So richtest du es ein

1. Öffne dein Theme im **Passen Sie** Editor.
2. Stelle sicher, dass diese Bereiche vorhanden sind:
   * `Preloader`
   * `E-Mail-Popup`
   * `Seiten-Leinwand`
   * `Zentrum-Menü`

> 💡 Tipp: `Seiten-Leinwand` ersetzt die veraltete `Dynamischer Hintergrund` Sektion. Verwende sie für Hintergrundbilder oder Farben.

#### Verknüpfe dein Menü

* Klicke auf die `Zentrum-Menü` Sektion
* Im rechten Bereich, **wähle dein Menü** aus dem Dropdown (z. B., `Testmenü`)

#### Social-Media-Symbole

* Symbole umschalten **ein**
* Füge vollständige URLs zu deinen Profilen ein (z. B. TikTok, Threads, Tumblr)

> 💡 Tipp: Füge unter dem zentrierten Menü keinen scrollbaren Inhalt hinzu. Halte es sauber und schlicht.

***

### 🎨 Layout 2: Seitenbündiges Menü

Gut für Marken, die minimale vertikale Menüs möchten.

#### Einrichtungsschritte

1. Entferne im Theme-Editor die `Zentrum-Menü`.
2. Klicken Sie **Abschnitt hinzufügen** > `Seitenbündiges Menü`
3. Wähle dein Menü im rechten Bereich aus

#### Anpassungsoptionen

* Passe **Schriftgröße**, **Link-Abstand**, und **Farben**
* Schalten Sie **Login-Link** Sichtbarkeit (erfordert aktivierte Kundenkonten)
* Wählen Sie **Logo-Ausrichtung** (links oder rechts)
* Ändere **Schriftfamilie** unter `Theme-Einstellungen > Typografie`

> 💡 Tipp: Vermeide es, Produktabschnitte unter diesem Layout zu stapeln — es ist nicht scrollfreundlich.

***

### 🎨 Layout 3: Kompaktes Menü

Dieses Layout hat ein Hamburger-Symbol oben rechts.

#### Einrichtungsschritte

1. Füge das `Kompakte Menü` Sektion
2. Verknüpfe dein Menü unter `Theme-Einstellungen > Globale Menü-Einstellungen`
3. Zentriere oder richte dein Logo beliebig aus

#### Hintergrund + Inhalt hinzufügen

* Verwende die `Seiten-Leinwand` Sektion um:
  * Eine Hintergrundfarbe festzulegen oder ein Bild hochzuladen
* Füge Abschnitte hinzu wie `Kollektionsliste` oder `Produkt-Karussell`

> ⚠️ Warnung: Dies ist das **einzige Layout** empfohlen für scrollbare Startseiten.

***

### 🚀 Die Startseite überspringen (Optional)

Möchtest du Besucher direkt zu einer Kollektion führen?

1. Gehen Sie zu `Theme-Einstellungen > Startseiten-Einstellungen`
2. Aktivieren **Startbildschirm überspringen**
3. Lege die Zielseite fest (z. B. eine bestimmte Kollektion)

> 💡 Tipp: Das ist nützlich für produktorientierte Marken, die keine Startseite benötigen.

***

### 📌 Abschließende Hinweise

* Verwende **Seiten-Leinwand** für alle Anpassungen des Startseiten-Hintergrunds
* Halte dein Layout minimal und funktional
* Speichere immer und aktualisiere, um deine Änderungen zu Vorschauzwecken anzuzeigen

Unterstützte Layouts:

* Zentrum-Menü (statische Landingpage)
* Seitenbündiges Menü (minimale vertikale Navigation)
* Kompaktes Menü (scrollbarer Startseiten-Builder)

### **Brauchen Sie Hilfe?**

* 💬 **Für technischen Support treten Sie unserem Discord bei:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Schreiben Sie uns eine E-Mail an:** <support@openspaces.design>
* 💻 **Chatten Sie live mit uns:** Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.openspaces.design/german/plain-jane-interactive/getting-started/2.-setting-up-your-homepage.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
