Hero-Abschnitt

Was Sie lernen werden

• Wie man den Hero-Bereich hinzufügt und anpasst

• Wie man zwischen Bild- und Videohintergründen wechselt

• Wie man Titel, Überlagerungen und Abstände konfiguriert

• Wie man bis zu 2 Call-to-Action-Schaltflächen hinzufügt und gestaltet

---

🧩 Abschnittsübersicht

Der Hero-Bereich im Plain Jane Theme ist ein vollbreites Banner, das verwendet wird, um einen mutigen ersten Eindruck in deinem Laden zu erzeugen. Du kannst ein Bild oder ein automatisch abgespieltes Video mit einem Titel und bis zu zwei Call-to-Action-Schaltflächen präsentieren.

💡 Tipp: Für beste Ergebnisse verwende hochwertige Bilder oder kurze, stummgeschaltete Videoloops unter 10 MB.

---

⚙️ Wie man den Hero-Bereich hinzufügt und anpasst

1. Abschnitt hinzufügen

• Vom Shopify Theme-Editor, öffne dein Startseite

• Klicken Sie Abschnitt hinzufügen und wähle Hero

• Ziehen Sie ihn optional an den oberen Rand Ihres Layouts

2. Hintergrundmedien hochladen

Unter Inhalt & Daten:

• Medientyp: Wähle Bild oder Video

• Bild: Lade hoch oder wähle dein Erstes Bild

• Zweites Bild (optional): Wird bei aktiviertem Fallback für Mobilgeräte verwendet

• Video: Hochladen .mp4 Format nur; Autoplay ist stummgeschaltet

⚠️ Warnung: Auf iPhones im Energiesparmodus kann das automatische Abspielen von Videos deaktiviert sein.

---

🖋️ Text- und Layouteinstellungen

Titel

• Hero-Titel: Füge deine Nachricht hinzu (z. B. „NEUE ANKÜNFTE“)

Layout & Anzeige

• Hero-Höhe: Wähle aus 50%, 75%, oder 100% der Ansichtsfensterhöhe

• Auf Mobilgeräten Bild statt Video verwenden: Einschalten, um mobiles Video zu überschreiben

• Auf Mobilgeräten nur ein Bild anzeigen: Hilft, Layout und Geschwindigkeit zu kontrollieren

• Auswahl des Mobilbildes: Wähle aus, welches Bild angezeigt werden soll

Inhaltsposition

• Setze den Text und die Schaltflächen auf:

  • Oben links

  • Oben zentriert

  • Zentriert

  • Unten links

  • Unten rechts

---

🎨 Typografie, Farben & Stil

Typografie

• Schriftstärke: Wähle zwischen Normal und Fett

Farben

• Titel-Farbe: Lege eine benutzerdefinierte Hex-Farbe fest (z. B. #FFFFFF)

Überlagerungen

• Obere/untere Überlagerungen: Optionale Verläufe zur besseren Lesbarkeit

• Festlegen:

  • Überlagerungsfarbe

  • Überlagerungshöhe (%) mit Schieberegler

💡 Tipp: Verwende ein halbtransparentes Schwarz (#000000 bei 40%), um den Text hervorzuheben.

---

📦 Abstände

Passen Sie die Abstände getrennt für Desktop und Mobil an:

plaintextCopyEditTop Abstand (Desktop): 0px
Abstand unten (Desktop): 20px
Abstand oben (Mobil): 0px
Abstand unten (Mobil): 16px

---

🔘 Schaltflächen

Du kannst bis zu zwei Schaltflächenhinzufügen. Jede Schaltfläche enthält:

Inhalt & Daten

• Schaltflächentext: Beispiel: SHOP-KOLLEKTION

• Schaltflächen-Link: Füge eine interne oder externe URL ein

Farben

• Hintergrundfarbe: (z. B. #FFFFFF)

• Textfarbe: (z. B. #000000)

Stil

• Abgerundete Ecken: Passe den Randradius in px

⚠️ Schaltflächenbegrenzung: Du kannst pro Hero-Bereich nur 2 Schaltflächen hinzufügen.

---

🧩 Beispiel für Abschnittsstruktur

Hero
├── Schaltfläche 
└── Schaltfläche 

---

Brauchen Sie Hilfe?

• 💬 Treten Sie unserer Community auf Discord bei: https://discord.gg/hcc2GvgZc6

• 📧 Schreiben Sie uns eine E-Mail an: [email protected]

• 💻 Chatten Sie live mit uns: Verfügbar Montag–Freitag, 10:00–18:00 EST, direkt auf unserer Website