# 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