# 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 Sie lernen werden

* 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.

<figure><img src="/files/c1a35a5d0da1f6593b2012b7d67be9651b783d10" alt="Shopify theme customizer overview"><figcaption><p>Theme-Customizer-Oberfläche zeigt Startseitenabschnitte</p></figcaption></figure>

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ü

* Klicken Sie auf den `Zentrum-Menü` Abschnitt

<figure><img src="/files/a7d172b2c8329968febf302b995bc4c51b76703c" alt="Center Menu section selected in theme customizer"><figcaption><p>Abschnitt "Zentriertes Menü" ausgewählt zeigt Einstellungsfenster</p></figcaption></figure>

* Im rechten Bereich, **wähle dein Menü** aus dem Dropdown (z. B., `Testmenü`)

<figure><img src="/files/1c5f60fc751b9e9182fe421a069217212a3bf74c" alt="Center Menu settings panel"><figcaption><p>Einstellungsfenster für "Zentriertes Menü" mit Menü-Dropdown</p></figcaption></figure>

<figure><img src="/files/b3825709c0204e525d66c86c75ccda697b4cd417" alt="Center Menu dropdown selection"><figcaption><p>Menü-Dropdown zeigt verfügbare Navigationsmenüs</p></figcaption></figure>

#### 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ü`

<figure><img src="/files/1afa2c393437a770d5a55ec85b1c35ba6d919feb" alt="Add section modal in theme customizer"><figcaption><p>Modal zum Hinzufügen eines Abschnitts zeigt verfügbare Abschnitte</p></figcaption></figure>

<figure><img src="/files/1e6c852af534672346ecb28fb580a3da5d970ebe" alt="Side Aligned Menu section added"><figcaption><p>Seitenbündig ausgerichteter Menüabschnitt erfolgreich hinzugefügt</p></figcaption></figure>

3. Wähle dein Menü im rechten Bereich aus

<figure><img src="/files/07154259e632f3a7b56b8c64673b0d02b1fb8880" alt="Side Aligned Menu settings"><figcaption><p>Einstellungen und Anpassungsoptionen für seitenbündig ausgerichtetes Menü</p></figcaption></figure>

#### 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ü` Abschnitt

<figure><img src="/files/b955f39f89861b2a11271bb686565dc9dbc2b45a" alt="Compact Menu section in theme customizer"><figcaption><p>Kompakter Menüabschnitt zur Startseite hinzugefügt</p></figcaption></figure>

2. Verknüpfe dein Menü unter `Theme-Einstellungen > Globale Menü-Einstellungen`

<figure><img src="/files/0d86b4336c11244045a687ac15f317c13d67d018" alt="Global Menu Settings in Theme Settings"><figcaption><p>Globale Menüeinstellungen zur Konfiguration des kompakten Menüs</p></figcaption></figure>

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

<figure><img src="/files/079feaa58f4391283d9c5337f2205d00782fcfe3" alt="Page Canvas settings for background customization"><figcaption><p>Seiten-Leinwand-Einstellungen zum Hinzufügen von Hintergrundbildern und -farben</p></figcaption></figure>

* 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

* Verwenden Sie **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: 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:

```
GET https://docs.openspaces.design/german/readme-1/getting-started/2.-setting-up-your-homepage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.