# Preloader-Abschnitt

### **Was Sie lernen werden**

* Wie man einen gebrandeten Ladebildschirm aktiviert, bevor Ihre Seite geladen wird
* Wie man Hintergrund, Logo und Text anpasst
* Wie man die Anzeigedauer einstellt

***

### 🧩 Abschnittsübersicht

Der Preloader fügt einen bildschirmfüllenden Ladebildschirm hinzu, der kurz erscheint, wenn Besucher auf Ihrem Shop landen. Das ist nützlich, um die Markenpräsentation zu verbessern und während des anfänglichen Seitenladens ein professionelleres Nutzererlebnis zu schaffen.

Sie können entweder Text oder ein Bild (z. B. ein Logo) zusammen mit benutzerdefinierten Hintergrundfarben und Timing anzeigen.

***

### So aktivieren Sie den Preloader

1. Im **Shopify Theme-Editor**, öffnen Sie das **Theme-Einstellungen**
2. Suchen Sie und erweitern Sie das **Preloader** Panel
3. Schalten Sie das **Preloader-Logo-Typ** (wählen Sie zwischen *Text* oder *Bild*)

***

### Preloader-Einstellungen

#### Preloader-Logo-Typ

* **Text**: Zeigt einen Marken- oder Themennamen an
* **Bild**: Verwenden Sie Ihr Logo oder eine animierte Grafik

#### Preloader-Text

* Fügen Sie einen kurzen Titel hinzu (z. B. „Plain Jane 3.0“)
* Passe die **Textfarbe**
* Passe **Textgröße** mit dem Schieberegler

> 💡 Tipp: Verwenden Sie fette oder große Schriftarten für mehr visuelle Wirkung

#### Preloader-Bild

* Laden Sie ein statisches oder animiertes Bild hoch (z. B. .GIF oder .webp)

#### Hintergrundfarbe

* Legen Sie die Hintergrundfarbe des Preloader-Bildschirms fest

#### Preloader-Dauer

* Steuert, wie lange der Bildschirm angezeigt wird (in Sekunden)
* Standard ist 1 Sekunde; erhöhen Sie die Dauer für längere Ladeanimationseffekte

***

### Beispielanwendungen

* Zeigen Sie Ihre **Logo-Animation** an, bevor der Shop geöffnet wird
* Passen Sie den **Preloader-Hintergrund** an Ihren Hero-Bereich an für einen nahtlosen Übergang
* Verwenden Sie gebrandeten Text wie: „Kollektion wird geladen…“ oder „Powered by Plain Jane“

> ⚠️ Halten Sie die Dauer kurz (1–3 Sekunden), um zu vermeiden, dass der Nutzerzugang verlangsamt wird

***

### Styling-Tipps

* Passen Sie den Preloader- **Farben** an Ihre Markenpalette an
* Halten Sie den **Text minimal** für ein sauberes Erscheinungsbild
* Verwenden Sie einen transparenten oder weißen Hintergrund für ein leichtes Gefühl

***

### **Brauchen Sie Hilfe?**

* 💬 **Treten Sie unserer Community auf 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